Active trip console

Year
Active trip console

Overview

Helping Hands Community (HHC) is a platform that bridges the gap between people in need, food banks, ride-share companies, and volunteers. One of the many complexities includes how to solve and remove delivery errors. I re-designed the admin tool to test streamlining the process.

Helping Hands Community banner

Background

During the heart of the pandemic, I joined a non-profit startup. Helping Hands Community was started in March 2020 in response to the COVID-19 pandemic by a group of volunteers united by a shared purpose: to provide universal access to food through better technology. I volunteered as a UX Designer, optimizing the enterprise, partner, and customer-facing experiences. 

Helping Hands Community Team

Understand the problem

Error audit

I worked with the engineers and admins to audit the types of error codes, their meanings, and how admins approach solutions. I mapped out the process diagram to paint a picture of the flows and experience connections; admins on the enterprise and partner console, along with the volunteer, uber, and Lyft driver flows. 

Diagram showing a holistic view of user flows through HCC's applications

User research

I virtually observed admins during live delivery events to understand their needs, behaviors, and context when juggling communicating with the partners, tracking deliveries, and fixing errors. 

Observing admins during active trips

Analysis

I observed that uncovering system errors involved a complex process of eliminating issues. Each admin approached the work differently, applying their coding system to identify the mistakes and connect them to the recipient. The admins would have to download the data, search for an error code and dig through a debugging codebase to find details on the issue. 

View into debugging a delivery error

Abstract laddering

I used abstract laddering to broaden and narrow the opportunity statements based on the problems uncovered in the research. I matched the problems and possible solutions to sections on the process diagram to keep track of the initiatives and their impact on each other. 

Abstract laddering exercise

Prioritization mapping

Taking the opportunity statements, I worked with the product team; we used a prioritization matrix to narrow our focus to what might have the highest returns. I focused on how we might streamline running active delivery events. 

Prioritization map into phases

Defining the problem

We prioritized four areas that could help streamline the active trips.

  1. Vague error statuses
  2. Manual resolutions
  3. Inaccurate tracking stats
  4. Poor mobile experience for users on the go
Focused problem

Design the solution

Decipher the error status

HHC’s platform messaging defaulted on ambiguous system messaging that wasn’t in natural language. The application had to integrate with Uber and Lyft with unique and overlapping codes. I unified the codes and worked with a copywriter to create a clear messages and resolutions database. 

Consolidated status types

Provide an explicit action

During active trips, admins had to manually address each error by downloading CSVs, changing information, re-uploading CSVs, and, worse, manually debugging the code. After gathering all the possible errors and how users can solve them, I was able to identify the mistakes that users could solve by resubmitting within the dashboard. 

View into a user switching between the console and CSV
Left is old design and the right is the new mobile friendly design with in page re-submit option

Surface accurate delivery tracking statues

In the current setup, some of the numbers incorrectly reflect the status of deliveries, and others aren’t valuable. Since users running the event focus on solving delivery issues, I simplified the experience by moving successful deliveries from the active trip view, such as “completed’ numbers, which weren’t valuable, and “total.” which had no use.

Left is old design and the right is the new mobile friendly design with new messaging, filters, and actions

Validating the solution

Prototype

I created a prototype for the language and data tracking and shared it with admins to gather feedback to iterate on the experience. Based on the initial data, I tested focusing the dashboard data on requests, recipients, and drivers’ perspectives.

I went through a series of iterations based on the admin insights tweaking the data based on newly learned requirements; like learning, admins might be managing two events at different locations.

In terms of "what requires my attention?" the completed number doesn't matter so much, but my assumption is that at some point they will want to know how close they are to being done and this will be an easy number to work with. We can check with ops on their needs here too - Product Manager
Mapping the data based on different perspectives
Sketches and iterations of the dashboard

Development

I worked closely with developers to communicate the errors that users could correct on the page to streamline fixing errors. Eventually, we planned to automate these fixes to remove the need for admin intervention. The dashboard and nomenclature enhancements required more testing before implementation and were in the backlog queue.

Final

In the final design:

  1. Made the status clear
  2. Enabled fixes in the application
  3. Simplified and removed unnecessary data
  4. Created a mobile-optimized experience

Results and takeaways

The work propelled the effort into improving the active trip experiences for admins, partners, and volunteers. When implemented, it will remove complexity, minimize issues and increase deliveries. This solution is one of the initial steps to making the application more self-service, so we can scale operations and enable our food bank partners to run their trips.

HHC's objectives and key results definitions
Fall OKR's and how this initiative aligned with #ReliabilityAndReach

This doesn't have to be the end

Connect on LinkedIn