NUI Design System: MySpark Dashboard Navigation
Designing and validating an dashboard navigation for MySpark dashboard.
Spark
6 months
UX/UI Design
Figma, Miro, Maze
My role
I contributed to this project while working in the Spark Design Systems team, in collaboration with the MySpark Business team. I helped to ensure that the navigation met the accessibility and usability needs of its users, validating through extensive testing.
Challenge
To make MySpark Business dashboard a streamlined and efficient self-serving platform for our end customers and Spark staffers, proudly representing Spark’s brand.
Objectives
To enable product scalability (adding new features while not compromising on usability).
To enable greater autonomy to the end customer in completing portal tasks on their own.
To reduce support costs and customer management workload for Spark staffers, especially for simple journeys.
Outcomes
Drill-down side navigation for Spark dashboards designed, built and validated through testing with key users.
Drop-down side navigation to be used for Sparks internal and external help and support pages designed, built and validated through testing with key users.
Reviewing the current experience
Existing design patterns in the Spark ecosystem including dashboard navigation and mega-menu. The existing dashboard patterns were outdated and not supported in Sparks NUI design system.
Understanding design constraints
There are two user groups who must considered, end customers (business owners) and power users (Spark support staff).
A key constraint is that the existing portal currently serves many customer journeys, these must remain unaffected by any updates.
Examples of existing Spark navigation patterns.
The problem
Through observation of the current experience and interviewing users, we were able uncover pain points and opportunities:
Inconsistent user experience
Different approaches to the side navigation pattern used across Spark’s products, such as MySpark consumer and business focused dashboards.
Misalignment in brand identity, design patterns and usability.
Task completion
Scalability
How might we….
...enable the user to navigate through the product in a more task-focused and efficient way while not yet being able to change existing user journeys through the platform?
Testing our assumption
We made a decision early to stick with a traditional side navigation for this project, this was due to the complex needs of our user groups and the varied tasks they need to complete. Adopting another existing navigation pattern, such as the mega-menu, would not allow us to future-proof the dashboard with scalability in mind.
To validate the first iteration of the design we ran moderated usability tests. We had 5 participants, all Spark CSRs (Customer Service Representatives) with different support roles. Participants completed 7 tasks with the prototype and expressed their thoughts.
The early iteration of the side navigation used for usability testing.
Insights
Users found the left-side navigation and suggested patterns to be familiar, they moved intuitively through its layers.
Users liked seeing that the suggested design is in alignment with the rest of Spark's brand.
Users expected to see in the the nav only information that is relevant to them in that moment.
Most users found that main categories are in a visible and accessible place.
A/B Testing
We tested two distinct navigation patterns, drop-down and drill-down menus. We used maze.com to run unmoderated remote usability tests using Figma prototypes.
What we tested:
Two groups of 60 to 80 customers recruited through Spark Neighbourhood and using desktop devices.
Each group was asked to perform three tasks and rate the ease in which they were able to complete each task.
We measured task completion success, time taken to complete the task, misclicks and if they were able to complete the task through the quickest possible path.
Navigation A: Drop-down Menu
The prototype of the drop-down menu used for testing.
Navigation B: Drill-down Menu
The prototype of the drill-down menu used for testing.
Results
The two navigation options scored very evenly across all metrics, apart from ease rating, where the drill-down option scored higher for all three tasks. These ratings were further supported by positive participant feedback.
Part two coming soon…
A detailed look into the final navigation UI and its design system specifications.