Identifying user frustrations and redefining the user flow for a seamless shipping service experience
The Problem
The Goal
The Process
This is our standard process, however, the UX components involved may differ from project to project. It often depends on a variety of factors such as project complexity, research required, business needs and project timeline. Illustrated below are the methodologies we used to find effective solutions to address the current user issues.
- Heuristic Evaluation
- Brand/Business Research
- Stakeholder Interviews
- User Research & Personas
- Pain Points Study
- Information Architecture Planning
- User Flow Mapping
- Wireframes & Prototypes
- High Fidelity Designs
- Usability Testing
- Front-End Development
- UX Guidelines
Stakeholder Workshops
To get a better understanding of the project expectations, challenges and objectives from the business perspective, weI facilitated a 3-hour workshop with the key stakeholders of the project. This UX workshop, consisted of the following activities:Vision Exercise
To align everyone on the overall vision for the projectIdentifying Main Users
To define the users of the portal and their key motivationsRose, Buds, Thorns
To get a deeper understanding of the problems with the current portal, the positive features we can retain, and opportunities for improvement
User Research & Personas
To further understand the users’ needs and behaviours, we conducted comprehensive user research in the form of 1-1 user interviews and task analysis. Using the insights and behaviour patterns collected, we developed two key personas.
Key Findings
-
Confusing Navigation Flow
-
Lack of Clear Call-to-Actions
-
Inability to Track Packages Directly from the Portal
-
Lack of system status/feedback when performing tasks
-
Design found to be plain and unattractive
User Flow Mapping
To find out specifically which interaction points are causing user frustration and confusion, we mapped out the current user flow of the portal. Below are the key areas of the flow we identified and marked as high priority. They needed to be fixed as soon as possible.Incorrect Logic
Checking packages from the dashboard leads users to the “Ready to Ship” page, even though logically they are required to declare packages under the “Action Required” page first.
Missing indicators
When some items are not suitable for shipping. The current portal makes no indication to users which particular package is not suitable.
No clear navigation path
There is no “Back” button on the screen nor any breadcrumbs, confusing users when they need to access previous pages they have visited.
Poor visibility of system status
After the package declaration process, the portal does not display any indication of whether the process has been successful or not. Users are only immediately brought back to the “Action Required” page.
Redefined User Flow
By addressing the broken interaction points from the previously mapped flow, we were able to redefine a more seamless user journey. Mapping out this new user flow was also beneficial in helping us define the screens we would design later on.
Wireframe Ideation
We focused on the Dashboard as the first point of interaction, we created two proposals exploring different information architecture and layouts of key information to be displayed.After presenting these initial drafts to the key stakeholders, we gathered more positive feedback from Wireframe 1. We proceeded to use the selected wireframe to continue the ideation process for the rest of the pages. We also updated the wireframe based on insights collected through internal user testing and stakeholders’ feedback.
Guided Product Tour
A significant addition we made to improve the new portal was the inclusion of a guided product tour through the effective use of tooltips. It is an option presented to users the first time they log in to the portal, and the option remains available on the side navigation should they prefer to use it at a later point.This feature would allow a quick and simple onboarding experience to help for both new and existing users and eliminate potential customer service calls regarding how to use the new portal.
Notification Badge
Notification badges were designed as visual indicators to direct the users’ attention to actionable items or sections within the portal. This will help guide users and let them know where to go, or what critical items to check the moment they log into the portal.
System Feedback
To keep users informed and make them feel in control of the systems, the visibility of system status has to be improved.By adding appropriate system feedback in key areas of the new portal, users are made aware of any errors and can take action to fix them immediately.
Designed to Delight
Beyond the usability of the portal, we wanted to create a memorable and pleasurable experience for the users. The user interface design has been revamped to closely align with the vPost brand personality, enabling stronger brand impact. Illustrations were used selectively and colours and fonts were aligned with their website’s UI Design.
