Topmill Bakery is a small bakery located in Burbank, California. This responsive website was designed to help customers have an easier experience when ordering food from Topmill’s website.
Role: UX and UI Designer
Timeline: 6 weeks - 100+ hours
Tools Used: Figma, Adobe Illustrator
This was a ficticious scenario as part of the UX Design Academy
Problem
Online orders are low, and users are having a hard time ordering through the web
Goal
Our business goal is to make a responsive mobile app that translates to a web design to make it easier for different demographics to order.
1.
I then interviewed 5 different users to understand pain points they experienced when using different goal apps. I then conducted 8 online surveys to better determine user pain points and needs.
Interview Goals:
Discover what frustrations and pain points users have when using food ordering products.
Sort user values when ordering food
Deconstruct user process and psychology when ordering food
How might we navigate around user pain points throughout the entire process?
Summary of User Interviews and Survey
Preferences
3 out of 5 users said that they preferred to have a mobile app options because they often times do not want to talk to a sales associate. Users also preferred to have the status of their order updated frequently. All users also agreed that a points systems kept them coming back and was rewarding to use.
Values
All users I interviewed said they valued convenience when ordering food. Stating that the speed and ease of use was a top priority. 5 of the 8 user surveys indicated that users valued being able to connect with the restaurant they ordered from.
Pain Points
Users wished that apps gave more nutritional information when ordering their food. Users also wanted to be able to communicate to a driver or a restaurant if their order is incorrect. Users found that some apps gave them no feedback on their order.
Problem Statements
I created multiple “How might we” statements in order to explore more specific ways we can help users
How might we limit the amount of steps it takes for the user to complete an order?
How might we make users feel more confident they know what’s in their food?
How might we make the status of the order more transparent to the user?
MY PROCESS
User Interviews and Surveys
Define
Personas
I created two possible user personas to help understand their needs from their perspective.
Feature Set/Impact Effort Map
I categorized possible features by impact and effort to prioritize which features I should commit to designing.
Crucial Features:
Order tracking
Item customization
Transparent cart
Clear button navigation
User Flows
I created two users flows to better understand the possible path’s users can take and why they might take them
Takeaways
Users need to be rerouted multiple times when either signing in or updating their carts
Users need to be able to manage their carts while still browsing items
Users need to sign in to unlock certain features
What I should be solving for?
Users need more control over editing and customizing their orders
Users want to feel rewarded when completing an order
Users want to feel more connected to the status of their order
What are the solutions I will be designing?
A responsive design that allows users to edit their orders and customize the items. Also, a very clear, well designed status screen when they complete an order. I am also incorporating a reward system into the application to make users feel appreciated and want to come back to the product.
Low Fidelity Wireframes
Mid Fidelity Wireframes
High Fidelity Wireframes
Responsive Design
I created a mobile design for the website to be accessible from an IOS platform.
Empathize- Who are my users and what are their needs and pain points?
Contents
Competitive Analysis
Competitive Analysis
Interviews
Problem Statements
I started by researching alternative lifestyle apps to determine the needs and solutions for different users.
Prototype
Revisions
New Tip Entry
I changed the tip input because users were confused why the number was underlined
Changed Hamburger Dropdown Menu
I changed the profile to be included in the drop down because the interaction was not intuitive for users
Added Address and Phone Number to Mobile Home Screen
I added the bakery’s contact information to the home screen for mobile users who want the information to be easily accessible.
Conclusion
Reflection
For this project, I focused on a responsive web design. I learned to be create an accessible design on multiple platforms. This better helped me empathize with the user. I also really focused on the UI that would be most intuitive for the user. I wanted to utilize the research I found to make an easy user pathway that made sense for all users.
Takeaways
I used this platform to be able to be able to adapt my design to a mobile version from the website.
I focused on how the UI would interact with the user. I wanted to think about things like text size and color accessibility
2.
Define- What are the user needs and pain points?
Contents
Affinity Mapping
Affinity Mapping
Personas
Feature Impact Map
I sorted the interview responses into different categories to define the most important and echoed responses.
3.
Ideate- How will users navigate to the end point?
Contents
Site Map
Site Map
User Flows
Takeaways
I created a map for various pages on the website to be able to plan my information architecture.
4.
Prototype- Designing the Product
Contents
Design Patterns
Design Patterns
Low Fidelity Wireframes
Mid Fidelity Wireframes
High Fidelity Wireframes
Responsive Design
Final Prototype
I designed all the logos, color schemes, typography, and design elements within the product
5.
Testing- Let’s see if it works!
Contents
Usability Testing
Usability testing
Revisions
Conclusions
I conducted usability testing on 5 users to receive feedback on any pain points that users were experiencing.