Problem Space - Redesign Existing Dashboard
Wireless Service Dashboard is a major function module on OMNI Channel Sales & Service platform , and provides functions like usage inquiry, service detail inquiry, service change request, and mobile device upgrade etc.
Customer Pain Points
This is a redesign project in partnership with consumer design team - many usability issues have been identified in the existing solution:
- - users very often are confused by the remaining data and the actual data usage. The dial metaphor creates many confusions;
- - the un-happy paths, like data overage, changing plan during the billing cycle, adding new data, can not be supported properly in the existing version;
- - The bottom contents are hard to spot, even though it is logical to stay where is;
- - IA construct is not clear enough to convey service structure, between family plan and individual lines and the corresponding settings.
Project Outcome
I led the beginning-to-end design journey, from the initial scoping discussion, interlocking priority with related projects, customer journey mapping, ideation, wireframing to final mocks.
The delivery package includes design solutions for both brands and across multiple channels and devices.
Customer Journey Mapping
To form a complete picture of the different states that customers experience during typical billing cycles and outline their behaviors, needs, pain points, and opportunities that occur in each state, I created journey maps at the beginning stage.
Design Goal
Based on the insights identified from customer journey and pain points analysis, I worked together with Product Owners to align on the overarching design goal:
1) the new dashboard design should aim for a scalable solution that both accommendates current wireless products and enables new wireless products (e.g unlimited wireless plans, speed pass).
2) we have learnt the challenges with the current design is to provide clear and in-time information and recommendation to users under different stages (e.g overage, plan changes) of customer journey, the new solution should focus on finding a cohesive design pattern to remain relevant to user contexts and fit in all the scenarios in product life cycles. Besides, all major usability defects need to be addressed.
Page Architecture
The early design work started with exploring page architecture, which included collecting and grouping use cases, identifying information types, and analyzing functional requirements.
The intention is to create a high-level construct as a framework to ensure we covered all necessary use cases and variants and create a robust architecture:
- - Shared account vs individual account;
- - Different status of the account;
- - Visibility on both current and historical states;
- - Consumer vs agent needs;
- - Informational vs transactional elements;
Wireframe
Design Pattern
To accommodate different needs and dynamic contents all in the same usage dashboard area and also to surface the most needed information upon situation, I guided the team to explore a consistent design pattern that layers contents in the model of 'mission critical recommendation > situational notification > regular contents > Reps only business insights', and use visual distance to reflect urgency and reading recommendation, as below illustrated:
The top layer is used for the most time sensitive and mission critical recommendation that requires user's immediate attention, which were identified during the customer journey mapping:
Plus, we also created various basic layer variants to test if the design pattern can be used for all kinds of wireless products (e.g talk & text only, unlimited data) and service states (e.g data access blocked, overage):
Create new component for Agent Insight display
Another major decision that I guided the team to make is that as one Omni-channel digital solution, it should ideally bring the synergy between consumer-facing versions and frontline Rep facing versions, so that customers can smoothly switch between online and offline, and switch between self-serve channel and assisted channels, also agent can see what customers refer to when approached, which all the above are the product experience vision we set as a product development team.
The Agent Insight layer was created as a new component that can be plugged into any major UI block and host different types of agent insights (e.g reporting data, policy, tool instruction) needed for the content/function block. In this dashboard case, three chips will sit on the ground layer underneath the base layer, which each of them triggers a corresponding data table:
- - Current usage reporting data;
- - Past historical usage reporting data;
- - Policy and instruction articles.
Interaction Flow Design - Example
After the page architecture created, we worked on the actual task flows and the interaction design. Below are an exmaple of interaction flow design - data access managment.
Task Flow/Modal Design - Example
The design rationale is to host functions over modals and flows so we can place the relevant functions besides the corresponding information. The dashboard in that sense provides a drill-down experience for the users.
For example, a detailed modal can be found right beside the data info:
Usability Testing
After wireframing, we have researchers help us conduct user testing which included 2 rounds of focus groups (5 consumers and 5 agents separately) and 1 round usability testing (8 participants) to validate design and identify usability defects and missing functions.
Overall, the results were very positive - the new design was well perceived and we identified a few usability issues to further focus on. Because of the timeline, the updates were mainly reflected on the Fido version, which included:
- - Keep mobile and device panel simple and separate the quick actions into a central place;
- - Add data for in-plan usage;
- - Move data infographic and data numeric into the same section.
Final Mocks
Brand A
Landing Page:
Brand B
Landing Page:
Responsive Design
Tablet
Design Guide
collection of modal specification in Design Guide
