top of page
Shake Shack online ordering “Default” redesign for topped ShackBurgers™ and happy customers.
Overview & Problem Statement
Shake Shack is a beloved fast-food burger chain. Their top-seller is the ShackBurger and user experience issues were affecting the ability of customers to get their burger the way they wanted it.
The selected and not selected design of buttons in online ordering made it difficult for customers to get their ShackBurgers the way that they wanted them. This resulted in complaints and the company spending time and money to respond to them. The goal of this project was to change the design enough to make it easier for the customer to accurately place their order without compromising the overall look and feel of the platform.
Existing Design
Users & Audience
The users are customers who order online from their computer or mobile device from Shake Shack. This is a nation-wide chain, so I needed to change the usability without changing the design of the app too much.
Roles & Responsibilities
I was the sole designer and user experience consultant on this project. My responsibilities included designing the online ordering experience, conducting usability testing, and prototyping.
Process
I started by going through the online ordering process myself to see where customers were running into problems with their orders. This resulted in the discovery that the “Default” section was the problem.
Next, I conducted user testing with a group of ten customers to see if my findings were correct. User testing showed that the “Default” section was indeed the reason that customers were having trouble correctly submitting their orders.
Once the “Default” section was proven to be the issue, I began redesigning the process. I started by taking the Shake Shack colors and font from the website, to accurately replicate the branding, and measured the pixel size of each element to recreate the entire experience as closely as possible.
As soon as I had the branding and sizing drawn out, I could start in on the problem.
I went through a few iterations before I settled on this final version. The prior versions either did not accurately match the branding or did not solve the problem. I ended up increasing the pixel size of the borders of the box and adding a text box under the header to describe the action that users need to take.
Lastly, I conducted user testing with the original group of testers to ensure the usability of my design change.
Updated Design
Outcomes & Results
After conducting user testing with the same group of people, the results were in! Every person reported that the new version was easier and more intuitive to use. My goal of improving the user experience to ensure that every user could get their burger the way that they wanted it was achieved.
There is room for improvement in the online ordering process of other things off of the Shake Shack menu, but for the purpose of this project, I focused only on the most popular item, the ShackBurger. I think that I did well in matching the branding of the original Shake Shack online ordering system, and in solving the problem without changing the overall design or feel more than necessary.
Lessons that I learned are that often less is more when it comes to design and user experience, and that not every project has to be a complete overhaul of the original product.
*This project was sent to Shake Shack for consideration.*
bottom of page