Dub Grub Redesign

Duration: 10 weeks

Team: 4 members

Tools: Figma

Project Type: Mobile App Prototype

Overview

THE TASK: Analyze, communicate, and envision a design for an existing non-profit system.

THE SYSTEM: Dub Grub, an app made by the University of Washington to let students order on-campus meals in advance and combat the spread of COVID.

MY ROLE:

  • Lead UX designer (wireframing, research, and implementation in Figma).

  • Splitting up group work weekly and organizing team meetings.

  • Envisioning redesign and creating a prototype in collaboration with my team.

The Challenge

A major problem identified at the University of Washington is the long lines and wait times at on-campus restaurants.

I found that:

  1. The COVID-19 pandemic radically changed the American college dining experience.

  2. At UW, long lines and extensive wait times were a defining struggle during the first weeks of school.

I decided to apply this problem to the app “Dub Grub” to see how we could improve the app to address students’ concerns.

Mobile App Research

The most important functionalities of Dub Grub include:

  • Payment feature (to order ahead)

  • Browse menu feature for each individual restaurant

  • Restaurant location search feature

These are features I want to keep in the redesign, as they serve a vital purpose to users. I started to think of ways to enhance these vital aspects of the app to improve the user’s experience.

Benefits of Dub Grub (what to keep)

Understanding the benefits of Dub Grub is vital for understanding how to move forward ethically in our app redesign and enhance areas that users enjoy.

  • Main Benefit: Protection for the community

    • Through the app, the user reduces the number of people they interact with and is able to protect their community from further spreading the virus.

I aim to keep this functionality by enhancing users’ ability to order ahead, as this is protecting the community and giving students better access to food.

Where the original design fails

The original Dub Grub design lacks proper time management methods:

  • The app does not include wait times or which restaurants are available for pickup.

  • Students may not be able to get their food on time or at all.

  • There is no way for students to see the meal-prep timing of different restaurants or the wait time of in-person lines.

  • Users cannot see if a restaurant is accepting orders until they go through the entire ordering process.

Goals of Redesign

Add wait times for online ordering and in-person lines: Allow students to better manage their time + Ensure efficiency and accuracy of wait-times

Alert users when restaurants are too busy to take orders: Allow users to filter through restaurants + Help users visually see if a restaurant is open

Original Menu screen

Redesign:

  • Wait times allow students to choose if they would rather wait in-person or order online.

  • A new survey to increase accuracy of wait-time predictions.

Change #1: Add wait times for online ordering and in-person lines

  • Wait times for orders allows students to better manage their time while on campus.

  • New page for student surveys to increase accuracy of wait-times:

    • Similar to Google wait-times, this feature helps students figure out the best time to get their food.

Change #2: Alert users when restaurants are available or too busy to take orders

  • Students will be able to manually filter which options.

  • Reduce time ordering from a restaurant that is too busy.

  • Below each restaurant is an “Available” listed in green or “Busy” bolded in red.

    • Red and green colors help users visually see if restaurant is open.

Original Restaurant Location Search

Redesign:

  • Organized by the 4 campus locations.

  • Status signals of “Busy” and “Available” increase efficiency for user.

Final Pitch and Takeaways

This project taught me the structure of the design process; research, stakeholder analysis, understanding functionality and architecture, to iterating a prototype and presenting the final product to stakeholders.

  • It would have helped to conduct more interviews with different students to see how we could accommodate overlooked minority groups; students with disabilities, students who live off-campus, etc.

    • Now, I make sure to allow enough time and energy towards understanding a wider variety of stakeholders through interviews and brainstorming.

  • I would also have spent more time learning about the different ways Figma can be used to create a mockup; for example, I would have used a plug-in to create a sleeker mock-up for the Final Pitch.

    • Now, I have a better grasp on Figma (through practice) - however, I still make sure to ask others and conduct research when there’s an idea I want to implement but don’t know how.