Work

GrabGrub: Mobile App

Floating v2.jpg
 
 

GrabGrub is a conceptual, mobile-focused, ordering app for on-campus food.

 

To order food online at Messiah College, students and faculty have the ability to go to a website, select items from the places on campus, customize those items, and place an order. Despite this great functionality, there are a few challenges with the existing solution that this project addresses.

 

Problems

  • The current ordering website is challenging because:

    • It is not mobile-responsive

    • Users are unable to edit items that have been placed in an order

    • There is no feedback system after placing an order

 

The problems stated are not data-backed, but a result of observation and personal use of the existing system.

 

Constraints

  • Time: 4 weeks

  • Deadlines

    • Week 1: Wireframes
    • Weeks 2-3: UX & UI
    • Week 4: Prototype

 

Project Goals

  • Design a mobile-focused food ordering app

  • Empower and inform users through the ability to edit order items & check order status

  • Create a system of consistent visuals

 

Picture of Success

  • A mobile-responsive app

  • Functional mobile-focused navigation

  • A functioning prototype

 

 

UX  Design

Translating the existing design

The existing site needed to be converted into a mobile-friendly layout. Areas specifically addressed were home page modals and the order summary sidebar.

 

Modal –> Banner Items

The website utilizes modals when the user arrives to the site to promote new items or display important announcements. Once closed, however, the user cannot see this content again. By converting this information to banner items on the home page of an eatery, the user can always go back to view the messages.

 Website modals

Website modals

 Banner slider

Banner slider

 

Order Sidebar –> Order card

The order summary was converted to a card that could be opened and closed. Closed, the card provided an order summary (# of items and order total). Opened, the user could view and take action on all order items.

The order card was originally placed in the top right corner to follow common patterns of shopping cart placement on e-commerce sites. However, with a concern of it’s interference with the navigation, it was moved to the bottom.

 Original order sidebar.

Original order sidebar.

 The order card closed.

The order card closed.

 Order card opened.

Order card opened.

 

Editing Order Items

In the existing ordering system, users are unable to edit items that are in their order. They must remove an item from their order and go through the process of adding it to the order again to make a change. To solve this, both edit and delete buttons were added alongside each item in the order card.

 Edit item button

Edit item button

 

Order scheduling & status

To allow users to be able to order at a later time, a schedule button was placed along side the “Place Order” button in the order card.

After an order is placed or scheduled, the user is able to track the order status – keeping the user much more informed.

 Users can select a later time to place their order.

Users can select a later time to place their order.

 Order status details

Order status details

 

Empty order card –> Onboarding

When creating more high-fidelity designs, I realized that the order card would be an empty state when nothing was added in it. Because of this, I wanted to utilize this space as an onboarding experience to guide users through the process of adding an item to an order, and placing an order.

 Order has items.

Order has items.

 Empty state order card.

Empty state order card.

 Empty state order card replaced with guiding text.

Empty state order card replaced with guiding text.

 

 

UI Design

Design Inspiration

The mood board for this project included a lot of minimally designed interfaces that were supported by illustrations or photos.

 

Food Visuals

Illustrations were chosen as the visual style as time constraints didn’t allow for studio quality images of the food on campus. The original illustrations felt foreign to the aesthetic of the interface. So, I decided to create a consistent color palette between the illustrations and interface to unify them.

 Original Illustration

Original Illustration

 Flattened and using color palette

Flattened and using color palette

 Finalized style with slight gradients and grain

Finalized style with slight gradients and grain

 

Prototype

Ultimately, the finished design was translated into a prototype using Invision. The user story follows a user signing into an academic institution, selecting an on-campus eatery, adding an item to order, editing the order, and placing the order.

 

 

Outcomes

Was the project successful?

This project was successful because the end result was a mobile-focused app that solved experience challenges – such as editing order items. Users also would be more informed about the status of their order, being able to view the progress on their order after placing it.

 

Improvements

1. Research

By doing research initially, my observations about the challenges users face could have been validated or challenged.

2. User testing

While the time constraints of the project didn't allow it, user testing at multiple stages to learn from and validate the assumptions made throughout the design process.

 

Lessons Learned

One of the most important lessons I learned was to understand the data being displayed. When I realized that the order card would be empty without items in it, that lead to the discovery of using that space for onboarding.

 

 

My role

This project was individually completed, so I acted as the sole UI/UX designer. This included: 

  • Content planning and structure
  • UX Design
  • UI Design
  • Illustration
  • Prototyping
 

 

Gallery

 

 

Questions?

Want to know more about GrabGrub?
Have a similar project?