Project

Driver App redesign

CLIENT

Dropoff

Deliverable

Native iOS and Android mobile apps

ROLE

UX/UI Designer

COLLABORATORS

CEO
VP of Product
Engineers
Operations
Drivers

TOOLS

Sketch
Adobe Illustrator CC
Adobe Photoshop CC
InVision

CHALLENGES

• The mobile app had not been updated since the company’s inception four years ago. 

• No UX / UI designer before me to help make app easier to use or read while driving.

• Drivers constantly having to call dispatch team due to accidental swipes on orders, reducing overall efficiency.

• iOS and Android mobile apps were different experiences, which led to some confusion if a user switched to the other platform. 

GOALS

• Redesign/overhaul entire app from the ground up while retaining all key features and staying in-line with current branding and styles. 

• Prioritize driver safety by encouraging more of an “at-a-glance” behavior so that attention can be focused on the road rather than their mobile device.

• Make app more intuitive to use, which means shorter training/onboarding and less likely to make accidental actions. 

• Create a flexible framework that can house upcoming new features. 

• Match both iOS and Android experiences while also optimizing for the latest devices. 

PROCESS

Research
Go on a few ride-alongs with drivers that are making actual deliveries to see how app is used and to get initial feedback and pain points.

Hands-On Research
Explore test app in order to get a feel for flows and features that need to be re-translated and improved.

Discuss
Meet with product manager and mobile devs to review timelines, road map and overall goals.

Design
Using Sketch, create initial mockups of main screens. Review with product manager. Note: Time did not allow for wireframing.

Refine
Create full workflows of common actions. Meet with Ops team to ensure designs line up with driver and dispatcher needs.

Prototype
Using InVision, create click‑through prototypes to show transitions and flows. Send to managers for review and feedback.

Handoff
Present to executive team. Upon approval, output/ create assets for a smooth handoff to the mobile devs. 

Spot Check
Check in with mobile devs for status updates during implementation to ensure design guidelines are being adhered to.

Internal Testing
Work with QA team to review latest build, notating any game-breaking bugs or corrections that need to be addressed.

Real World Testing
Give latest test build to a few local drivers and do more ride-alongs to get feedback before nationwide roll out. 

Roll Out
After edits have been made, roll out updated app to all drivers. Create cheat sheet for drivers showing changes. 

Next Steps
From there: iterate, iterate, iterate. Create mockups for upcoming new features. 

Original
Overall, the original design is very text heavy and the space does not feel fully utilized, which creates confusion for the user. Swipe-to-complete behavior caused many accidental actions to occur. Using and navigating the app is not very intuitive.

First Pass
Introduced a collapse/expand system so that drivers can choose to see all the important information of an active order while minimizing others. Rather than swiping to complete, the user presses a button with choice to undo the action if done accidentally.

Revised
Refined the collapsed view to show more at-a-glance information while also using color to help differentiate. Cleaned up the expanded view to make better use of the space. Created a “quick action” bar per order which includes camera, navigation, help, and detailed info.

Final
Increased font sizes globally. Added more info to collapsed view. Refined expanded view even further, as well as showing all order properties. New “arrived” and “picked up” feature so that orders can be billed wait time, if necessary. Added buttons for QR scan and chat.

CONCLUSION

This was all just the high level overview of a very big project. Through my collaboration with managers, developers, drivers and executive team members, I was able to improve a key product that had not received the proper attention that it needed in many years. I made it my personal goal to prioritize driver safety, usability, and readability. 

Driver feedback was overwhelmingly positive! With all the successes from this project, I was asked to continue this look and feel throughout all of the products in the company using the same process, starting with the web-based Order Form, then followed by the Consumer Mobile App.