Edmond HuaEnd-end-end redesign of a tracking and delivery dashbard experience
Telecommunications Company |
PRODUCT DESIGN
SERVICE DESIGN
Team: 2 Product Designers
Time Frame: 1.5 months
Tools: Figma, Miro, Otter.ai
This is an internal client project, areas of identification and content have been blurred out. Only high-level processes have been presented, further details and insights can be presented about upon request and presented during interviews.
Background
A top Australian Telecommunications companies had a very outdated legacy portal/dashboard that was in dire need of an update. The platform hasn’t changed for over six years and was used globally by many enterprise companies to help order and track wholesale cabling, network, and systems.
Project Brief
Our two main SOW (Statement-of-work) goals were to:
- To form a complete view of the purchase and delivery process for the client's wholesale platform.
- To redesign and optimise the UX/UI experience for the clients (Delivery Managers) and enterprise customers (Service Providers).
My roles in each phase
What were the problems?
Highly Technical
The platform itself was only used by specialised trained employees. There were lots of technical terms and fields, we had to find out what they all meant before getting into it.
Legacy Experience
The product itself was structurally convoluted, there were no flow or visual affordances, causing users to create errors.
Business vs Customer Needs
Navigating bias and true user needs, figuring out if what the client said was good for the platform and its users.
The platform itself was only used by specialised trained employees. There were lots of technical terms and fields, we had to find out what they all meant before getting into it.
Legacy Experience
The product itself was structurally convoluted, there were no flow or visual affordances, causing users to create errors.
Business vs Customer Needs
Navigating bias and true user needs, figuring out if what the client said was good for the platform and its users.
Platform screenshots from the client
The Approach - Discovery
Current State Review | Internal Stakeholder Interviews
We kicked off with some initial calls with the project stakeholders, working together to further understand and define the brief.
These calls were really for us to get used to the lay of the land, introduce the platform, and form some initial thoughts on the sprint plan moving forward.
We kicked off with some initial calls with the project stakeholders, working together to further understand and define the brief.
These calls were really for us to get used to the lay of the land, introduce the platform, and form some initial thoughts on the sprint plan moving forward.
The Approach - Define
User Research Interviews
To understand the current state experience of the platform, we conducted one-to-one discussions with several clients' employees and customers.
I recommended that we should stick to the Rule of Five (NNG, 2021) to best maximise our time x value. We interviewed 5 Delivery Mangers (Client) and 6 Service Providers (Customer).
Whilst interviewing we used Empathy Mapping to help organise, articulate, and highlight what we learnt. As well as trying out a new product otter.ai to help scribe our interviews.
![]()
To understand the current state experience of the platform, we conducted one-to-one discussions with several clients' employees and customers.
I recommended that we should stick to the Rule of Five (NNG, 2021) to best maximise our time x value. We interviewed 5 Delivery Mangers (Client) and 6 Service Providers (Customer).
Whilst interviewing we used Empathy Mapping to help organise, articulate, and highlight what we learnt. As well as trying out a new product otter.ai to help scribe our interviews.
Research Synthesis
Next, we Affinity Mapped on Miro to synthesize the user discussions, arriving at high-level research themes that would help inform our user mindsets and design recommendations.
![]()
Next, we Affinity Mapped on Miro to synthesize the user discussions, arriving at high-level research themes that would help inform our user mindsets and design recommendations.
User Mindsets
When interviewing we also noticed that our participants had common traits and actions that stood out. To better capture and understand these nuanced behaviours, we created User Mindsets to represent each target user.
![]()
![]()
Process Mapping
Additionally, Process Mapping was used to help understand the current wholesale delivery process. Laying the foundations for the customer journey map to understand where/when pain-points occur, and to clarify the process of internal tools usage.
![]()
When interviewing we also noticed that our participants had common traits and actions that stood out. To better capture and understand these nuanced behaviours, we created User Mindsets to represent each target user.
Process Mapping
Additionally, Process Mapping was used to help understand the current wholesale delivery process. Laying the foundations for the customer journey map to understand where/when pain-points occur, and to clarify the process of internal tools usage.
The Approach - Develop
Customer Journey Framework
We noted that each target user had their own distinguished experience with only some overlap, building off the Process Map, we split the process into two journeys to represent each user. We continued to build the framework on Miro until we got sign-off on the journey from key stakeholders.
![]()
![]()
Designed Customer Journey Maps
The final Journey Map deliverable was created on Figma, it allowed us to uncover not only what our users are experiencing but when. It enabled us to:
We noted that each target user had their own distinguished experience with only some overlap, building off the Process Map, we split the process into two journeys to represent each user. We continued to build the framework on Miro until we got sign-off on the journey from key stakeholders.
Designed Customer Journey Maps
The final Journey Map deliverable was created on Figma, it allowed us to uncover not only what our users are experiencing but when. It enabled us to:
- Contrast two user journeys, Delivery Manager (Client) and Service Provider (Customer).
- Facilitate discussions internally and determine future project scope
- Understand what functions and pages could be proposed solutions to customer problems
JTBD Recommendations + Value vs Effort Chart
After the playback with the client, we created a list of JTBD recommendations for all the key steps and pain-points. We numbered them based on priority which was driven by the amount of user feedback we received from each pain-point.
![]()
A Value x Effort Chart was also created to help visualize recommendations for the client. Being conscious of the project time scope, the client decided to focus on designing high-priority recommendations.
![]()
After the playback with the client, we created a list of JTBD recommendations for all the key steps and pain-points. We numbered them based on priority which was driven by the amount of user feedback we received from each pain-point.
A Value x Effort Chart was also created to help visualize recommendations for the client. Being conscious of the project time scope, the client decided to focus on designing high-priority recommendations.
The Approach - Deliver & Validate
Site Mapping / Information Architecture
Before jumping into the design we used a quasi site map to understand the flow of information, and validate with the client the micro and macro display of content.
![]()
Before jumping into the design we used a quasi site map to understand the flow of information, and validate with the client the micro and macro display of content.
Wireframing / Dashboard UI Design
Following some design direction from the client, we underwent an iterative design process. Creating several designs on Figma from Low to Mid to High fidelity, whilst actively socializing the designs for feedback and content direction.
In the final design, we delivered a dashboard for highly technical users that allowed them to: (JTBD 4-5 Priority)
Following some design direction from the client, we underwent an iterative design process. Creating several designs on Figma from Low to Mid to High fidelity, whilst actively socializing the designs for feedback and content direction.
In the final design, we delivered a dashboard for highly technical users that allowed them to: (JTBD 4-5 Priority)
- View information from a macro and micro lens.
- Visualise order process - Order Transparency
- Filter/Sorting, Suggestions/Marking/Prioritise
- Chat (Two-way communication)
- Obeserve a high-level snapshot of key insights
Design direction from client
Initial wireframe
Mid-fi feedback
Component Guide
After finalising the designs, we created a handover pack containing a Component and Style guide with all the nuts and bolts needed for the Dev team.
After finalising the designs, we created a handover pack containing a Component and Style guide with all the nuts and bolts needed for the Dev team.
Snapshot of the Component Guide
The Results
Impact
In 1.5 months, we delivered an end-to-end overview that helped our client holistically understand their employee's and customer's experience using their platforms. This has uncovered and highlighted many frustrations users faced and created an opportunity for a human-centered design solution.
Reflection
Looking back, I would’ve loved to continue building on the design phase, possibly conducting further User Testing, UX evaluations and A/B testing with final design. Overall it was a technically difficult project, but very rewarding once I could wrap my head around all the fine details.
In 1.5 months, we delivered an end-to-end overview that helped our client holistically understand their employee's and customer's experience using their platforms. This has uncovered and highlighted many frustrations users faced and created an opportunity for a human-centered design solution.
Reflection
Looking back, I would’ve loved to continue building on the design phase, possibly conducting further User Testing, UX evaluations and A/B testing with final design. Overall it was a technically difficult project, but very rewarding once I could wrap my head around all the fine details.
Back to the top ︎︎︎︎
Check out an Insurance Company Case ︎︎︎