TI JIA WEI
BakeHouse Cafe Menu and Payment App
Avoid queues
Browse easily
Order & pay immediately
TIMELINE
ROLE
May 2022 - July 2022
UX Designer - user research, wireframing, prototyping and usability testing.
PROJECT BACKGROUND
BakeHouse is a conceptual cafe based on a popular cafe in Kuala Lumpur that sells coffee and baked goods. There is an influx of customers at the cafe during peak hours, causing long wait times to get seated, order and pay. The primary user group targeted for this project is frequent cafe goers.
DESIGN FRAMEWORK
For this project, I used the design thinking approach. I started with understanding users, defining the key problems, then brainstorming solutions, designing + prototyping, and finally testing with users. I used feedback from the user testing to iterate on my solutions.
USER INTERVIEWS
I interviewed cafe goers aged 20-60 to learn about their experience visiting cafes. Many of them tend to go to cafes during peak hours, thus long queues and wait times were the leading cause of frustration.
The initial assumption was that users liked using their phones to make orders as this saves time. However I found that most of them still preferred physical menus as their past experiences with menu apps were not enjoyable. I prompted them to talk more about these experiences.
From the information I gathered, I created empathy maps and constructed two personas. The major challenges that users faced are:
Small screen size
Users had trouble reading small fonts and did not enjoy having to navigate between too many pages to view all the content.
Lack of confirmation
Lack of order details and updates on order status caused doubt for users.
Navigation
Users had difficulties navigating back and forth between pages and categories.
Inconvenient payment
Users were frustrated with payment process as it required too many steps.
USER PERSONAS
USER JOURNEY MAP
I constructed a user journey map to fully understand my target users.
IDEATION- STORYBOARDING
To visualise the solution to the main problem users were facing, I drew up a big-picture and close-up storyboard.
WIREFRAMING
I drew multiple paper wireframes for each main screen, chose the best features from each screen idea and put them together before translating them to digital wireframes on Figma.
PROTOTYPING + TESTING PHASE
I conducted a usability test with the lo-fi prototype of the digital wireframes. 5 users were prompted to go through the main user flow of using the location feature, ordering from the menu and paying.
Main User Flow
I observed and recorded participants' tone, comments, feelings and interactions with the app, built mockups based on the insights, then conducted a second usability study.
affinity mapping
KEY INSIGHTS + DESIGN SOLUTIONS
Insight 1- Users need more obvious cues and guidance for the "use my location" feature
Insight 2- Users want to see more order details on the order status page
Insight 3- Users need confirmation that their “add to cart” action was successful
FINAL DESIGNS
FINAL PROTOTYPE (try me!)
users' comments
All of the participants in the final usability study felt positive about the app. Users not only liked how the mockup looks, they also found it very easy to use.
“The process itself was seamless, I was able to find everything.” – Participant A
"I could use it without any instructions, it was a smooth process.“ – Participant B
ACCESSIBILITY CONSIDERATIONS
I made sure to consider accessibility from the very start of the project. These are some of the actions I took to prioritise accessiblity in my designs:
Interviewed and conducted usability tests on people of a diverse range of abilities, race, age, gender, economic status and language
Chosen only colours that adhered to WCAG Level AAA
Chosen font sizes based on the material design system which adheres to standard accessibility guidelines
Provided a language feature at the top of the homepage so non-english speakers can easily switch to other languages
TAKEAWAYS
This was my first UX project while going through Google's UX Design Course. It was the first time I was able to put into practice the UX design concepts that I am learning. These are some of my main takeaways throughout the project:
​
-
As the first few prototypes might not work perfectly, a moderated usability study works better (compared to an unmoderated one) so that I can inform users in case a feature is not made to work yet.
-
Real context is needed while designing for users. Because building a cafe app was the prompt I had from the start in order to practise the UX design process, some context had to be made up along the way (cafe wants to work with a mobile app, staff were able to update tables occupied etc). I was also not able to explore a wider range of ideas (outside of building an app) to better solve the main user problem.
-
Use components and variants as much as possible so that design changes can be made quickly after user testing.
-
Organise design files from the start so that design decisions can be presented well.
​
Following this project, I will keep in mind everything I learned to better solve real user problems in future case studies.