web app design

United Consultant Dashboard

Complete UI Redesign for UX Improvement

Context

SaaS · B2B

Timeline

Sep 2024 · 2 weeks

Services

Website Design

Construction Dashboard
Construction Dashboard
Construction Dashboard
Construction Dashboard

Background

United Consultant, a USA-based SaaS company, approached us to revamp their existing dashboard. The project was initiated following an insightful discovery call with Saeed, the co-founder, who recognized the need for a significant user experience upgrade.

initial version of united consultant dashboard

initial version of united consultant dashboard look and feel

Project Objectives

  1. Elevate the aesthetic appeal and usability of the interface for all user segments

  2. Establish and maintain consistency across fonts, components, and UX patterns

  3. Optimize the information architecture for improved navigation and comprehension

  4. Modernize the UI design, emphasizing cleanliness and contemporary design principles

Understanding the Why

My process begins with a deep dive into the 'why' behind design needs. After a swift but thorough analysis of the current designs, I identified significant opportunities to elevate the dashboard experience.

Key Findings:

  1. User-Centric Design: Our target users, aged 40-65, have varying levels of technological proficiency. The interface must be simple, intuitive, and highly accessible.

  2. Visual Consistency: Address and rectify inconsistencies in spacing, typography, color palette, and other UI elements.

  3. Pattern Establishment: Develop consistent patterns for repetitive user journeys, reducing the learning curve and enhancing overall usability.

Double Diamond Design Process

To streamline my workflow and maintain focus on core project objectives, I developed a custom Figma template. This template facilitated the implementation of the Double Diamond design process, which consists of 4 key phases:

  1. Discover: Competitor analysis • User research • Moodboards

  2. Define: Problem framing • User personas • User flows

  3. Develop: Idea generation • Wireframing • Prototyping

  4. Deliver: Design iterations • Usability testing • Developer handoff

Double diamond design process for each flow

My Figma page structure for each user flow

While the full process is comprehensive, I adapt it to each project's unique needs. Given this project's tight deadline, I focused on high-impact, low-effort methods within each phase to maximize efficiency.

Flow 01: Find Citation

Objective: Enable the company to monitor driver citations effectively, facilitating performance-based decision-making.

Current Design Analysis:

  1. Information Redundancy: The existing design didn't align optimally with business requirements. Users needed to compare citations bi-weekly within a specified timeframe.

  2. Performance Metrics: Identify drivers with the highest citation rates and their severity status (Level of gravity).

  3. Data Exploration: Introduce filtering capabilities to the employee detail page for easier data navigation.

Find Citation, before redesign

Find Citation, before redesign

Proposed Solutions:

  • Data Comparison Enhancement: Introduced a color-coded weekly bar chart, allowing easy comparison of citations across different time periods and severity levels.

  • Improved Information Hierarchy: Implemented a "Top Users" section and reorganized the citation table, reducing repetitive information and highlighting key data points.

  • Enhanced Filtering Capabilities: Added a time period filter and search function, facilitating easier data exploration and analysis for specific employees or time frames.

Find Citation, after ✦ redesign and solving issues

Find Citation, Employe detail redesign

Flow 02: Proposal

Initial version of proposal list (table view)

Proposal List (table view) after redesign

Initial version of proposal list (kanban view)

Proposal List (table view) after redesign

Proposal Detail Page

Initial version of proposal detail page

Redesigned version of proposal detail page

Follow up a proposal

Initial version of proposal detail / Follow up

Redesign version of proposal detail / Follow up


New Proposal

Initial version of new proposal

Redesign version of new proposal


Flow 03: Material Testing

Initial version of Material Testing (calendar view)

Redesign version of Material Testing (calendar view)


Initial version of Material Testing (assign/list view)

Redesign version of Material Testing (assign/list view)

Redesign version of Material Testing (filter)

UI Components

Results

The client was highly satisfied with the redesign, which led to a noticeable improvement in both user experience and business outcomes. I’ve designed 20+ screens in total for phase 1 of their release, setting the foundation for an enhanced user journey and smoother interactions across the platform.