STACKED Web Application
Creative Director - Brian Desautel
Art Director - Sarah Allen
UX Designer - Yours truly
Copywriter - Scott Chavez
STACKED came to The Buddy Group looking to create a mobile version of their ordering tablet app. My role was to transfer the information architecture of the tablet version to mobile with as little friction as possible.
The original STACKED ordering app was created for the IOS tablet and emphasized large imagery in its menu which could not fit as well on mobile devices. The application was also no longer going to be through IOS development but instead be made readily available as a web application, which meant additional steps were required to have the web app link to the internal system in each restaurant to receive the order.
Workflows from the original ordering process were modified to allow individual users to add their orders to a table without being dependent on solely the single tablet at a table. Imagery is still a main component in the web app but has been reduced significantly to allow users to see more choices from the large menu.
Seeing who would use the web application the most revealed key scenarios that shaped the experience.
Low-fidelity wireframes were produced and made interactive in cooperation with the development team to quickly test the proposed experience.
Steps were added into the process to deal with the technical challenges that arose in the process.
The UI was updated from the original version to bring in more whimsical elements as well as a bright color palette to entice users’ hunger.
There were many sessions spent at the whiteboard to work out how to rearrange the elements of tablet app to work on a user’s phone as well as not break too far from the original app.
Research into STACKED restaurant users revealed that the tablet experience worked very well up to a certain number of people at a table. Beyond that number, users were ending up waiting for their turn to input their order and adding anything new in became troublesome. These large groups were the targeted users of the STACKED web app.
For a user to connect to the in-store ordering system, they would have to go to the STACKED ordering site url and then receive an access code from the table tablet. We worked on a solution to allow the url to pop up when a user entered the establishment via beacon technology and have the access code readily available from the tablet screen at all times. From there, each user could have control over their order and payment.
One of the biggest challenges was the rearrangement of key features in the tablet app to make sense on someone’s phone browser. We wanted the mobile experience to still tie into the current restaurant interface to avoid confusion for the users comparing both at the same time, and still push the boundaries to make the web app as frictionless as possible. Whiteboarding out initial ideas and questions were key to help determine the solution.
Low-fidelity wireframes were mocked up from sketches and mapped out to understand the entire flow map of the product. These wireframes were then given over to development to be built into a HTML prototype.
The colors of the original STACKED brand were brightened and tweaked in this project to entice the user’s hungry through the pscyhology of Western color theory. The UI elements were designed to emphasiz “stacked” bars with a dash of STACKED’s restaurant retro theme brought in. Whimsical iconography was created to match the food theme as well as a little square emoticon character that helps guide users through the process. Does anyone like UX puns because the hamburger menu is in fact using a hamburger icon. YUM!
Final Product & Insights
The final product created was not only a responsive web version of the STACKED tablet app, but a more modern and bright approach in experience.