Transparent Path is a Seattle-based company that combines IoT sensors with Blockchain technology to help track location, temperature, and humidity of specific shipments. We worked with Transparent Path to build a shipments dashboard to help chocolatiers track their shipments and be notified of issues such as melting or delays.
Client Project with Transparent Path
Duration: 3 Weeks
& Information Architect
UX Research Lead
Here's an example of one of the work flows for our solution. One of the user's shipments shows a temperature excursion notification. This follows the steps taken to correct an error in the temperature and humidity settings. The following sections show how my team and I came up with this solution.
Our team had very little knowledge and experience of the chocolate supply chain, so the first few days were spent doing research to understand everything that goes into making and distributing chocolate. Below is a list of the steps involved from the farm to the retail stores. While our solution will focus on the last four steps (from manufacturing the chocolate to retail stores), it is important to understand the whole process.
With a combination of research and remote interviews with chocolatiers, we were able to get an idea of what Chocolatiers value and need. Our teammate Harris was able to build a persona based on interviews with people in the chocolate industry and chocolate supply chain. This, along with industry research and insight from the Transparent Path team is how the decisions for the design began.
The chocolate industry reaches almost every part of the world, but is still a relatively close-knit community. Because of this, the relationships between different companies is very important, and trade and communication is a key part of those relationships.
A brand is only as good as it's reputation, and being accountable for providing high-quality products on time positively improves a brand's reputation.
Here is a visualization of the journey of Mario, our chocolatier persona from when he receives ingredients, to manufacturing, to when his product arrives in retail stores.
As the visual designer, I led the design for wireframes to be used for user testing. We focused on medium fidelity wireframes with simple graphics and very minimal color. This allowed us to be able to test certain features without giving the impression of full functionality.
The biggest challenge was to be able to show all the necessary data in a limited amount of space. A shipments dashboard like this involves a lot of data, including location, ETA, type of product being shipped, the lot number of the shipment, who is currently handling the shipment, and if there are any issues with temperature, time, or humidity. Usually there are multiple shipments going all over the country, sometimes internationally. To tackle this challenge, we had to prioritize what data is most important, where to show it, and how to display it in a readable and scannable way.
This is the initial wireframe for the shipments list page. After discussions with the team members about the user interviews and industry research, we were able to create a visual representation of what the basic layout should include,
These are some of the issues after discussion. The top nav needs some improvement, the shipments list needs to be more intuitive and scannable, search and filter are confusing for users and will need to be assessed. More on the changes in the next section.
As with any design project, it’s an iterative process. We talked with other UX design experts about some of the issues that users might have with the design, and got valuable feedback from user experience experts to improve upon the original wireframes. Below are some of the changes that were made.
Too Wide: Half the usable space was taken up by the shipments list.
Confusing Search: Users would get confused by the two search boxes, didn't know what "category" meant.
Difficult to Scan List: The data was in columns, but was interrupted by items like the title and progress bar, making it difficult to visually scan the information.
Sort Feature: Confusing and not apparent sort bar for the shipments list.
Minimize screen space: Reduced the width by 1/3. Prioritized information, moved some of that info to details page.
Improved search bar: Simplified Search to one field, replaced button with familiar icon.
Moved progress bar: The progress bar was moved to the details panel.
Sort Feature: Sort bar was changed to something more familiar to users with button shapes as a signifier, Sortable filters for the left button and an alerts toggle for the right.
Search Bar Too Subtle: Users are likely to pass over it or assume it doesn't apply to the whole dashboard.
Notifications and Settings Placement: They are not on the right side where users would expect them
No Logo: Doesn't enforce the company's identity, users won't know what "Project Rainier" is without context.
Emphasized the Search bar: Some users will need to search for specific items, especially if they are new to the dashboard.
Removed Name and Title from Profile: Users like Mario know who they are, so a simple photo is enough of an indication of who is currently logged in.
Added Transparent Path Logo: Improves brand awareness and acts as a home button
Categories Need Improvement: Most important info should be at the top, no need to search for it.
Too Tall: The details take up too much vertical space, Collapsible rows could help.
Limited Actionable Items: What does Mario do when there's an issue? Who can he contact?
Better Categorized Info: Mario can easily see the pertinent details about his shipment right at the top.
Expandable Sections: Allows users to dig deeper into sections if necessary while minimizing space.
Improved Alerts: Iconography added to address the type and severity of an issue.
Contact Custodian: Added the ability to contact the person or company currently handling the shipment.
Since the quarantine prevented any in-person testing, all of our tests were done remotely. Our teammate John was able to perform three 40-minute usability tests which asked the users to do the following:
The biggest pain points for our users were:
Our testers commented that when they clicked on the "Contact Custodian" button, they weren't sure who they were getting in touch with. The way they approach the trucking office might be different than talking with the actual driver. To fix this, we changed the title to include the specific point of contact.
When our testers followed the third item on our test list, they were not sure if the changes made in the Shipment Details section were actually saved. Many commented that some kind of confirmation is desired. In response, we added the green change confirmation bubble at the top of the dashboard.
Although the term "Excursion Settings" was fairly well known within Transparent Path, some of our testers were confused by this terminology. To solve this, we made it more specific, renaming it to "Temp & Humidity Settings".
Originally the temperature and humidity settings for shipments were controlled by text boxes for max temperature, warning high temperature warning low temperature, and minimum temperature, Although our testers understood it, it took a while to really grasp what we were asking for. I created this thermometer-based slider to create a better mental model for our users and allow for another method of setting values.It will take up a little more screen space, but it's worth it to make things simpler for the user.
Usability testing, design discussions, and walkthroughs of the prototype with the team led to big improvements to the dashboard. Compared to the first iteration, the shipments are easier to scan through, the information is more organized, and the visual elements allow users to better assess issues and manage their products on their way to stores or wherever the final destinations might be.
In order for people to start using the product, we needed to create a way for them to set up a shipment. Our goal was to make the setup as easy as possible to complete while collecting all the necessary information. The challenge was first to understand what information Transparent Path needs to track the shipment, and to ask for that info in an easy to follow way.
We split the details into 5 different steps; Shipment Details, Custodians, Items, Sensors & Gateways, and Shipment Overview. The progress bar at the top shows where the user is in the process, with the ability to cancel or go back at any time. We realize that errors happen, so the Shipment Overview is there for people to check the details before adding a shipment to the system.
The form was split into different steps, with overlays for each step, in order not to overwhelm the users and give them a reference point to where they are in the process. Below is an example of how it works.
Since this dashboard is such a complex product with many moving parts, it is important to perform 5-8 more usability tests to make sure everything works how it should and to prevent errors. We want to make this tool as easy as possible to use, and make it intuitive to allow people to use it without complicated onboarding process,
While we created the shipments page, additional pages of the dashboard are still required for a minimum viable product, including Items, Custodies, and any of the other pages in the left navigation.
While high fidelity mockups are not exactly necessary for prototyping, we will want high fidelity mockups of any unique screens to show how Transparent Path’s branding will look on our solution, to test colors for contrast and readability, and to give an idea of what the finished product would look like.
We had responsiveness in mind for our solution, making the transition to mobile less of a challenge. Each panel on the desktop dashboard corresponds to one screen as seen below with the Shipments List and Details. This will allow users to access the product from anywhere, see notifications and call and message right from their device.
Mobile does have a limited screen size, so fitting all the data and making it readable will be challenging, as will accounting for different interactions and methods of data entry.