DeliverSmart
A mobile app that helps gig workers better understand their work performance
Outline
Project Overview
For the final project of my UC Davis UI/UX Design class, I designed a mobile app that helps gig workers at companies like Doordash and Uber Eats better understand their earnings and costs. As a gig worker myself who drives for multiple companies, I had a clear vision for how an app could unify important data such as earnings and mileage into one interactive dashboard.
Problem Statement
Gig apps like Doordash, Uber Eats and Instacart offer appealing perks like working flexible hours and being your own boss. However, gig workers who drive for multiple apps face a clear problem: calculating earnings across apps is a tedious, manual process. When accounting for personal expenses like gas and repairs, it gets even more difficult to determine net income from gig work.
User Research
For my research, I conducted five user interviews with full-time gig workers, created user personas, and read online anecdotal reviews about gig workers’ experiences with various gig apps. Overall, I found that users saw many shortcomings among these apps, some of which were related to a lack of earnings analytics. Other concerns were about bugs/glitches, low earnings, difficult pickups at certain restaurants, and more.
Something that stood out to me was when one of my interviewees mentioned that he often had very slow or even completely dead hours/days, making him wish he could figure out what his highest performing hours/days are. He also mentioned that he often finds himself having to use the Calculator app on his iPhone to find out how much he made per hour in a night and to get a sense of how he had performed compared to other nights.
My research uncovered two major pain points:
- There’s no way to view total mileage driven on any major gig app for tax purposes
- Certain hours and days are very slow in terms of receiving orders
Low-fidelity Wireframes
I began my design process by creating a skeleton of the application’s main pages to establish their layouts. During my research, users indicated that Earnings Per Hour would be one of the most important features for them in my app, so I made it the most prominent element on the Analytics page. Similarly, I made Total Miles Driven the most prominent element on the Mileage page.
High-fidelity Wireframes
For the high-fidelity prototypes, my main focus was maintaining a consistent visual design across the entire app. Because I wasn’t working with any premade design system or library (other than iconography), this was challenging when visualizing different types of information such as earnings analytics vs. mileage.
I chose to use a dark theme because it’s easy on the eyes and appeals more to the average user. According to a survey conducted by Android Authority, 81.9% of respondents said they use dark mode in apps whenever it’s available.
Analytics
The Analytics page visualizes data in a column chart. The main objective is to compare earnings between different days and hours to pinpoint optimal times to drive. The default timeframe for viewing earnings on this page is weekly because drivers get paid weekly. To give the user maximum insight into their performance, each bar in the bar chart is selectable and allows the user to see exact earnings for a particular day or hour.
The “Estimated Expenses” value near the bottom of the screen represents an estimate of gas and wear-and tear costs. This estimate is based on the car model information and ZIP code entered during the onboarding process.
Trips
DeliverSmart imports mileage data from whichever delivery apps the user links, whether that’s Doordash, Uber Eats or both. Neither the Doordash app nor the Uber Eats app shows all of a driver’s mileage data in one place, so this is one of the advantages of the Trips screen in DeliverSmart. This data can be particularly useful for understanding how much of a driver’s mileage is business-related so that it can be written off for tax purposes.
Prototyping
The next step was building an interactive prototype using Figma’s prototyping tool. This allowed me to conduct usability testing with my pool of test users. Try it out yourself here!
User Testing
Upon finishing the high-fidelity prototype of my app, I tested it with my target audience: three gig workers driving for Doordash and Uber Eats. I had them complete two tasks:
- Completing the onboarding process (logging into Doordash and/or Uber Eats, inputting vehicle details).
- In the weekly view (1W) on the Analytics page, view exactly how much you made on 5/13. Then, change to monthly view (1M) and view exactly how much you made on 5/4.
From observing their behavior during these tasks and hearing their thoughts after, my key findings were that users would like:
- a better understanding of the DeliverSmart’s purpose/goal
- more responsive buttons
To address these issues for the final prototype, I added a few points describing the app’s purpose to give the user more context, and increased the padding of most buttons. After retesting the app with my users, the issues were no longer a concern and they were satisfied with the overall experience of DeliverSmart.
Takeaways
DeliverSmart was my first time working on a mobile app, and also my first time conducting user testing which gave me highly valuable insight into the most important aspect of designing a user experience: understanding how users interact with your product. Having switched from Adobe XD to Figma shortly before this project, it gave me lots of time to get familiar with the design software and its variety of features.
