Shake Shack Mobile Ordering

Overview

Shake Shake has big plans for 2019, one of which is to launch a first-in-class mobile ordering experience. Leading the visual design, I worked closely with my team at Fuzz Productions and Shake Shack to achieve this goal. Along the way, we introduced new interaction paradigms, infused new visual styles, and improved the overall user flows and experience. The newly refreshed mobile ordering app became the foundation for the future of Shake Shack digital experience.

 

 

 

 

 

Redefining the Paths

Design

The old ordering app is effective, but it could be improved and streamlined based on learnings and analytics from over the years. Key questions from this stage include: How can we get new users into the order experience faster? How can we streamline the process to completely remove the ordering timer? How can we simplify the product and remove unnecessary features? Lastly, how do we design with the future in mind?

 

 

 

 

 

 

 

 

 

Exploring the Visuals

Design

I set out to re-energize the Shake Shack mobile app by creating a new look-and-feel that is an extension of the ionic Shake Shack brand. The art direction borrowed from the playful and vibrant Shake Shack marketing content – leverage everything from the colorful photography, witty copy to the energetic animation.

 

 

 

 

 

 

 

 

 

Building the System

Design

The motion design principle for the app asks that every transition and animation to be a single, natural motion in direct response to a user’s action. The entire motion system can be succinctly defined by three distinctive spring values.

Combing through each screen element by element to point out any inconsistency, we produced an inventory list containing every conflicting UI element, pattern, typography, and color. Every flagged item was revisited and refined until all discrepancy was addressed.

 

 

 

 

 

 

 

Learning Through Testing

Testing

Every part of the design has been tested and iterated on base on user testing insights. My team and I conducted in-person testing with guests in the Astor Place Shake Shack using test scripts, and simple prototypes built with InVision. We often test two versions of a flow, each differing in look-and-feel or interaction pattern, helping us figure out what worked best. These testing sessions helped us make informed design decisions with the users in mind.