Katsu Burger’s Takeout Process
Project Overview:
Synopsis:
What: I had 10 days to redesign Katsu Burger’s website to incorporate a built in take out ordering system.
Business Problem:
What: Katsu Burger’s website currently uses 3rd party vendors to support its online takeout ordering system.
Why: The current Katsu burger website causes frustration for users as it has buttons that point to “Online Ordering”, but when clicked, nothing happens. A user has to click on one of the location titles to access online ordering.
Proposed design for ordering takeout on Katsu Burger’s website.
This was a solo project where I handled all stages of the design process.
Process and methods used:
Discover: Days 1-3
User Research
Heuristic Evaluation
Organization and domain Research
Comparative Analysis
Affinity Mapping
Concept maps
Persona Creation
Task Analysis
Define: Days 4-5
Content inventory
User Flow
Story boards
User Journey mapping
Site maps
Use cases
User stories
Design: Days 6-7
Sketches
Layout design
Wireframes
Mockups
Test: Day 8
Prototyping
Usability Testing
Deliver: Days 9-10
Reiteration
Presentation
Discover
Research & Interviews:
What: I created the user research plan to focus on:
What was their expectation of the restaurant before visiting.
Their feelings, thoughts, and impressions after going to the restaurant.
Their thoughts and feelings on using the old Katsu Burger website.
Why: To provide insight on:
Customer’s true painpoints
Opportunities for improvement
How: Visit different Katsu Burger locations with interviewees and interview them there
Find interviewees who have never been before
Find interviewees who frequent Katsu Burger
Insights learned:
Interviewee responses highlighted the following on their:
The Good:
Felt the website had a fun and welcoming theme
The restaurant is a place to go with friends or kids
A place for fast and quick food
The Bad:
Expectations were not met.
They were expecting high quality service based on their mental model of what Japanese restaurants are supposed to be like
Lots of confusion
What was clickable
Wording of certain site map naming conventions
Overall felt the website gave an impression of the restaurant feeling:
Cheap
Cluttered
Frustrating dining experience.
Define
Concept Maps and Affinity Mapping:
What: Based on the information from the interviews, I identified the following themes and values.
Concept map version 1 before affinity mapping
Hypothesis Pivot:
What: After doing an affinity mapping exercise, I identified that family focus was a heavy theme that all interviewees expressed.
Why: Witnessing parents with kids at the restaurants during my site visits and a kid playroom helped reinforce this idea.
Hypothesis Confirmation:
What: I interviewed a user who fit the criteria of a parent with multiple kids.
Why: He emphasized how family focus, affordability, quickness of service, and recognizably of familiar foods was his main criteria for picking places to order takeout for his kids. This helped me edit my concept map to have more of a family focus idea.
Interview with a parent for hypothesis confirmation
Concept map version 2 after affinity mapping
Persona Creation:
What: I identified 3 main personas that would focus on these values when ordering takeout from Katsu burger.
The busy employee
The working parent
The highschooler
Why: I identified that by focusing on the needs of the working parent, my design would accomplish the needs of the other personas.
This provided me with what I needed to identify painpoints in the user flow through storyboards, journey maps, and more.
Identifying that my primary persona handles the needs of the other personas
Design
Sketches:
Using competitive analysis as inspiration, I could create sketches for my design.
Wireframes:
Using my sketches and user flows, I created wireframes:
To show how our users interact with our system.
Mockup/Prototype:
I created mockups and a prototype for usability testing.
My goal:
User friendly design without needing to teach users how to use the app
Test & Deliver
Usability Testing:
I created a usability test plan that outlined:
What the purpose was
What user tasks I wanted to test
How I wanted to approach the usability test
Using the prototype our team created, I could:
Begin testing with users
Gain design insights on what to change for each iteration and why.
Iterations:
Iteration 1:
1st Iteration adjusting order confirmation screen
Changing the order confirmation design to have more information like:
Current status of the order
Address of pickup location
Order details
I also reorganized the information to make it easier to read for the user.
Iteration 2:
Adjusted the wording of “Favorites” to “Popular” to
Reduced confusion by users that it was popular restaurant items and not their personal “favorites”
2nd Iteration adjusting “Favorites” to “Popular”
Final Prototype & Next Steps
Final Prototype:
A quick take at redesigning a Seattle restaurant's website for a class at general assembly. This is a demo of the design prototype that was made and run's through what a potential user might experience.
Next Steps:
Next steps would be:
Show a visual representation of excluding or disabling menu categories that are not offered at other locations.
A way to incorporate visual elements that bring out the 1980’s Japanese Godzilla comic theme the original website has.
After the next iteration of designs, I would conduct another usability test to:
Understand how users feel about the website
Identify any struggles and painpoints to further iterate on.