GrubHub: Mobile App
GrubHub is a mobile app that improves the online ordering experience of students at Messiah College.
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
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.
The order card closed.
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
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.
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.
Empty state order card.
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
Flattened and using color palette
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
