Shake Shack: Order Ahead

In 2016, Shake Shack's first order ahead iOS application launched with over 100k downloads in the first week of national release. A few months later, the Android application was released.

 
1-1.png
 
 

my role:

I served as UI designer for iOS & product designer for Android's app. I was tasked to guide Shake Shack's visual identity for their debut into the digital frontier, and ensure a seamless ordering experience. This then lead to iteration and development of the Android app for its 2017 launch.

 
 
 

the challenge:

Shake Shack has a good problem. The burger joint is so popular in so many of it's nationwide locations, wait lines are out the door... and around the block. Literally. The app's aim to cut lines, times and hungry bellies works in conjunction with third-party partners, packaged in a sleek, elevated ordering visual experience.

 
 

ready, set, sketch!

sskiosk_menu-1.png
 
 

To ensure a high-quality ordering experience there were many things to consider. Finding a specific location and selecting a pick up time meant creating a stress-free decision process. Seamlessly entering into the menu, one only has a limited time frame to place an order. So as product designer, I needed to make sure to menus and customization options were clear, and the user was guided smoothly all the way through checkout.

 
 
sslowfi.png
 
 

Sketching and creating low-fi wireframes, I played with list and cell styles to meet the versatile needs of the user's journey. 

 
 

harmony & richness

color-ss.png
 
 

Revisiting Shake Shack’s identity for the native digital space was of key focus. A dark color palette was chosen to provide a richness and refinement to the order journey. Various shades of grey and black made up layers of the user interface, all working in harmony to create a nuanced feeling of plushness. 

 
 

ui - iOS

iOS+-1.png
 
 

Celebrating the brand, I made use of the Shack's identity at key points in the flow. Their various location and exemplary menu icons provided me the opportunity to make decision pain-points a little more enjoyable. Large imagery and bright green buttons guide the user down the screen and through the product,. By entering a pick up location, you enter the beginning of your order. Tap "add" to quickly add or customize your menu item. Once finished, just tap the bag and check out. It's that easy. 

 
 

android

Android+-+1.png
 

A separate but similar project, Android provided us the ability to learn about the Shake Shack users, and how to improve on an even better experience. Tying in and studying Material Design’s principles, I blended even more sauce into the Shack App’s UX interactions and UI elements. I took advantage of the use of cards and slick interaction that resulted in a more clever, concise user experience. New features like Inbox and Account settings were also added.

 

lessons

IMG_1221.JPG
home-and-customize-android-sketches copy.png
 
 

We learned a lot as a result of the iOS launch. A project like this is never finished, it only evolves. Learning from users and kitchen staff, we wanted to improve on key functionalities of the app for the release of Android. Improvements implemented by our third party partners, as well as a better understanding of the Shake Shack app customer, lead us to refine the order flow. Light sketches and workshops lead to minimizing the amount of taps (ie work) someone should make to get their food ordered.

 
 
android home variants.png
 

Adapting for Android gave us the perfect opportunity to reevaluate the hierarchy for features on the home screen. Not only were features reprioritized based on iOS insights, new ones, like inbox, added more useful functionality. 

 
 Before

Before

The goal on launch was to showcase that the order ahead experience was available at every Shack location. The original list style for selecting locations hit that aim, and also showcased the number of options one has to place an order. However, we learned this list proved a bit overwhelming.

 
 Before

Before

Shake Shack repeatedly ranks as one of the best tasting burgers in fast casual, so why would anyone want to change an already amazing product? Turns out that no matter how good the burger, if customers are presented the opportunity to customize, they will. With too many people customizing their food in the original list format, kitchens were slowly getting backed up. 

 After

After

The solution was to implement card styles per location. Not only were we able to highlight each Shack more personably and expand touch points, the screen became more tailored and less overwhelming to the user. Tapping into the location card, you can learn more about the Shacks near you.

 
 After

After

Iterating on these learnings, drop downs were implemented in order to hide the customize options so the user knew it was something they could do, not something they necessarily need to do. 

 

same, but different.

Android+-+2.png
 
 

Material-like card styles lent themselves well to the app's flow. Locking buttons and rearranging key functionalities, like +/- and the bag button opened up possibilities for a more robust product.

 
 
Android+-+3.png
 
 

Small yet powerful adjustments like reorganizing the timer, About Us screen, and Order Confirmation screen added an extra bit of consideration for the user's ease. 

 
 
ss2_final.gif
 
 

In the end, it's all about the user's satisfaction. But a little distinction never hurt anyone. I'm proud to say the order-ahead app yielded an Appy Award for best in the Restaurants/Food/Beverage category of 2017, and two W3 Silver Awards.

 
brine_star.png
 

awards

W3 SILVER: SHAKE SHACK

Restaurant/Food/Beverage: Apps and Sites
My Role: Product Designer
October, 2017

 

W3 SILVER: SHAKE SHACK

Mobile Features: Best Practices
My Role: Product Designer
October, 2017

 

APPY AWARD: SHAKE SHACK

Best Restaurant/Food/Beverage App
My Role: Product Designer
May, 2017