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 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.
🛑 Problem 1. Lack of purpose
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.
5. Braindump
Before diving into design in Figma, I explore all possibilities to understand the landscape.
After analyzing insights from existing dashboards, I brainstorm through wireframes and sketches. This helps me clarify the structure I need, ensuring a more efficient and intentional design process.
6. Building blocks of widget experience
Then I established the fundamental experience of the widgets and behaviours, sizes that can be adapted to all the widgets across the dashboard. I believe setting these type of constraints in the beginning helps with the cohesion and uniformity of an experience, giving the full confidence to the users by creating mental models.
Even though they inherit different types of information and display different data visualization, I made sure to provide holistic experience by providing a similar structure of widget experience that repeats.
7. Power of design feedback
Even when designing the global widget experience, multiple iterations were needed to ensure each widget was truly valuable to users. Below is an example of the watchlist widget, which evolved through continuous feedback and user surveys.
Final experience
Updates on the new dashboard
After design
BETA LAUNCH
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 impact
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.
Looking back
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.
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.