Team
Jasper Ling (Me) & 4 Peers
My Roles
Lead UI Designer, UX Researcher
Tools & Skills
Figma, CX, UX & Ethnographic Research
Timeline
May - August 2023
My Contributions
Conducted user interviews, surveys, ethnography research and synthesized data to propose the feature design. As the lead designer, I designed the visual interface experience of the feature design in the wireframing, prototyping, and usability testing/validation processes.
Overview
Who is Tera's Bean?
Tera's Bean is a charming café nested in the heart of Brentwood, B.C. They are a warm and inviting café for customers to relax, unwind, and connect with others. The café staff are friendly, passionate about coffee, and enjoy sharing their knowledge on coffee.
Problem
Like many café spaces around Metro Vancouver, Tera's Bean often encounters an issue where students or other laptop-users would sit a table with their laptop, taking up the space for other customers and visitors. Some of those laptop-users would take up a 4-seater table for a singular laptop, causing other customers to stand around waiting for a table to open up, or leave the café all together.
Solution
Design an interactive Table Booking experience for customers to book certain spaces for a certain amount of time to allow the limited café space to be fair and accommodated for all customers.
Solution Overview
Find the Perfect Seat
The online booking system includes information such as a table’s seating capacity, environmental lighting, and charging outlets.
Find a Seat on the Go
In a hurry? You can access the same online booking system through the mobile app, on the go.
Walk-in and Check-in
Once you have completed a table booking, scan the QR code on the table's tablet display, and check-in.
Understanding Customer Needs
Client Interview & Employee Interviews
Our task was to design an interaction design solution for a local business here in Metro Vancouver.
To understand the direction of our interaction design solution, we first conducted a 1-hour interview and 2 hour work-flow observations with the owner Robert, and baristas to gain insight on pain points that they've encountered with customers. Here are some highlights of our interviews.
Ethnography Research Data & Café Observations
We wanted to understand who our customers were and understand their workflows with the environment. We conducted 2 ethnographic research sessions to observe customer interactions and workflows with their environment. 2 hours on a Thursday afternoon, and another 2 hour observation on a Saturday evening.
Thematic Analysis & Affinity Diagram
After our group discussion, we wanted to loosely focus on 2 areas: how customers interact within the cafe environment, and how customers interact with the menu and ordering process.
Discovering Opportunities
User Personas
At this stage, it was apparent that we had a lot of different routes in addressing customer needs, and so we created 3 personas for 3 different types of customers based off of we observed during our ethnography research. The 1st being a customer who wishes to understand and learn more of the offerings at the café, the 2nd being a customer who wishes to order and go quickly without waiting in lines, and the 3rd being a customer who wishes to work and study with her friends in the café.
These personas were incredibly helpful in helping direct our attention to different opportunities that would be presented to different types of customers and their own needs.
User Journey Mapping
After the user personas, we redirected our focus towards specifically a student's workflow with the café. As students, we felt that we could better empathize with them and identify a more deeper look into a design solution opportunity. We merged a bit of Bella Crocker's social needs, and combined it with Noah Osborne's persona into a new user journey map.
Our user journey map helped us identify key workflows in a student visiting Tera's Bean cafe. We identified 6 unique points in the workflow of arriving, viewing the menu, placing an order, finding a table, picking up the order, and then needing to charge their laptop.
Storyboarding
Using the 6 key points in Noah's workflow, we came up with 4 design solutions within the opportunities and scope of his pain points.
Redefined Design Focus on Seat Reservation
We saw the potential opportunity of reducing customer wait times in obtaining a seat, as often times, seats may be taken up by other users for prolonged periods of time, especially if its for studying or working.
"How might we design a seating system to reduce customer seating wait times, and provide a seamless experience for students and other customers who require specific seating preferences while working in the café environment."
This redefined design focus addresses key goals of enhancing the customer seating experience, reducing seating wait times, and increasing seating equity for all customers.
Developing our Solution
Participatory Workshop
To understand how to approach designing a seat reservation system, we conducted a participatory workshop session, involving 6 student participants, aged 18-24.
This workshop involved questionnaires, collaging brainstorm to understand ideal study spaces, and ranking ideal study spaces and where they would sit.
We chose these participants as we identified that most customers that studied or worked within the café was a student. This workshop was conducted over FigJam and Discord calls.
Final Design Focus
Our participatory workshop was a success, and we were confident to continue in this design direction. We went back to the drawing board and refined our final design focus.
"How might we integrate a system that enables students to discover a suitable study environment within the café that caters to their specific study space requirements, while ensuring seating equity for all customers?"
Low + Medium Fidelity Wireframes
As the design lead, I led the interface design and user experience of the desktop, mobile and tablet interfaces.
Using all the insights and research we gathered in understanding how to approach designing a table booking system, we designed 3 unique interfaces for our design solution.
Usability Testing the Low + Medium Fidelity Wireframes
Using the same participants in our Participatory Workshop, we validated our low + medium fidelity designs through 2 methods before moving towards our final designs: an observational session and interviews. Here are 2 major issues we uncovered, and how we solved it.
A/B Testing the High Fidelity Wireframes
After our usability testing of the low + medium fidelity wireframes, we wanted to conduct an A/B testing to address lesser known concerns that were raised. Here is 1 thing that piqued our interest.
Our Design Solution
Outcomes
Takeaways
This was a rigorous interaction design project that focused primarily on user research methods and rationale behind decision making. I am incredibly proud of what I created with my team, and believe that we created a great interactive design solution to help solve the seating issues within the café.
If I were to continue on this project, I would definitely love to flesh out the other wireframes of pages that we did not pursue as they were out of our scope at the time. This project enabled me to take the lead on the design direction and really practice and apply my UX research methodologies and process skills a lot more.
This academic project case study, last updated in 2023, was not designed for mobile and is best viewed on a desktop.