Grubhub driver app: hamburger to tab navigation

As the main designer, I created a revised information architecture and navigation UI to improve the driver app experience.

Role: Senior Product Designer
Time: 12 week design timeline


THe problem

The driver app is an integral aspect of Grubhub's digital strategy, having enjoyed strong functionality, widespread adoption, and positive reviews.

However, over the years, the addition of numerous one-off features has led to a disorganized user experience, which has never been thoughtfully redesigned with the user in mind.

  1. Out of site out of mind: It’s been proven time and again that when features are hidden behind a menu, they are utilized less often. As we release important new features, we don’t want to hide them.

  2. Hard to reach places: For right-handed users, the top left of the screen is the hardest spot to reach. Putting our navigation there creates undue effort.

  3. Direct access: When navigating down into a feature, the hamburger menu is replaced with navigational ui (typically a back arrow). This requires users to back out to the top level before navigating to a different section of the app.
    Hamburger nav can be disorienting and added additional taps to the nav experience.

Recognizing this, tea team proposed an initiative to identify and address the navigation challenges faced by our drivers by implementing an enhanced information architecture.

Mapped and audited the current hamburger menu experience:

Identified pain points from user interviews and research


business needs

Discovered that the app's inefficient information architecture posed not only a challenge for users but also hindered Grubhub from accomplishing its business objectives.

After an extensive audit and talking with stakeholders, we realized the app could use an overhaul in many places such as Account, Program level and self service.

These included:

  • Implementing a driver-first strategy centered around being efficient and quick

  • Reducing call volume by increasing self-service

  • Increasing in-app transactions

  • Expanding Grubhub services and accommodating related upcoming driver features


 
 

First began by holding generative research sessions with drivers to clarify their core navigational issues

8 moderated task-based interviews // 8 moderated card sorts // 50 unmoderated card sorts // 50 unmoderated tree tests

  1. The hamburger menu navigation model was disorienting, and added additional taps to the navigation experience

    • Participants had to reopen the menu to know which section they were in, and found pogo-sticking sections tiring.

  2. Account management functionality existed in multiple sections, so participants weren’t sure where to complete key tasks.

    • Participants struggled to find the entry points for tasks that could have reasonably belonged in multiple sections in the app.

  3. Participants were not aware of much of the app’s features and functionality, and felt that important things were hidden or did not bother exploring the app.

    • When drivers had difficulty completing tasks, they said they would call customer service, which Grubhub wanted to avoid.

      • ie: Changing delivery zones, reactivating GH card, locked account, and no scheduling blocks

Some research below


Next step was to design-led cross-functional workshop to sketch possible solutions

Agenda included:
1. Reviewing existing research
2. Assessing analogous solutions
3. Figjam: A guided sketching session to generate divergent concepts from prompts related to drivers. This was a great way to see how other designers and stakeholders viewed the app along with their product focus.


Mapping a provisional information architecture

Using the output of the testing, I created a provisional information architecture to validate with users.

This new architecture combined the existing Earnings and Program level into a single dedicated section for all things related to profits for the driver. As backed from our user research key findings.


explored three directions for a new navigational UI based on THE provisional IA


tested concepts with 7 drivers

Moderated task-based interviews

  1. Participants who used the Tab Bar model completed test tasks fastest and with the fewest taps.

    • Takeaway: Move forward with Tab Bar UI

  2. Some participants struggled to complete personal banking info related tasks.

    • Takeaway: Seems like an important subject to surface earlier in the IA.

  3. Program level was not widely known and participants were slow to find things in the Account tab.

    • Takeaway: Redesign the Account tab to make it easier to complete tasks and educate users on Program level

additional concepts and iterations

More design ideas were done to icon/naming usability and how might we combine program level in the app. It was originally proposed to have Earnings and Program level in the same tab, but ran into disagreements in product alignments.


Update section about updated IA

click to enlarge

Updated the provisional IA to reflect final architecture learnings from user testing


understanding layers and spacing

The layering and back stacking logic for the hamburger menu was almost non existent with no set rules. In order to move forward with a navigation that allowed to freely roam in between tabs, logic and rules needed to be set. At first, there was a proposed structure, but it was soon scrapped due to development issues. There was some back and forth when it came to when to show the bottom nav in certain flows.

Important flows such as delivering a task and shop and pay orders needed to have prime screen real estate with limited distraction. In doing so, it was recommended to hide the bottom nav in those important flows.


head to head testing

Research Method: 60 unmoderated task-based usability tests

  1. Half of participants used the new design, and half the existing design. All were given the same tasks as in the previous rounds.

  2. New design helped participants complete crucial tasks, find and explore program level, and find things in account in significantly less time with fewer taps and page views.

  3. Participants rated the new design more favorably than current design. 86% rated it 8/10 or 9/10 in satisfaction.


Worked closely with engineering to implement the new information architecture and navigational UI


Next steps

Since this project effected almost every part of the app, it opened new opportunities to improve all over the app. While working on this project, I worked simutanuously on Program level and the account page redesign since it impacted those areas greatly. Below are some WIP: