Finding the real
design question.
Reduce uncertainty around class choice while preserving the reflective character of the studio.
Sahebeh BabaeiProduct Designer
Service Design · 2023
Caffe Yoga
A calmer way to discover, understand and book a yoga practice.
RoleUX/UI Designer
StatusWebsite redesign
FocusWellness · Website Redesign · Service UX
A yoga studio website redesign focused on clarity, calm and a more direct route to relevant classes.
WellnessWebsite RedesignService UX
05 / Text Story
Caffe Yoga
Yoga Responsive Web Design Caffe yoga is a local yoga studio based in Tustin, California. Whose mission is to make yoga accessible to all. They need to improvise their website to make the booking class process easier for users and give them a better experience. For this project, our team crafted: Developed high-fidelity wireframes for the project. Created interactive click-through prototypes in parallel. Sample mockup of the design available for preview.
34 / Process Steps
How the work progressed
Show how the work moved from understanding the problem to refining the final direction.
- 01Duration
Whitin 3 Months
- 02Team
3 People
- 03Role
UX/UI Designer
- 04Tools
Figma, Figjam, Photoshop
06 / Text Story
Problem Statement
In its current state, Caffe Yoga’s website has an unengaging UI and important information - such as its mission, schedule, and class offerings - inaccessible, hidden, or poorly displayed, resulting in a subpar user experience for visitors. Information Architecture, UI, and Navigation need highly to be redesigned. Inconsistency in UI design / UI elements. User flows are not easy for the user. Interaction with the website is not user-friendly and in some situations confusing. Better UX Writing in some cases is highly recommended.
07 / Text Story
Goals
The goal is to improve the overall user experience of the website Smooth and convenient navigation Easy schedule filter Easy booking a class and add to the cart
08 / Image Showcase
Project Process
My team of 3 used the Double Diamond method, a flexible approach, based on Design Thinking. We didn't follow a linear path, bouncing between stages as the project evolved.
09 / Process Steps
How the work progressed
- 01Discover
- 02Define
- 03Develope
- 04Deliver
10 / Image Showcase
Heuristic Evaluation
Introduce what the viewer should notice in this image.
11 / Text Story
Competitive & Comparative Analysis
We conducted a competitive analysis of four websites with similar products, taking into account challenges, business objectives, and features. The results are summarized in the table below.
12 / Image Showcase
Comparative Analysis
What sets the competition apart? During our thorough analysis of the competitors, we identified key strengths in Caffe Yoga that distinguish them from other organizations. We aim to highlight these advantages, which include schedule , class booking , and workshop , to offset any minor drawbacks.
13 / Image Showcase
Competitive Analysis
What sets the website different? While analyzing competitor websites, we discovered the Caffe Yoga website lacked many features, and needs to improvement .
14 / Text Story
Top takeaway:
Streamlined Navigation Responsive Design Intuitive Class Filtering Social Proof and Testimonials High-quality Photo Streamlined Checkout Process Accessibility
15 / Text Story
Interview
"We conducted user interviews to better understand our users' values and experiences in booking yoga classes. These interviews with nine individuals provided valuable insights. Key takeaway : • Navigation bar: Information on different classes. • Navigation bar: Prices and styles of different classes. • Blog section: Educational videos and media. • Main page: Pictures and reviews of different classes. • Main page: Easy recognition of classes with packages and details. • Navigation bar or main page: Teacher training classes and their prices
17 / Image Showcase
Journey Map
We created a customer journey map to build a better understanding of how customers find and interact with the service and to discover opportunities for improvement. The map revealed many user problems and opportunities at the consideration and loyalty stages of the customer journey. Therefore, we paid special attention to these stages during the design process.
17 / Image Showcase
Persona
We analyze behavioral patterns and define user personas to make precise product design decisions based on researched data.
18 / Image Showcase
Story Board
19 / Image Showcase
User Flow
We created user and User flows to understand how users interact with the site. Here is Sara's journey to booking a yoga class set on a desktop.
20 / Image Showcase
Card Sorting
How do users think the website should be organized? To organize the website better, we asked 15 people to create their own categories through card sorting, improving navigation for quicker and easier access to desired information. Here's a sample of the open card sorting results!
21 / Text Story
Card Sorting top Takeaway:
Users should be able to find type of yoga classes and even be able to book them on the home page. The workshops and packages of the class should be available on the home page. Find schedule easily on the home page. Users should be able to see instructors and testimonials on the home page. Video Tutorials and media be categorized into Blog on the navigation.
22 / Image Showcase
Site Map
How did we design the information architecture? After analyzing competitors and sorting cards, we created a site map. Also, we added a profile and social media icon to the global bar
23 / Image Showcase
Sketches
We drew some sketches to layout my different ideas for Caffe Yoga features before spending a lot of time on the high-fidelity wireframes.
24 / Image Showcase
Mood Board
Finding a suitable UI design for Caffe yoga website The color palette we created was inspired by nature. Green and Brown are the most dominant colors in Yoga Website.
25 / Image Showcase
Ui Kit
Based on my mood board, we created our UI Kit, which was my style guide to create and design all my pages consistently.
26 / Image Showcase
Usability test and Iteration
This section commences by providing an in-depth overview of each page, followed by a detailed examination of the iterative process and the rationale behind the modifications made. These adjustments were driven by insights gleaned from rigorous usability testing.
27 / Image Showcase
A closer look
28 / Image Showcase
A closer look
29 / Image Showcase
Original vs. Redesigned
In this section, you'll discover our process of turning design concepts into practical solutions, all thanks to our user-centered approach and meticulous iterations.
30 / Image Showcase
High Fidelity Wireframes
31 / Image Showcase
Validation
32 / Text Story
Conclusion
following a two-month period of extensive user research, analysis, and redesign efforts, I successfully validated the assumptions and implemented changes. This validation was accomplished through usability testing of my clickable prototype with nine new users, yielding the following results: Accessibility to use filter of schedule: 7 out of 7 users effortlessly located it on the home screen within 5 seconds. Ability to booking a class and adding to the cart quickly : 7 out of 7 users smoothly booked a class with easy filtering. Ability to finding instructors: 6 out of 7 users quickly found the information they were seeking. Ability to find package: 7 out of 7 users were able to sort and select packages with ease. Navigation bar accessibility: 6 out of 7 users clicked "sign up" and found it to be a helpful feature. Notes: For future research, I intend to dedicate more time to collecting data on user preferences regarding contacting home professionals through calls and emails. Additionally, I aim to investigate how these preferences align with the business's perspective
33 / Text Story
What did I learned?
In my role as a problem solver, clear communication with clients and colleagues is vital, especially during project challenges. As a team member, I've embraced iterationsto tackle issues directly and adapt to changing client needs. Empathy has shown me the way in problem solving. Listening to user feedback helps create solutions that truly connect. I've realized that communication is crucial. Regular exchanges with clients and peers help us solve problems together.
Finding the real
DiscoverListen before deciding.UsersContextConstraints
From signals to
structure.
The redesign prioritises schedule comprehension, class context and a calmer visual hierarchy.
- 01Understand the context
- 02Map the experience
- 03Explore & prototype
- 04Evaluate & refine
Clarity is the
designed result.
A focused service journey designed to support confident class selection and booking.
“Make the next step feel obvious—without making the experience feel ordinary.”