Usability testing and solutions for local bakery “Breka”
This project has become my favourite proof of the existence of designer’s bias, and how important it is to empty ourselves, and actively listen to the users’ voice. By observing how the users interact with the site, they always tell us the most straight-forward solutions of how we should improve the site design.
In this project, we have modeled assumptions, derived hypotheses, developed tools to screen participants, created test tasks, and analyzed users’ behaviors. The whole process helped us prove or disapprove our hypotheses, then reached the possible solutions.
This was covered in the “UX UI Strategy 2” courses in our New Media Design and Web Development Program in BCIT.
Key Skills
- Project management
- Usability Testing
- Hi-fidelity wireframes
My Takeaway
“Empty designer bias, humbly listen to user's voice.”
Company
Local bakery Breka
* The project is a self-initiated spec work and not affiliated with the Breka business.
Total Hours
12 hours
Project dates
Feb 20, 2024 - Apr 9, 2024
Role
- UX Project Lead
Contributors
- Researcher, UXUI Designer - Benito, Kreesha
- Researcher - Buitrago Rico, Gabriela
- Researcher, UXUI Designer - Kim, Yooran
- Researcher, UXUI Designer - Low, Janine
Technical Info
- Figma (high-fidelity prototyping)
- Google Sheets & Docs (for data analysis and team collaboration)
- Google Drive (for project files management)
- Zoom recording (for recordings of user testing)
- Canva
Project Goals
- To use the modified Lean UX approach for usability testing of the Breka website: develop a set of assessment tools and evaluate the site; and produce a set of recommendations for improvements with hi-fidelity wireframes.
The Process
This project has become my favourite proof of the existence of designer’s bias, and how important it is to empty ourself, and actively listen to the users’ voice. By observing how the users actually interact with the site, they always tell us the most straight-forward solutions of how we should improve the site design.
In this project, we have developed tools to screen participants, create test tasks, and analyze users’ behaviors. The whole process helps us prove or disapprove our hypotheses, and reach the possible solutions.
This large project was covered in the “UX UI Strategy 2” courses in our New Media Design and Web Development Program in BCIT.
Identifying business problems
Seeking to solve potential business problem is always the foundation of why we should do UX research. The Lean UX research method was a pragmatically and cost-effective way to quickly gather honest feedback from end users.
We first started by observing what obstacles the current business encountered; if it is already thriving, in what way we can expand their business. Breka was a thriving local bakery loved by the community. Their stores were always crowded. Patronage was very fast. Meanwhile we can identify 3 ways the business may elevate to the next level:
Situation 1. As observed, not many people mobile ordering and pick up at site, compared to the long queue in store.
Situation 2. People are unaware of catering services and new products provided by Breka.
Situation 3. People are unaware of different locations of Breka cafes.
Hence, we model assumptions about the participants, and came up with these hypothesis:
Hypothesis 1: We believe higher conversion rate from people who are looking for catering services would be achieved if pricing information is more accessible on website; and accessible from Mobile app.
Hypothesis 2: We believe higher conversion rate from people casually browsing would be achieved if new pastries or seasonal items are promoted on their website and mobile app.
Hypothesis 3: We believe the current location information confuses customers and causes them to navigate away the site or dismiss as an option.
Preparation of Assessment Tools
Screening Participants
We had developed 16 screening questions to screen out the best candidate for the user testing. We then inputted the screening questions into Google Form, and let the participants fill them out. Then we analyzed which participants had the most relevant experience of the test tasks, and cherry-picked those as our user test candidates.
Designing task cards
We had developed 3 test tasks corresponds to the 3 hypotheses: to understand participants’ decision process of whether to hire Breka for Catering; to understand their journey of buying a cake for a family member who has preference of getting new seasonal products; and to observe how they interact with the website when they need to where branches of Breka Cafes are.
User Testing & Analyzing results
Recording users' journeys
Each test was moderated and carried out on Zoom with the participants’ screens and facial expression being recorded. Moderator of each test stayed neutral and guided the users to complete the tasks without influencing them with bias.
Analyzing using Rainbow Sheet
Then, 2 researchers other than the moderator would make observation of the test recordings and marked down their observation notes on the “Rainbow sheet”. Similar observation would be placed in the same entry and filled with colors. Observations that has longer colored bar is considered commonly observed and analyzed.
SUS score survey
After the moderated tests, participants were also asked to fill out a System Usability Scale (SUS) score questionnaire, where we would find out how they think about the user-friendliness of the website.
Prototyping the solutions
Completely different user journery for finding catering
We have found out that users show a completely different user journey when researching about Catering services than what we thought they would! We originally thought it might be helpful to include “pricing information” to help their decision making, but it turned out to be completely different. Users expect to click “order online” to browse and choose pastries they like, add to cart, and then decide whether they want to choose Breka for catering. The decision process for Catering and Order online is combined. There in our solution, we recommended to add new options for Catering in the order online check out page.
Users left site for Google Maps
In their search for Breka’s branches, just as we imagined, all users left the site and jumped to Google Maps to complete the journey. They were trying to look for some page called “Location” to find that piece of information but in vain. The existing Breka site has all the addresses shown in the footer, without any map to help. Therefore in our solution, we recommended to introduce a new page called “Location” with a google map showing all branches of Breka.
Users suggesting "Featured & New" section
As for new product, despite our hypothesis is indeterminate, some users expressed that they thought there should be a new product section on the menu page instead of the existing blank "Featured & New” section. Therefore we also include that in our solution.
