Driver App

Helping drivers in staying focused


Timeline: 3 months

My Roles: Design Ops, UX research, Interaction and Visual design

Worked with: Product manager, Software developers

Tools: Framer, Netlify


One of the blind spots for the design team was the actual understanding of what drivers do from operational stand point

  • EatStreet is adding more ways for drivers to handle orders with

    • More merchant that are not restaurants such as convenience store, grocery stores, flower shops

    • Merchant that have certain ways of achieving the order placement, payment and pickup

  • I wanted to know what this means to the driver experience. Since we are adding grocery shopping to the driver job, I needed to understand the different jobs drivers can do. We call those jobs "order types"


When drivers pick and choose their own route it causes delays and ETA fluctuations and leads to upset customers where EatStreet loses money


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


  • 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


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

I did a brief analysis of the existing app. My observations were:
  • 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


  • 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

Interactive Prototype

© 2023 Abdulrahman Jarallah Portfolio