INTRODUCTION

Imagine embarking on a project that seemed straightforward—an industrial-based SaaS platform redesign. However, as the layers peeled back, what appeared simple revealed an intricate web of challenges and opportunities for growth.

A GLIMPSE OF THE PROBLEM

During the initial stages, it quickly became evident that something wasn't right. The platform was inundated with issues that hindered user efficiency and satisfaction. Users struggled with excessive cognitive load, and training new employees was a time-consuming endeavor.

THE OVERWHELM

I vividly recall my first knowledge transfer call. Terms like "Ethane conversion rate" and "Total Furnace Feed" were thrown around, leaving me scratching my head. What had I gotten myself into? It felt like diving into a sea of complexity with no clear path to the surface.

KEY FINDINGS

PEELING BACK THE LAYERS

As I delved deeper, the complexity began to unravel. By focusing on the project's core objectives and the platform's functionalities, I started making sense of the chaos. Conducting a UX audit, I unearthed critical issues that demanded attention.

Visual and
Cognitive Load

The platform overwhelmed users with excessive information, leading to fatigue and inefficiency.

Content and Labeling Issues

Poor labeling and inconsistent content structure impeded users' ability to find information quickly.

Lack of Contextual Clarity

Users were expected to make decisions without sufficient context, resulting in confusion.

Proximity and Common Region Problems

Poor element arrangement made it difficult for users to distinguish related information.

Inadequate Affordance and Feedback

Users struggled to understand the system's responses to their actions.

Inconsistent Visual Design

Multiple representations of the same information disrupted cognitive flow.

Accessibility Concerns

Heavy reliance on colors, particularly on darker screens, compromised accessibility.

NAVIGATING THE CHALLENGES

The journey to solving these issues began with understanding the user journey. Extensive sessions were conducted to map user interactions, frustrations, and expectations, providing valuable insights.

Early Observations

• Excessive Eye Movement: Users experienced significant eye strain due to scattered and poorly organized information.

• Non-Linear User Journeys: The platform allowed multiple interaction paths, leading to inconsistent experiences.

• Lack of Visual Hierarchy: Users were unsure where to focus their attention.

EXPLORING SOLUTION

I began creating wireframes and low-fidelity screens to gather stakeholder feedback and validate design hypotheses.

Option 1: Similar with Adjustments

• Reduction in Repeated Information: Streamlined content to eliminate redundancy.

• Clear Information Using White Space and Color Theory: Enhanced visual clarity.

• Maintained Original Concept: Preserved core design while making necessary adjustments.

• Distinct Separation of Information: Improved content separation with visual cues.

Option 2: Focusing on Equipments

• Highlighting Most Actionable Items: Prioritized actionable items.

• Grouping and Clubbing Information: Organized related information coherently.

• Clear Direction for User: Provided a guided user path.

• Singular Information Focus: Focused on delivering relevant information.

Option 3: Focus on Overall
and Equipment Level

• Utilized User Journey: Leveraged insights to improve usability.

• Limited Information to Reduce Load: Presented essential information.

• Action-Oriented Approach: Encouraged user actions.

• Improved Navigation Ease: Simplified the user interface.

MISSED CONSIDERATIONS AND LATER DISCUSSION

• Interconnectedness of Overall and Equipment Levels: Recognized the need for seamless integration between overall and equipment-specific views.

• Established Mental Models: Considered users' mental models and expectations for content placement and interaction patterns.

• Non-Negotiable Elements for Bird's Eye View: Ensured that critical elements providing a comprehensive overview remained prominent.

PRESENTED SOLUTIONS POST DISCUSSION

• Clear Distinction Between Clickable and Non-Clickable Items: Enhanced affordance and signifiers to distinguish interactive elements.

• Universal System of Indicators: Developed a consistent system of indicators to highlight critical KPIs, reducing cognitive load.

• Designed Mental Models for Navigation: Established mental models through consistent design patterns, aiding user navigation.

• F-Pattern Path Design: Implemented an F-pattern layout to guide users' visual journey, enhancing information hierarchy.

• Mental Calculations: Users had to perform numerous mental calculations to process information.

• Need for Clear Relationships: Displaying relationships between data points was essential.

• Decision-Making Support: The platform overwhelmed users with possibilities without actionable insights.

• Obscured Second and Third-Level Navigation: Enhanced navigation awareness.

• Necessity of Extra Remarks on Screen: Supported users in complex scenarios.

• Handling Content Complexity with Hick’s Law: Managed content complexity for efficiency.

HIGH-FIDELITY SCREENS

• Affordance and Signifiers: Enhanced interactive elements with clear affordance and signifiers, improving usability.

• Universal System of Critical Indicators: Developed a consistent indicator system to highlight critical KPIs, aiding decision-making.

USER TESTING AND FEEDBACK

The prototype was tested by internal teams, including customer satisfaction groups. Feedback was largely positive, highlighting:

• Development of Common Regions: Enhanced separation of content, reducing cognitive load.

• Request for Dark Mode: Incorporated dark mode to align with other products and improve usability in varied lighting conditions.

• Improved KPI Reachability: Introduced notification-like indicators for crucial KPIs, inspired by consumer products, enhancing user awareness.

FINAL HIGH-FIDELITY SCREENS

• Designed Mental Models: Established mental models through consistent design patterns, enhancing navigation.

• Clear F-Pattern Path: Implemented an F-pattern layout to guide users' visual journey, improving information hierarchy.

LEARNINGS AND SUCCESSES

1. Trust in the Process: Six months of continuous discussions and information gathering yielded critical insights that shaped the project.

2. Power of Iteration: Regular refinements and improvements throughout development strengthened the final product.

3. SaaS Accessibility: Complex SaaS products became more approachable through user-centered design principles.

4. Questioning Assumptions: We reevaluated our initial color-related decisions by prioritizing factory conditions over general accessibility concerns.

5. Setting New Standards: The redesigned platform established a benchmark for UX design within the company, highlighting the value of user research.

6. Expanding Impact: Project success led to new consulting opportunities and broader application of our insights.

7. Principles in Practice: Core UX concepts—affordance, signifiers, and feedback—now enhance user experience across all company projects.