Transparent Path’s Shipment Dashboard

Project Overview

The prototype I created for chocolatiers to track shipment status

Synopsis:

What: Our team of 3 had 3 weeks to design the first version of Transparent Path’s dashboard for tracking food shipments.

Business Problem:

What: Allow chocolatiers a way to track and see the temperature and humidity status of their chocolate shipments.

Why: Chocolate melts if it gets too hot and can get sugarbloom (unappealing chocolate textures) if it is exposed to too much humidity. Chocolatiers and other food supply chain users want to ensure their shipments arrive unaffected to their destination.

Roles:

My Role: Lead UX Researcher

Purpose:

  • Identify the feelings, moods, expectations, and pain points for different users along the chocolate supply chain.

  • Provide design insights for our designers to build a user friendly mockup for this shipment tracking software.

Other Members:

Jordan Kulhawik: Lead Visual Designer
Harris McNeil: Project Manager & Information Architect

I led the research, interviews, analysis, and usability testing phases of the project.

I led the research, interviews, analysis, and usability testing phases of the project.

Process:

What: Used the agile approach to design a Figma prototype that allows supply chain users to track shipments and resolve shipments with warnings or risks.

Why: To provide frequent feedback to create effective designs that address the root problems of the customer.

Top methods used:

  • Design Studio

  • Wireframes

  • Prototyping

  • User Journeys

  • Concept Maps

  • Personas

  • Interviews

  • Usability Testing

  • System Usability Scores

  • Competitive Analysis

  • User Flows

  • Affinity Mapping

Hypothesis:

What: Chocolatiers don’t have a way to know if their chocolate shipment arrives to their destination without melting or spoiling.

Why: Chocolatiers currently send off their shipment and can only see if their shipment has arrived to the destination, not the status of the shipment. There is brand image risk involved if something happens to the shipment along the route to the destination.

Solution:

What: Using trackers attached to shipment containers to track humidity and temperature, a dashboard that shows these shipment statuses allow the chocolatier to take action before a damaged product arrives to its destination.

Why: This allows chocolatiers to stop or investigate potential damaged products before it reaches the destination. This protects the brand image of the chocolatier and mitigates risk of recall costs.

Concept map for the chocolate supply chain

Research

Interviews:

What: I created the user research plan to focus on:

  1. User expectations

    • What did chocolatiers expect to see when tracking their chocolate shipments.

  2. Moods & feelings

    • What frustrated and delighted chocolatiers when shipping and receiving their chocolate supplies.

  3. Walkthrough of receiving and sending chocolate supply shipments

    • Understanding inefficiencies and painpoints in the chocolate supply chain.

Why: To provide insight on:

  • Chocolatier’s true painpoints

  • Opportunities for improvement

Due to the coronavirus situation during this time, all interviews with chocolatiers were remote and methods such as contextual inquiry at a chocolate factory were not feasible.

Remote interviews with chocolatiers and food supply chain experts

Remote interviews with chocolatiers and food supply chain experts

Defining the Problem & Solution

Understanding the User’s values and User Journey:

What: By mapping out the user flow and our users values, our team could understand the user journey for a chocolatier.

Why: This allows us to understand our user and identify what are the areas of improvement our solution can assist with to make our user’s life that much better.

The chocolatier’s user journey

Chocolatier’s user flow for tracking shipments

Our target persona was Mario Chessa:

  • Chocolatier - Processes and makes fine chocolates

  • Concerned on upholding a reliable brand image

  • Wants to solve shipment issues before they are too late and cost him a lot of money

User Problem: 

Mario’s issue:

  • Currently has no way of tracking shipments once they get sent off.

  • Faced a previous upset customer since the chocolate shipment melted before arrival, costing thousands of dollars.

Solution: 

Transparent Path’s shipment tracker:

  • Allows chocolatiers to know which shipments are late, at risk of melting, or have any other early warnings.

  • Allow chocolatiers to contact truckers to check and resolve shipment risks.

Some interesting insights & findings:

I wanted to ensure that our insights allowed our client to know:

  1. What findings reinforced functions they already were planning to include in the product

  2. What additional user needs were not yet met in the product

 

Example of some insights learned during user research.

 

Visual Design

Design Studio

My team conducted 5 minute design studio exercises to sketch potential design layouts based on:

Example of a mid fidelity mockup created

  • Our understanding of the problem

  • Inspiration from competitor research

Sketches:

Using our design studio, we identified:

  • The key themes & functions to incorporate into our design

Wireframes:

Using our sketches and user flows, our team created wireframes:

  • To show how our users interact with our system

Mockup/Prototype:

Our team created mockups and I created a prototype for usability testing.

Our goal:

  • Incorporate a lot of shipping details needed by users in an organized and easy to understand format

  • User friendly design without needing to teach users how to use the software

Usability Testing & Iterations

Prototype used for usability testing

Usability Testing:

I created our usability test plan that outlined:

  • What our purpose was

  • What user tasks we wanted to test

  • How we wanted to approach the usability test

Using the prototype I created, I could:

  1. Begin testing with users

  2. Give our team design insights on what to change for each iteration and why.

Iterations:

Using the insights from usability testing, I could recommend to my team what design improvements we could make to enhance the chocolatier’s experience.

Iteration 2:

  • Excursion and warning settings

    • Users found the old design hard to read & text heavy. This caused confusion on the difference between Max temp and max temp warning.

    • The thermometer affordance showed the difference between warnings and max temps.

Iteration 1:

  • Route visualization

    • Users found the old design hard to identify what warnings were present on the shipment

    • Users had difficulty identifying where the shipment was currently located.

Route visualization iteration

Warning settings iteration

Iteration 3:

  • Save successful confirmation

    • The old design did not include a way for users to know if a save went through

    • Having a confirmation allowed the user to receive feedback that the save action worked.

 
 

Iteration 4:

  • Export Data icon

    • Different users used different screen sizes

    • Some screens were too small where users mistook the old export data icon as a show further details icon

 
Export data icon iteration
 

Final Prototype & Next Steps

Final Prototype:

Going through our iterations provided our team with our final prototype design for tracking shipment status on Transparent Path’s upcoming product.

System Usability Scores:

Usability Scores from SUS surveys.

To compare how much we improve our design on each iteration,

I conducted:

  • System Usability Score surveys with interviewees and chocolatiers

    • Based on initial impressions of the design.

Our system usability score (SUS) was 78.33 or a B+

The usability score we got showed us that:

  • We removed any issues where a user could get stuck in our usability tests

  • Our design had a continuous flow for the usability tasks.

  • Showed our team was on the right track to a user friendly design.

Next Steps:

As my team and I were given the opportunity to carry out more designs for Transparent Path, we plan to work on the following for next steps:

  • Conduct further usability tests

    • In order to:

      • Get more quantitative data points

      • Identify more potential user pain points that can be addressed.

  • Develop high fidelity mockups

    • This will provide additional design requirements for engineers including color

 

An example of a high fidelity mockup that includes color

 

  • Conduct further research on specific functionality

    • For example, we learned from a chocolatier that the recall scenario involves a lot more information that needs to be included on our dashboard due to the severity of the situation.

      • We would like to conduct further research on what information is needed by users for a recall scenario.

  • Develop further pages for the dashboard

    • Example: Custody page, Items page, Certifications page, etc

      • This will flesh out the software for our users needs

  • Develop mobile mockups

    • Our team wanted to ensure our design was mobile friendly

    • We want to provide mobile mockups for when Transparent Path wants to shift from being desktop exclusive to a mobile platform for supply chain users on the ground with ipads and smartphones

 

An example of what the mobile mockup may look like