top of page

Tote Dashboard

Shifting gears from e-commerce, this project was my dive into the operations and logistics world. It's all about giving distribution centers the lowdown on different areas. Packed with loads of data points, this dashboard was built for our team members and supervisors, making their lives easier and the whole operation run smoother.

​

*Note: data points have been altered for non-disclosure purposes.

Role: UX Designer

Tools: Figma, Field Study

designt_empathy.png

Empathize

New Processes, New Opportunities

The distribution center recently introduced SureSort, an optimize item sorting and handling system, which revolutionized their workflow. SureSort's addition prompted the creation of this application to address the needs and challenges that surfaced with its implementation.

​

From order initiation to meticulous packing and delivery, my goal was not only to understand their processes but also to pinpoint where this application could seamlessly integrate into their daily routine.

Methodology

To truly connect with users, I put on my safety goggles and ear plugs to spend a day at the distribution center. Engaging in candid conversations with team members and supervisors, I delved into the nitty-gritty of their daily operations.

Common Themes

  • Users relied on different Excel spreadsheets at a time to parse and synthesize information.

  • Users wanted visibility in other areas of the complex to gauge their workflow.

  • Users wished for real-time updates at a glance as opposed to multiple file downloads a day.

Problem Statement

Team members and supervisors want visibility to progress throughout the distribution center to alleviate friction and troubleshoot errors.

designt_define.png

Stakeholder Suggestion

  • Their daily use of Excel spreadsheets influenced their initial design suggestion.

  • Tables connect within tables using clicks and hovers to access detailed information.

PHASE 1.png

Brainstorm Time!

designt_ideate.png

Design Exploration

Over and Over Again

  • After assessing the potential user flow, I realized each screen contained similar or the same information.

  • The concept (at this point) was a big circle of information. 

To clarify

  • Tote: a box which holds product for one (1) shipment

  • 1A (and so on): A machine with many totes on either side

  • Ship mode: Shipping hub for trucks

  • Status: a code which describes the state of a given tote at the time

low-fi-flow-ID.png

PROBLEM FRAMING

How might we?

How might we  ______  ______________ ?

[verb]

[issue]

  • How might we understand what information is critical?

  • How might we allow users to access granular data?

  • How might we indicate when a data point is alarming?

First Iteration

After the user flows, the first iteration was born! It included an overview screen and navigational tabs to dig deeper. ​

v1.png

Overview (Default Display)

  • Acted as a dashboard for high-level information.

  • Showcases the relationship between the Pods and Statuses upfront.

  • 'Ship Modes' section to highlight the completed totes.

Statuses & Pods

  • Allowed user to exclusively see and sort information via Pod and Status.

  • Provided the most granular detail of a given tote.

Why didn't it work?

  • Where did the tab navigation via Pod come from? 

  • What are the statues? What if there was zero?

  • Why were there so many number indicators? What did they mean?

TABS.png
SHIP MODES.png

Active Ship Modes

  • Organized information based on the shipping hub which it would be sent to.

  • It would only show ship modes needed for the day.

Why didn't it work?

  • Copy and paste of information from other screens.

  • Number indicator was slightly clearer, but was it necessary?

  • How is this screen relevant to the rest of the information?

What Changed?

Upon discussion among the UX team and internal stakeholders, the information was extremely repetitive. The interface was messy and data points were the same, but placed in different spots. Why repeat information?

Statuses & Pods to All Totes

  • Filter and sort functionality integrated into the interface,.

  • Users could check a combination of filters to hone their search

  • Consolidated information into an 'All Totes' tab

Chart of Statuses

Fine-tuning

At this point, the interface was in a good spot with small tweaks here and there. The core of the application, now, encompassed a robust filter and sort system.

Just a Couple Questions

  • What if the user wanted to search instead of checking every box?

  • What were the technical constraints?

  • How many entries can show at a time?

  • How can the user sort?

FILTERS.png
designt_implement.png

Implement

Ta Da!

The final product included a greatly simplified the overview screen and filter-able entries. Overall, the application conveys the information stakeholders deemed necessary to make informed decisions around the warehouse.

IMPLEMENT-1.png
Information Distribution.png
filter.png
shipment.png

Outcome

So, What's Happened Since?

Since its release, I strolled through the distribution center once again, eager to observe how they use the application. Team members and supervisors expressed excitement and daily use of the application.

 

The application shortened what used to be long nights at the distribution center. It also increased efficiency by 30% since members were able to keep track of progress in real time.

Here's What They Had to Say

"This has been so great, being able to look at it and know the progress of the entire complex."

​

"We use it everyday to help us monitor production."

​

"It's awesome! If I notice trouble, I can just tap to see more information and understand what's wrong."

bottom of page