Driver App
Helping drivers in staying focused
About
Timeline: 3 months
My Roles: Design Ops, UX research, Interaction and Visual design
Worked with: Product manager, Software developers
Tools: Framer, Netlify
Background
The delivery operations team faces a challenge with ETA predictability. Routing system creates a priority list that drivers should follow. But drivers can choose their own route. To EatStreet, this is causing bad deliveries which is leading to making less money per order.
Problem
When drivers pick and choose their own route it causes delays and ETA fluctuations and leads to upset customers where EatStreet loses money
Challenge
How to maintain the driver flexibility of choosing their orders priority while making sure customers are happy and EatStreet does not lose money
Solution Statement
Create an app experience that restricts drivers from picking their routes, and enforces the routing recommended by the system
Objectives
Remove the drivers ability to go out of order, and force them follow the routing system directions
Reduce the number of tasks a driver can see in the app
Improve the app visual hierarchy and information architecture
Approach
Knowledge gathering and research
To understand the current driver workflow I talked to dispatchers, operations, and developers
I shadowed drivers to observe their experience. I took note of information architecture and visual hierarchy issues in the app
I created a journey map detailing the drivers daily experience and shared it with the team
App Analysis
- Tasks are within two tabs: pickup and drop-off. If a driver is in the pickup tab, they can miss drop-off tasks
- The user interface is busy with many options, which makes it hard to decide
- The user interface is not consistent and has a broad usage of colors
- The color contrast is not accessible
Information Architecture Analysis
I used the OOUX approach to break down the app. The approach helped me in analyzing the information structure of the UI. It also helped me with team alignment, as I used it to collaborate with developers and other stakeholders.
Sketching & Testing
I started sketching while in the knowledge gathering stage
I iterated on wire-frames and gathered feedback from several stakeholders
I created interactive prototype and tested it with drivers to capture feedback
I refined the prototypes based on feedback and moved to building deliverables
![](https://framerusercontent.com/images/XcjAGZ8YC1GxA7dxnDkEMgeDqk4.png?scale-down-to=512)
![](https://framerusercontent.com/images/gcI4tAeRFdszOSEgTtwBCC4X5Bg.jpg?scale-down-to=512)
![](https://framerusercontent.com/images/0ejod1n7RpO2jNoLFYcIy4Vgg10.png?scale-down-to=512)
![](https://framerusercontent.com/images/IC1ZQ3vBjBbWmF4bQ2NUgSWFcI.png?scale-down-to=512)
![](https://framerusercontent.com/images/bSYAbwZ6DAOz0IwzLyF8x8Zgh4.png?scale-down-to=512)
![](https://framerusercontent.com/images/J4aHKsAlSCjIRzqh6mospYS6u4.png?scale-down-to=512)
Deliverables
I created a design system consisting of all components used in the UI
I gradually designed the main screens: Tasks, pickup and drop-off screens
I defined the user-flows as I was designing the UI
Part of the design system