Transforming and enhancing the widget experience for a shipment visibility product, resulting in a 126% increase in average user engagement, helping users stay up to date with relevant shipments, and make informed decisions.
Dashboard 2.0
OVERVIEW
Lead UX/UI Designer - Ideation Workshop, Concept Car, Research, Wireframe, High fidelity design, Prepare assets, Dev Handoff, Post launch user interview
Collaborated with 1 Product Manager and 5 Engineers.
TIMELINE & STATUS
4 months, Launched in June 2023
IMPACT
Delivered 20+ widgets that help users customize the dashboard based on their everyday task.
Got positive feedback from beta user interview.
Increased user engagement 126% post launch.
Shippabo Dashboard 2.0 serves as a central hub, allowing users to curate real-time supply chain data into comprehensive views.
Alongside shipment details, diverse filtered widgets offer insights such as industry news, local time zones, message threads, and more. These elements blend shipment specifics with global and social insights, providing users with engaging, multi-layered information beyond mere data reception.
MY ROLE
PREVIOUS DASHBOARD
Why did we start this project?
Our dashboard was designed to be a key differentiator in a logistic industry, offering shipment predictions and data-driven insights. However, user metrics showed that most users spent only two minutes on it before skipping straight to search for a specific container.
This revealed a gap - the dashboard wasn’t providing enough value or encouraging deeper exploration. These insights led us to revamp the experience, making it more purposeful and engaging for users.
💵 Business goal 💵
We also ensured alignment between user and business goals. Our focus was on increasing engagement and retention while uncovering user patterns and creating upselling opportunities.
Sneak peek
ENHANCED FILTER EXPERIENCE
Dashboard has transformed into a dynamic platform that encourages regular usage and interaction, enhancing connectivity to the users daily work.
Users now have greater control over customization and content interpretation to make informed decisions.
LOCALIZED INTERACTIVE WIDGETS
Design highlights
MATCHING REAL WORLD
The map widget provides a comprehensive view of the tracked shipments.
Users can monitor the progress while also keeping an eye on shipments with delays.
CUSTOM VIEWS
The Recent Activities & Messages widget consolidates shipment updates and communication.
In different shipment pages, there are often multiple activities and communications taking place with their logistic partners. Users can conveniently access and digest the most recent updates all at once.
Individual filters simplify the customization of the dashboard to suit different users' needs.
With the same dataset, users can customize the widget's viewing style. Depending on the specific data they want to focus on, they have the flexibility to personalize the visualization of the widget.
The Local News & Timezone widget provides additional context to users' shipments.
Our goal is to provide users with all the relevant shipment information they need right at our dashboard. By browsing local news and understanding timezones, users can stay informed and alerted about potential shipment delays and overseas communication.
FASTER COMMUNICATION
GLOBALIZATION & LOCALIZATION
🛑 Problem 1. Lack of purpose
Problem Space
When onboarding onto the dashboard project, I wasn't provided with the necessary data regarding user behaviors and patterns to identify the issues causing low user engagement within the dashboard. Instead of making assumptions, I decided to conduct a heuristic evaluation to internally audit the experience.
First, existing data visualization in the dashboard didn’t meet the needs of users who require an in-depth view of their shipments. Users already knew what containers they wanted to get more details into so they wanted to know what type of information they needed to pay attention to but our current widgets didn’t show that.
🛑 Problem 2. Overwhelming design
Second, poor hierarchy and excessive colors created a cluttered interface and made the users feel overwhelmed. And this creates a negative first impression of the dashboard whenever they enter Shippabo view, impacting their overall experience of the product.
Path to success
1. Ideation Workshop
With the insights in mind, I chose to brainstorm ideas for the new dashboard. Despite the absence of a requirement document to initiate the process, I decided to move forward. Instead, I proactively began an ideation workshop, utilizing the information provided by the Product Manager. This workshop centered on addressing the identified 'obstacles' and our 'goal' for the redesign.
2. Consolidating highlights
After completing the workshop, I consolidated the sticky notes into 2 overarching themes that I could use as a guidance to start building.
3. Prioritizing widgets
With the overarching theme as a conversation starter, Product Manager and I began by listing all potential widgets that could support users in taking actionable steps. We prioritized them based on where we believed they could make the greatest impact for users.
4. Guiding principles
Then, with our team, we established a guided principles to provide the best user experience possible. When I started designing for the solution, I kept guiding principles close to me to stay on track to the vision.
DESIGN WITH SCALABILITY
We all knew the dashboard project wouldn’t just end with this project. That said, I wanted to build a dashboard and widget environment where future features can integrate seamlessly into a cohesive global experience.
PROVIDE CONTEXTUAL RELEVANCE
To offer informative and actionable widgets, I wanted to make sure each widget provides contextually relevant information that supports users in making decisions.
Concept Car
*What is a concept car?*
It serves as a visual representation of a 'possible solution,' although it is likely to evolve as we progress through ideation and feasibility considerations.
Expanding on the ideation workshop, I utilized the three themes as a basis to develop various versions of the 'concept car' dashboards.
This mockup served as a visual aid during a presentation at the LA Summit, helping stakeholders (CEO, CTO, Product team, and other departments) grasp the potential solutions of the new dashboard.
The outcome of the Concept Car
All stakeholders expressed enthusiasm for the vision and the potential of incorporating communication aspects. Although feasibility was not discussed at this stage, the product manager began finalizing the desired widget list with feasibility in mind, drawing insights from both his research and my concept car design.
Research & Insights
Building on the concept car, the product manager initiated the finalization of the desired widget list.
Consequently, I delved into exploring alternative dashboard experiences for benchmarking. My objective was to research and document specific examples of excellent experiences that could serve as references in shaping the flow of the dashboard.
Design Iteration
Created structured widget templates
After obtaining the widget list, including the relevant graph styles and interaction details from the Product Manager, I started creating a structured template that encompasses various graph styles. This template is designed to be easily adapted for use in other widgets.
Design Feedback
As I ventured into designing various widgets, I sought feedback from fellow designers, focusing on two major concerns:
Ensuring my design is cohesive, flexible, and digestible
Confirming coverage of all edge cases
The outcome of the design iteration
These are a few examples of how my design evolved through multiple iterations and feedback loops. In addition to input from designers, I collaborated with the Internal Operation Team to gain insights into information hierarchy.
This collaborative process empowered me to iterate with confidence as I advanced through the design phase.
Final Design
Updates on the new dashboard
Dev Handoff
Documentation: Global behaviours & Interaction model
When handing off the design to the devs, communication and documentation is important. I have specified flows, interaction and global behaviour rules for the developers to follow. From this document, we were able to clearly communicate the hover state, filter rules and interaction of each widget.
The outcome of the dev handoff meeting
By inviting engineers to participate in some of the design check-in meetings for visibility purposes, everyone was well-informed about the context, and there were no surprises with the design. This facilitated discussions about the priority of widgets, and constant communication ensured smooth preparation for the beta launch.
Beta Launch
Change management
Prior to the official update, we focused on change management. We initiated the process by launching a beta version of the new dashboard, allowing users to seamlessly switch between the new and classic versions using a toggle button.
Successful Beta Interview
A few weeks later, I participated in the beta user feedback session with the product team. During this session, we received positive feedback from users, emphasizing the uniqueness and great power of the widgets. Users appreciated the ability to focus directly on their concerns despite the different roles they had.
The outcome of the beta launch
The overall outcome was a success, and we officially launched and presented Dashboard 2.0 to the entire user base of the platform.
Post Official Launch
With the public release of Dashboard 2.0 on June 26, 2023, our design journey reached a pivotal moment. Leveraging insights from Pendo analytics, we witnessed 224% surge in page views compared to the previous two weeks and this trend has continued in a similar range up to the present (October 2023).
While acknowledging that this data may not be 100% accurate due to factors like onboarding new users, it's noteworthy that the average time spent on the dashboard nearly doubled compared to the previous version, indicating a significant positive impact from the redesign on user engagement.
Measuring Success
Takeaway
Memorable moment
One unforgettable experience was leading ideation sessions, which not only broadened my own design perspective but also opened up new possibilities beyond my initial concepts. Collaborating with a diverse, cross-functional team enriched the process with valuable insights from experts in various fields.
An additional source of pride came when I learned that my ideation workshop methods had a ripple effect. Marketing team adopted these methods for their own projects and they loved it! It brings me joy to share design techniques, making design accessible to everyone and fostering a creative culture.
What I learned about myself
In creating over 20 unique widget experiences, maintaining their cohesiveness presented a significant challenge. Establishing global behaviours that harmonized the entire user experience was a crucial step toward achieving a seamless dashboard interface.
Despite the initial challenge of building numerous widgets, I discovered a passion for establishing frameworks and creating building blocks. By constructing multiple components, I developed a versatile reference library that allowed me to design with both constraints and flexibility in mind, turning what seemed overwhelming into an enjoyable and structured process.
If I could go back
The journey of redesigning my original dashboard was an enjoyable challenge, as any designer will attest that design iterations are perpetual, always evolving toward better solutions. While Dashboard 2.0 marks a successful milestone, I recognize the continuous potential for improvement.
If I could revisit certain decisions, I would delve deeper into researching different widget types, optimizing data visualizations for specific data scenarios, and enhancing inclusive design through improved color contrast and accessible font choices.
Work Highlights
Dashboard 2.0
Data Visualization, UX/UI Focused
Mohae
Product Focused
Help Center
UX/UI Focused
Design Ops
Operation Focused