Brief

In many ways Grubhub is a legacy product.  The platform was originally created in the early 2000s, and occasionally there will be moments where this shows.

The accounts page is one of these experiences.  Here, a diner is able to manage a variety of elements regarding their profile.  Everything from adresses and contact information, to membership status and customer service can be accessed from this page.

Challenge

The existing experience is out of date and has does not have clear logic which could clarify a user’s experience.

The goal for this project was to reimagine how a diner could interact with the accounts screen, and build out a more logical system of delivering information.

Planning

The first step in updating this screen was to set out a goal and logic for how this screen would operate.  Account stands out from other locations within the Grubhub ecosystem in it’s outright utilitarian nature.  In my new designs, I wanted to improve upon and preserve the utility of the product while injecting elements of visual interest.

Before beginning work on this project, I conducted a brief competive audit of similar screens within our industry.  

My first step in designing a new system was identifying what worked and did not work within our existing designs. I began by looking at each entrypoint offered by the current screen, and developing a logic to better group them together.

New Elements

One goal which I had for the new screen was to add a level of personaliztion into this experience.  While trying to avoid veering too far into the ‘Social Media’ lane, a user should feel a sense of ownership over their experience.  I explored a number of different avenues to accomplishing this.

Working with others from the loyalty team, we developed mockups of how a more personalized accounts screen could look.  These designs would feature a variety of information which is unique to each diner.  This strategy has a number of benefits.

By getting a diners photograph, we would then be able to show couriers the customer who they are delivering to.  While a small change, this update would hopefully have a much larger impact upon customer service, as it humanizes an otherwise impersonal transaction.

Additionally, we can use this page to show a diner their statistics in regards to their membership plan.  There is no better way for a diner to make an informed decision on a premium service than to see an objective measure of how much they are saving each month.

Designing for All Platforms

When designing a new account page structure, one factor that I had to keep in mind was Grubhub’s variety of user types and tailored services.  While most diners only experience the typical ‘Diner’ app meant for general use, there are a number of sub-categories.

Primarily, these include ‘Campus’ for college students and ‘Corporate’ for companies.  Both of these user types allow for an opportunity to create a tailor made experience around their specific needs.  We looked into providiing specific information and statistics rooted around the use of these users institutions.

Grid System

While designing these screens, we wanted to try an angle further outside of the existing template.  In this, the team created a design system for the accounts page which centered around a grid system.  

While ultimately this option was not abandoned, it is these explorations which bring a design team closer to a refined finished product.  Many of the elements and lessons garnered from this design system contributed to the final designs that were shipped for this project.

For example, in making the real estate taken up by each option larger, we had to be more selective about what options to show and the prominence which they should take.  We were also able to explore further opportunities for iconography within this screen.