Case Study by Ceenan Calzadilla
Read Time: 5 mins | Timeframe: 3 weeks | My role: UX Designer | Tools: User Interviews, Figma, Webflow
Craft House is a restaurant and bar that offers over 100 draft beers, appetizers and a large dinner menu. The company implemented table side ordering but very few customers feel comfortable using the new and expensive Ziosks.
The intention of the product was to improve speed of service and offer the guests the ability to order beer, cocktails and wine themselves, if desired. Craft House was hoping to offer a fun and intuitive way to explore the menu, as well as a way to produce faster service, expedite the dining process and increase sales.
The problem is very few guests are using the product. It has been one year since the Kiosk rollout, and sales have not increased.
Craft House would like to find out what is preventing the guests from using the product and if anything can be improved to make it easier to use.
1) Identify why the guests are not ordering drinks from the Kiosks application.
2) Facilitate a better user experience for the drink section of the app by improving its UI.
3) Simplify the ordering process.
*Note: The drink portion of the menu will be the focus for this project. Beer, cocktails and wine are the only items currently available to order with the Kiosks. Entrees and dessert can be previewed only.
Craft House caters to a large demographics. From children to grandparents and everything in between. Since the main focus of the Kiosks is for alcoholic drinks, the target market is anyone 21 years of age or older. Craft House is located in the business district of downtown Portland, Oregon and the profiles below are the target audience:
Users who just got out of work, usually meeting up with coworkers to socialize and decompress before going home.
Users who come in before a concert, movie, play etc.
Usually with a group of 2-4 or more.
Users who often stay for long periods of time to watch sporting events.
Users who are visiting from out of town, state or country. Usually interested in the variety of local beer.
I surveyed guests and asked them to perform a few predefined tasks in the Kiosks. If I could tell they were getting lost of frustrated I counted that attempt as unsuccessful. I recorded their actions and took notes. Some of the tasks were:
1) Order a beer in the malty balanced category.
2) View the wine list.
3) Add a cocktail to the shopping cart, then continue to browse for another selection to add to the order.
4) Go back to the home menu.
5) Use the self-service payment process.
This is what users had to say during the usability tests:
“It takes a long time to scroll through all the beers.”
“I know it’s on here…just not sure where yet.”
“How do I go back?”
“I used the choose a brew option, but not sure how to actually order it.”
"There are so many options, I can never decide!"
After completing the survey and reviewing my notes, I identified some user pain points:
1) Once you choose a beer category, the view switches to full screen mode. Now you can only view one option at a time and most categories have anywhere from 15-40 different options.
2) There is not a viewable back button at times. If you get too deep in the menu, it is difficult to navigate back.
3) The home menu has a total of 6 options. Drinks, Choose a Brew, Food, Eclub, Play Games and Pay Now. All the options are the same size and there are no signs of visual hierarchy to guide the guest.
4) The Choose a Brew option is different from the Beer option. In the Choose a Brew section, it will ask you to first choose a color, then a flavor profile and then an ABV. Finally, you are provided with beer options. Most people who used that option were actually just trying to find the normal beer categories. The Choose a Brew section has too many buttons to press and many people get distracted and don't complete the order.
5) Too many beer options without any suggestions.
6) Most guests ordering cocktails don't know exactly what type of liquor their desired drink was made with.
Most users were having trouble navigating through the app. Therefore, in order to redesign the app, I built the information architecture to understand its structure.
As you can see in the restructure, I eliminated the Choose a Brew option. My research proved that it was more confusing then helpful.
Also, I made a revision in the cocktail section, replacing the name of spirits with the style of cocktails. Many people I surveyed admitted that they either forgot or didn't know what exact spirit was in the drink they wanted. They were more familiar with the category or style instead.
I sketched out possible solutions on paper for the main screens before committing to high fidelity designs. This allowed me to prototype different layouts rather than focusing on design details.
1) I simplified the home screen to a 3 main button layout. Less intimidating at first glance.
2) Added a sticky footer navigation for a one button click to get to your desired area.
3) Made the "Play Games" and "Join Eclub" smaller in order to not distract the user form the goal of ordering.
4) Added a back button in the top left of every screen (besides the home page).
5) Changed all beer categories to layout view instead of full screen in order to increase browsing speed.
6) Added a "Staff Picks" option in the beer category. The vast beer options are appealing but can be very overwhelming. Most of the time, guests just want a popular beer that the majority of drinkers enjoy.
Press "F" on keyboard for full screen mode.
To validate the changes I made, I surveyed a different group of people. I asked the same questions from my initial tests and recorded their behavior and feedback. Here’s what people had to say about the redesign:
"Ordering felt very intuitive."
"I found the persistent bottom navigation very helpful."
“Browsing and ordering was a fun experience .”
I really enjoyed the design thinking process of this case study.
The website was built completely in Web Flow and I get a little more inspired every time I use it.
The prototype was done in Figma. Photoshop came in handy more than expected as well.
I learned a lot along from this case study and can't wait to continue growing in User Experience Design.
Case Study by Ceenan Calzadilla