UX/UI Case Study : Freebirds World Burrito Apps Redesign
Freebirds World Burrito is a regional chain of fast casual burrito restaurants and their cafeteria-style allowing customizable sizes and toppings. Apps allows the user to place an order online for either pick up or delivery as well as maintaining the user account to keep past order record and earn points to get a free food. I have one Freebirds location near my house so Freebirds is one of my pick-up food restaurants and I always encounter some problems while using their iOS app. So I decided to see if other people also have a hard time using their app and improve this app as one of the big fan of Freebirds food.
Note: This is a concept project that is redesigned by me and this is not done by any official team of Freebirds World Burrito, or I wasn't hired for this project.
My Design Process
I used the below design thinking approach to this app redesigning to make it more user-centered design by adopting the result of user research and feedback.
1.EMPATHIZE Research
App Store Review Summary
To start off, I decided to check out the user reviews on Appstore about this app for real voice of users. Freebirds had 177 reviews with 2.6 stars out of 5 which is kind of what I expected because of the poor usability that I have experienced with this app. Major negative reviews are summarized as below.
1. Complicated UI - Poor interactive design
i.e. - Difficult to find the way to re-order, take so much time to place an order
2. Confusing navigation
i.e. - No clear indication where to go/do next
3. Inflexible design
i.e. - Cannot add gift card during check out, cannot add tips to order
Competitive Analysis
Freebirds has two major competitors, Chipotle and Qdoba. I conducted a competitive analysis to
see what kind of features they have and to highlight the strengths and weaknesses of products as below.
- Chipotle and Qdoba have many features to carry over information from previous purchase/log in (Everybody likes bypassing the extra steps and having extra time for something else!)
- Freebirds and Chipotle have more useful features during customizing menu, for example, ability to select portion on ingredient level and ability to see ingredient on picture
- Chipotle and Qdoba have pre-built menus for customers do not have time to customize own plate
- Qdoba has spicy level icons on each ingredient (Parents will love this feature when ordering for kids, including me)
User Stories to find pain points
I asked 5 people, aged between 26 to 45 who have ordered food online, to use and experience the existing Freebirds app. Using the summary of App store reviews and the result of competitive analysis, I prepared what to ask during user testing. The test result helped me find the pain points as below.
1. 5 of 5 complained that there is no confirmation dialog to prevent user errors such as deleting customized food, adding/updating account information before completing.
2. 5 of 5 complained that the app does not carry over the information like the location they used in previous log in and does not allow them to save a customized plate for future order
3. 4 of 5 complained they had a bad on-boarding experience due to landing page complexity and unfriendly sign up experience.
4. 4 of 5 complained that it is difficult to understand how they can earn point with reward program and what kind of promotion/offer is going on.
5. 4 of 5 complained that they got the error message at the end of transaction to fix instead of getting it at the moment that fix is needed.
6. 3 of 5 complained that delivery button is hidden on the map when they choose the location and they did not know they have delivery option until they scroll down.
7. 2 of 5 complained that buttons and arrow icons are not tappable.
2.DEFINE Story Mapping
User Persona
Freebirds competitor, Chipotle found a primary customer segment in millennials and has won over millennials by offering a fresh healthy customizable meal based on their personality and characteristics since US has a racially and ethically diverse population. Freebirds also had a success opening the locations close to college campuses like UC Santa Barbara in California and College station in Texas, I created two personas that embody the traits of the target user.
Scenario Mapping
To tie my detailed knowledge from research into a framework, I conducted a scenario mapping. Defined the steps that users will need to take to place an order and the tasks that are needed as well as the features that the users may feel convenience to use, considering persona's needs and wants.
Sitemapping
With all of the goals and the persona's needs in mind, I mapped out the hierarchy of major and minor features to implement. I was able to understand how to organize content and how many interactions/screens need to complete a task in this step.
3.IDEATE Sketch (Low-Fi) & Mid-Fi
Sketch (Low-Fi)
I did a hand sketch to pull ideas from my head fully and quickly after defining the user needs. I thought it will allow me to feel the user experience by touching the icons and changing the screen (I mean turning the paper in this case). It also gave me good ideas like how big the icons should be and the location of contents and so on.
Mid-Fi
I created a mid-fidelity wireframes of main flow screens immediately after sketch to catch any major missteps.
Here are the major architecture changes;
Change #1. Customizing screen
In current Freebirds app, customizing steps are separated in pages per ingredient category (protein, beans, rice etc). I combined all ingredient categories into one screen so the users can simply scroll up and down to change ingredients on the same screen without changing the screen by clicking arrows and waiting for screen to be loaded.
Change #2. Landing page
The current app does not have the landing screen and takes the user to location search screen with navigation bar on the bottom when the app is opened. The contents of navigation bar is unclear and confusing and some contents are irrelevant so I decided to create a simple landing page with only necessary information for easier navigation as a landing page.
User testing
The goal of testing my mid-fidelity wireframe with users was to identify pain points that could be improved in future iterations.
The most noteworthy finds were;
- Adding the ingredient category list to the customizing page so the user can tell where they are
- Adding an additional "add to cart" button so the user does not have to scroll all the way down for button
- Placing plus and minus icons for choosing quantity instead of typing or choosing quantity from pull down menu for more convenience
4. PROTOTYPE UI & Hi-Fi
Style Guide
Current App has a dark UI and I thought it overpowers the beautiful color of food images. However, I still wanted to keep their brand image which is urban, modern and "edgy" so I decided to use Retro Half-tone pattern as an accent and limit the color to three (to follow 60–30–10 Rule, 60-Orange, 30-Yellow and 10- Charcoal) for bold look and use off white color on the background to make the food images to be conspicuous to stimulate buying intention.
Hi-Fidelity Prototype
ow time to check the usability of Hi-fi prototype. I conducted a test with 5 people and below chart is the result of my design changes. I found more minor areas to improve from this test so I applied more charges to my Hi-fi prototype and I repeated this process until I reach the final product.
5. TEST User testing
User Testing
Now time to check the usability of Hi-fi prototype. I conducted a test with 5 people and below chart is the result of my design changes. I found more minor areas to improve from this test so I applied more charges to my Hi-fi prototype and I repeated this process until I reach the final product.
6. IMPLEMENT Final Product
Click full screen button for full size view
