.midpoint
"How might we digitalize the café lounge's unique experience?"
A UX Case Study
Role:
UX/UI Designer
Branding
Team:
Solo Class Project
Timeline:
2 weeks
Tools:
Figma
Notion
Imagine: You are feeling exhausted from work. You need a break, a moment of peace, and a chance to relax before you head home. You start searching on your laptop for places to relax and have some quality food and drinks. You discover .midpoint café lounge and decide to explore their website. You find that this is the vibe you're looking for, and its just 2 blocks away!
.midpoint is a unique business in the market and currently does not have a website. In order to showcase their offerings and attract customers, they need a website. Customers need to be able to locate the business, find information on what the business offers to keep up with the digital world.
Creating a website can provide .midpoint with a platform to showcase their offerings, take orders, and market themselves, which in return can help expand their reach and attract and retain customers.
01
Empathize
Market Research
Competitive Analysis
User Interviews
Affinity Mapping
02
Define
User Personas
POV/HMW Statements
Goals & Objectives
03
Ideate
Prioritization Matrix
Information Architecture
User/Task Flows
Brainstorm Sketches
Low Fidelity Wireframes
UI Kit
High Fidelity Wireframes
04
Usability Testing
High Fidelity Prototype
Remote Usability Testing
Iterate
01 EMPATHIZE
Exploring what is already working and what needs improvement in the real world.
Understanding the hospitality industry and what customers expect
Research reveals that a strong online presence in the hospitality industry is essential to staying competitive.
Nowadays, café and lounges have become more than just a place to grab a quick coffee or cocktail. They have evolved into destinations for remote workers, social gatherings, and business meetings.
Customer satisfaction is heavily influenced through menu variety, the quality of food and drinks, good customer service, and the ambiance.
Strategic planning and differentiation through strength and weaknesses
From analyzing café and lounge websites, separately, I learned that each company provides high-quality customer experiences, however, their approach in delivering their services are unique.
USER INTERVIEWS
Interviews uncovered 3 key findings
In-depth user interviews were conducted virtually with 5 participants from around the world. Users were chosen based on the business' target audience.
1. Customers found reservations and online ordering to be extremely convenient while expressing a desire for an atmosphere that was not overcrowded.
2. Customers emphasized the importance of ambiance, menu items, and photos when choosing to visit a café or lounge.
3. Customers want general information about the café or lounge, such as opening hours and menu options, to be easily accessible.
AFFINITY MAPPING
Identifying and uncovering common themes and pain points
Following in-depth user interviews, I began creating an affinity map which helped me identify 7 common patterns.
1. Products
2. Information
3. Menu
4. Atmosphere/Comfort
5. Pricing
6. Customer Service
7. Motivations
02 DEFINE
USER PERSONAS
Creating personas based on research findings
3 personas encompassing target customers and their pain points
1. Appreciates a private space.
2. Enjoys relaxing and socializing with quality food and drinks.
3. Wants to easily access menu and facility information.
Opportunities
Establishing customer objectives through perspectives
To dive deeper into customer perspectives and initialize solution-thinking I generated POV and HMW statements. This involved customers wanting easy access to information and the facility.
POINT OF VIEW
Wants to find information about the cafe lounge before deciding to visit.
I want to be able to visit a cafe lounge’s website and discover new menu items.
I need to have access to seating availability before visiting a cafe lounge so that I can have the possibility of waiting or standing around.
HOW MIGHT WE
Design a simple website that provides easy access to accurate information about the cafe lounge, so that user can make informed decisions.
Make it easier for customers to discover new menu items on a cafe lounge’s website?
Reduce customer wait times at the cafe lounge?
GOALS & OBJECTIVES
Business vs. Customers needs
After establishing the POV and HMW statements, I took a step back to revisit the business goals with the co-owner.
We discovered that a lot of the user goals intersects into our business goals in developing a loyal customer base, which helped us further define our brand and values.
03 IDEATE
REVISITING
THE HMW
Brainstorming solutions
3 main solutions:
1. Simple intuitive design with important information on the homepage.
2. UX copy to help with easy comprehension and fast scanning.
3. Quick and easy live update reservations
PRIORITIZATION
MATRIX
What do I need to focus on first?
With so many ideas running through my mind, I knew I need to prioritize and make inform designs decisions. This was when a prioritization matrix became useful.
Due to time constraints, I decided to focus on the following:
1. Menu
2. Photos
3. Reservation
4. Pick-up ordering system
INFORMATION
ARCHITECTURE
What about the information?
To have a visual representation of the website's information, I utilized both the data discovered during user research, and solution ideas to develop the information architecture.
Main User Research wants:
1. Menu - photos and items
2. Facility information and photos
Solution Ideas:
1. Reservations
2. Pick-up Orders
USER AND TASK
FLOWS
Designing the flow from a first-time user perspective
With the information organized and structured, I created 2 flows:
Flow 1: Reserving a table at the lounge
Flow 2: Ordering a coffee for pick up
LOW FIDELITY WIREFRAMES
Designing the first solution
Then, I began to sketch design layouts of the following key screens based on the user and task flows:
1. Homepage
2. Reservation page
3. Pick-up order page
Following the sketches, I selected the best design, a design that provided a space for intuitive navigation, to digitalize into low fidelity wireframes.
UI KIT
Before adding the details into the design, I collaborated with the co-owner to design and develop the logo and brand color.
To ensure the color scheme meshes well all together on the page, we compared a few color combinations before finalizing our brand colors.
HIGH FIDELITY
WIREFRAMES
Designing the User Experience
With the UI Kit and design structure finalized, we began selecting high-definition images that best portrayed the brand, quality, and vision of our café lounge. To do this, we selected high-quality images that brought visual consistency, with quality food and drinks, clean space, and calm and relaxing lighting.
04 USABILITY TESTING
The
Experience
Now, does the final design meet user expectations and create a seamless user experience?
USABILITY
TESTING
Usability testing was conducted with 5 users located globally.
The goals was to create a user-friendly and straight forward experience for new and existing customers to explore and access information seamlessly and make orders and reservations.
THE RESULTS
All participants had no issues with finding the information they needed to complete the tasks. However, through observation 3/5 participants hesitated when ordering coffee for pick up. With further discussion, I was able to identify the problem.
1. Users did not know if their "add to cart" action was taken, which led them to not knowing how to proceed with the checkout process.
2. Users were confused if the indicated pick up time on the items page was the only option available.
Other issues that were raised aside from the task flows were:
1. Reservation page - Users did not know that there was an anchor menu. Once mentioned, they mentioned how it was helpful.
2. Homepage - The main detail card is too cramped and does not look proportionate.
ITERATE
Great! With the feedback from the usability testing, how can we further improve the user experience?
Following the usability testing, I was able to identify valuable improvement opportunities to enhance customer experience.
The homepage was iterated to be more concise and balanced. I utilized the Z-pattern mimicking the direction the human eye moves. This creates familiarity and comfortability, as the feeling of "unbalanced" and "cramped" were mentioned by users. I also added hover states to create human interaction with the website.
The changes here are subtle but will enhance the user experience. The main component here is animation and copy writing clarity. I removed the text and underlined the link so users can quickly identify those are anchor links.
On right, is a solution to create a flash animation indicating user has taken an action and it has been implemented.
05 REFLECTION
Next steps
If I had more time, I would explore interaction experiences with checking out, making reservations, and menu items.
