Background

My team decided to explore how notifications could help our users find deals, and promos in one place in addition to email campaigns, and onsite marketing. We followed the structure of Sprint, by Jake Knapp and delivered a workable prototype to existing users in 5 days. Following the sprint, I continued as lead designer and saw the project through to launch and collaborated with product, tech and data science to deliver a workable MVP on schedule.

Problem

Users needed a way to keep track of promos, gift card balances, new restaurant alerts, and other notifications so they wouldn’t miss out on anything Grubhub had to offer.

Team

Myself (Designer)
Leah Olverd, Jia Liao (Product Managers)
Richard Chen (Research)

Designs

Because the inbox lives within the 'My Grubhub' tab, a trail of green badges leads the user to their personalized messages. Follow the badges to the inbox where you'll find a list of messages currently organized by date and time. Each message is actionable, taking the user further into the app (e.g. opening a dialog with detailed information about a promo.) 

Research & User testing

Before arriving at the final design we explored an alternate concept: "My Updates." Since we decided to house the inbox in My Grubhub, we tested the idea of leveraging tabs to create parity between My Grubhub and Inbox content. This storyboard helped us plan and outline the content for the initial prototype. Our research questions:

• Would people expect to find My Updates in My Grubhub?

• Would they understand where to find different message types like track your order or promo codes? 

• How could we surface messages outside of the inbox?

We tested the first version shown in the middle with 5 users. We prompted them to find a new restaurant, Super Salad, that had just opened in their area and place an order. During testing we learned that 3 out of 5 users didn’t understand that these were notifications within My Grubhub. This led us to believe the formatting of the notifications would likely need to be revised. There were also issues with finding notifications in the first place even with the red badges leading them there, and understanding what “My Updates” means in comparison to “Order Activity.”

The screen all the way to the right was the second version we tested with users, which validated that “Notifications” was the right language for this tab. However Users were still not understanding the difference between the two tabs, and found that the information repetitive, even though it was different content.

Sketches

After the initial testing, we found that the My Updates tab wasn't applicable for every use case. I returned to the idea of housing messages within an Inbox (in My Grubhub), and explored different ways of organizing the content. 

When the decision was made to move notifications to its own place in My Grubhub, I explored a few versions of what the inbox and notifications would look like. These screens show the progression into the final design that we put into production.

Message Types & Icons

Once I decided on the final layout of the notifications, I came up with a system of avatars so marketing wouldn’t have to create custom imagery. I wanted to keep the design clean and simple so a user would understand what each notification was so instead of illustrations, I decided to use an icon and color to represent each specific type of notification. Below is the spec I created for developers so they could easily assign these assets to the notification type.