Process
UI Audit
I took screenshots of the website and notated them using Mural to conduct a detailed audit of the UI. The notes are color coded by visual design flaws (in blue), errors/inconsistencies (in red), and things that I found to be misleading/confusing (in green). I sorted these by site and made an affinity map.
Summary of Points from UI Audit
- Hours and Maps are difficult to find, hidden behind several clicks and not on the main website.
- Lots of errors and inconsistencies, almost no error prevention or feedback on errors.
- Inconsistencies with logos, brand image, and wording/menu display between locations.
- Food images are mostly used out of context, never shown next to food items. Hard to find menu and detailed information about ingredients.
Preliminary Sketches
Main points I was considering when desigining
- Clear call to actions for ordering online. Easy to find location hours and maps. Ordering and getting to food should be the focus!
- The food should be front, center, and in context, so they know what they are ordering as some users may not be as familiar with Poke.
- Update the branding with something bright and fun to give users a positive feeling when first entering the site and that is consistent.
Mobile First Design
High Fidelity Wireframes
I started with the mobile designs first allowing me focus on the most important information. I started with mid fidelity wireframes in Figma, the high fidelity wireframes are pictured here.
- I was mindful of hierarchy so popular items were at the top and popular pages were more visible.
- It was important that pages were easy to find, within 1-2 clicks of each other and that there were multiple ways to get to them so users wouldn’t have to go back to find links since mobile pages are long.
- In the High Fidelity iteration I added more as the details filled in, as well as refining the type, grid, spacing, and color styling.
Desktop Design
Mid and High Fidelity Wireframes
The Desktop version of the website is very similar which helps users have a cohesive experience. Most of the 'add item' and 'shopping cart' screens are very similar in size and scale to the mobile version and go over the Desktop version in an overlay. It makes you feel like you are on the same page, you have a sense of orientation because you can see the main order page behind it. You can easily get out, see other items or order more.
Testable Prototypes
I made prototypes for the desktop and mobile websites. This helped me understand the flow and gave my users something to test.
It also gave me an understanding of when to use small animations for menus, how different animated movements of going back and forth between menus feel and that most of the time you don’t have any animation at all.
Usability Test
The Test
I conducted a usability test of the mobile and desktop websites with a mix of remote and in person testing. Based on the biggest problems from the audit I gave them two main tasks.
- To find out if they could come and eat right now.
- Order a custom bowl online.
The Testers
I recruited 3 participants who have different backgrounds and eating out habits. I gathered these details during a pre interview.
As they completed their tasks I closely observed what they were doing, where they paused or struggled.
During the post interview I was able to gather additional insights, opinions, and feedback.
Feedback from Testers
Tester #1
Female, mid 30’s, professional, has kids, married
Pre Interview
Eats out infrequently, usually pick up.Likes familiar places, looks for Gluten Free menu.
Reactions
- She felt the menu page looked too clickable, too much like the online order page.
- She likes the dietary icons and scanned the menu for a specific gluten free menu.
- Found locations and ordering online easy, liked looking at the food.
Tester #2
Male, late 30’s, tech job, single
Pre Interview
Eats out 2x per month, usually delivery. Looks for what’s close and available through the delivery app.
Reactions
- Wants more feedback when hovering, selecting items.
- Expects a radial when there’s limited options, cannot tell when some custom items are limited or not.
- Likes dietary icons, but wants more nutritional information.
Tester #3
Female, 60’s, office job, grandmother
Pre Interview
Eats out 2x per week, usually pick up. Prefers ordering over the phone vs online.
Reactions
- Likes all the images of food, says it helps her choose especially when she isn’t initially familiar with some of the options.
- She cannot tell if there’s a limit on certain toppings.
- Doesn’t always find her way, cannot understand some of the icons.
Usability Test Takeaways
Menu page looks too similar to food order page.
Redesign and simplify page, remove lengthy custom options information.
Users want detailed nutritional and allergy information.
Add a link for dietary information on menu and online order pages.
Every User Tested paused at Online Order page when having to choose a location.
Remove page and go straight to online order page, move location selection to check out.
Can't tell how many items are limited on Custom Bowls.
Place radials/check boxes where appropriate, make wording clear if toppings are unlimited/limited.
Iteration after Testing
Main Website Menu
I simplified the menu on the main website so that it only lists food names, short descriptions and the price with some photos.
My initial idea was a ‘how to build custom burrito/bowl’ onboarding like some other custom food places, but users found this screen too clickable and confusing so I made it more like a restaurant menu instead.
I also added a link for more nutritional and allergy information.
Checkout
The previous iteration of the online order page had you select the location before being able to look at the order portal, but I removed it after user testing. Now you must select the location when you check out. This improved the flow a lot.
I made the checkout page full screen to give more space to each section and since I added the location selection. During the test every user chose ‘soonest possible’ as an option so I made it pre-selected instead of an additional click.
Final Before and After Screens
Original and Redesigned Home Page
Original and Redesigned Locations Page
Original and Redesigned Online Order Page
Original and Redesigned Custom Bowl Page
Style Guide
Colors
The inspiration for the color palette comes from the menu. I wanted the colors to be bright and fresh and also make you hungry.
The red ‘tuna’ color is used for the logo as well as all the buttons leading to order online and checkout.
The secondary colors are used for footer illustrations and secondary checkout buttons.
Most large areas of the site are in the neutral palate of warm white and dark seaweed green. It serves as a canvas for the bright food photography to pop.
Logo and Icons
The original logo was busy, with two illustrative elements that had different scale and multiple colors. I wanted to make something simpler and find more ways to use it in the website to reinforce branding.
The logo character is also featured when you submit the order after checkout, here is a quick animation I made in figma.
Takeaways
The overall feedback from user testing was positive, the biggest response for me came from when people saw the food and were excited to make their meals.
The issues identified early on were addressed and further testing and iteration really helped me understand what users pain points were other than what was obvious to me.
What I would do next
Users were interested in where the food comes from, nutrition, health benefits, allergy information. Initially I wanted to add an ‘About Us’ page to talk about the company because they are a local small business, but I think users really want more information about Poke. We’re in the Midwest, we need some help!
