Poke Burrito

Redesign Case Study 2022

Poke Burrito is a restaurant chain with a web and mobile websites that had huge errors that got in the way of ordering and finding information about their restaurants. I redesigned both versions as a project for the IxDF (Interaction Design Foundation) User Interface Design bootcamp. I used a full product cycle to identify problems through analysis and testing to iterate on those designs.
Poke Burrito Redesign Cover image


Design process of defining the problems, testing ideas then iterating on the designs

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.

Screenshots of the website that have been annotated with post its

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.
An Affinity map of the UI audit where all the notes have been organized and summarized

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.
Sketch design ideas of mobile and web versions of the website

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.
High Fidelity wireframes of the mobile version of the page including the home, menu, locations and online ordering

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.
Mid Fidelity wireframes of the desktop version of the website
High fidelity wireframes of the desktop version of the website

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.
The Mobile wireframes in Figma with lines showing where interactions take place for a prototypeThe Desktop Web wireframes in Figma with lines showing where interactions take place for a prototype

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
illustration of a woman in a jacket

Pre Interview

Eats out infrequently, usually pick up.Likes familiar places, looks for Gluten Free menu.


  • 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
illustration of a man in a collar shirt

Pre Interview

Eats out 2x per month, usually delivery.  Looks for what’s close and available through the delivery app.


  • 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
illustration of an older woman with a necklace

Pre Interview

Eats out 2x per week, usually pick up.  Prefers ordering over the phone vs online.


  • 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.
arrow right
Redesign and simplify page, remove lengthy custom options information.
Users want detailed nutritional and allergy information.
arrow right
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.
arrow right
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.
arrow right
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.
before and after testing images of the desktop web menu page
before and after testing images of the desktop checkout page


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

before and after screenshots of the original website and the final redesign of the home page on desktopbefore and after screenshots of the original website and the final redesign of the home page on mobile

Original and Redesigned Locations Page

before and after screenshots of the original website and the final redesign of the locations page on desktopbefore and after screenshots of the original website and the final redesign of the locations page on mobile

Original and Redesigned Online Order Page

before and after screenshots of the original website and the final redesign of the online order page on desktopbefore and after screenshots of the original website and the final redesign of the online order page on mobile

Original and Redesigned Custom Bowl Page

before and after screenshots of the original website and the final redesign of the custom food item page desktopbefore and after screenshots of the original website and the final redesign of the custom food item page mobile

Style Guide


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.
Style guide color palette
Logos and Icons used in the Website Redesign

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.
Animated loading logo that appears when you checkout


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!
Footer with waves and fish from the project, thanks for checking out my project!