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.

(Click to zoom)

(Click to zoom)

(Click to zoom)

 

 

Outcomes

Was the project successful?

This project was successful because the end result was the design of 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.

Lesson Learned

Designing something is only half the battle

Until an app like this is actually built and implemented, it doesn’t really solve the problem. It may have accomplished the goals of the project or made others aware of the challenges of the current app, but bringing this app to life would require building the app and coordinating with the college to implement the app into their current system.

 

 

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?