At a Glance

Caffe Yoga, a unique studio in Orange County, provides a welcoming, home-like atmosphere. In recent years, due to increased demand, it has focused on improving customer bookings through a seamless, user-friendly website experience.

Our team made a focused effort to redesign the website, concentrating on improving its information architecture. We developed high-fidelity wireframes, refining each screen to create a smooth click-through prototype.

Project Overview

• The Caffe Yoga website struggled to clearly present the studio's services and offered a complicated booking process across various sections. To improve engagement, stakeholders saw the need for a modern, inviting website that would better reflect the studio's brand and deliver an improved user experience for booking classes.

Problem statement

• Redesign the Caffe Yoga website to increase user enthusiasm for registration.

• Organize content more effectively, making it easier for users to find information about classes, pricing, and instructors while ensuring smooth navigation.

Task

• Overhaul the information architecture by focusing on the booking process through the class menu and enhancing the visual design to create a more user-friendly interface.

My Role

UX/UI Designer

Team


Group of Three

Tools


Figma . Photoshop . Zoom

Duration


1 months / Part time

Goals

Design Process

Our team of three followed the Double Diamond framework, based on Design Thinking methodology. The process was non-linear, as we often revisited and iterated between stages throughout the project's progression.

1

2

3

4

Discover

Our research enables us to go beyond users' immediate frustrations, allowing us to analyze their hopes, fears, abilities, limitations, reasoning, and goals. From these insights, we can later develop solutions grounded in a comprehensive understanding of their needs.

Research method

1. Heuristic Evaluation

2. Competitive Analyses

3. Interview & Affinity Diagram

Heuristic Evaluation

In the initial phase of the redesign, our team of four conducted a heuristic evaluation of the website to identify key issues and gain insight into areas to focus on during user research.

The website's design and content were outdated, and several usability issues were identified.

What did we find?

What can we do?

1. DeCreate a well-structured information architecture to ensure a seamless and intuitive user experience.

2. Redesign the hero section to maintain visual balance and ensure relevant and visually appealing imagery.

3. Implement a consistent icon set, aligning iconography with user expectations for better clarity.

4. Incorporate visuals and bullet points to break up long text, enhancing readability and engagement.

5. Develop a cohesive UI kit and apply it across the entire site to ensure uniformity and strengthen the brand connection.

1. Users experienced difficulty navigating the site.
   (Efficiency of use and system status)

2. Misalignment and imbalance between the hero image and text compromised the visual experience.
   (Aesthetic and minimalist design)

3. Icons lacked consistency with user expectations.
   (System status and recognition)

4. Overly text-heavy pages with long line lengths made readability difficult.
   (Aesthetic and minimalist design)

5. Inconsistent layouts across different pages disrupted the user experience.
   (Design continuity and standards)

Examples of issues found on the old website.

Competitive Analyses

We conducted thorough research on potential competitors, reviewing four websites that are similar to "Caffe Yoga" and specifically target the yoga community.

As we analyzed competitor websites, we discovered that the "Caffe Yoga" site lacked several key features. This comparison helped us identify the strengths of competitor offerings and uncover both threats and opportunities for improvement.

Threats:

Opportunities:

• Competitors offer better navigation, leading to a potential reduction in members.

• The lack of accessibility features limits Caffe Yoga's audience.

• Improving navigation can help Caffe Yoga stand out from competitors.

• Simplifying content can attract users frustrated by text-heavy sites.

Competitive Analysis table

Interview & Affinity Diagram

• The classroom environment should be clean and calming.

• Coaches' information is important for establishing their professionalism.

• Clear schedules and class information facilitate quick decision-making.

We identified potential users and conducted research by asking targeted questions to reveal hidden insights. Through interviews with 14 participants, we gained a deeper understanding of their pain points.

Top insight

Based on the study, we identified three key priorities that are important to our potential users, which we will focus on at this stage:

Affinity Diagram categories

These insights will guide our efforts to enhance the user experience at Caffe Yoga.

Define

Persona

To define design tasks and effectively communicate the user insights gathered during research, we developed a persona and scenario. This ensured a consistent approach among team members throughout the project.

Who is the user of Caffe Yoga website?

Representation of the target audience according to our research

Story Board

What has been the persona’s journey?

User Flow

Next, we designed a user flow to map out the steps our persona would take to complete the task, providing us with a clear structure for the design process.

What steps does our persona go through?

User Flow diagram

Site Map

How did we design the information architecture?

In the final step of defining the project, we used our research findings, along with multiple iterations with the team and target users, to create the site map.

Sitemap diagram

Sitemap diagram

Develop

Sketch

We hand-sketched low-fidelity wireframes to visually outline our ideas, which helped the design process and improved communication within the team during the early stages.

How did we start our ideation?

Some Sketches from our team

To improve efficiency and ensure the design is better aligned with user needs, we decided to conduct multiple testing stages during the wireframe phase prior to applying the UI Kit.
This approach helped us refine the design early on and avoid delays by reducing the need for revisions after implementing colors and images. Below are some key changes that were made during this process.

Wireframe Usability Testing

What did our stockholders & users think?

1- Navigation Bar

We initially developed the navigation bar based on research insights. However, after multiple discussions with stakeholders and revisiting the research, we have made the following changes;

• The "About Us" content was covered through the "Our Studio" and "Who We Are?" sections.

• Delete "Program" and add its drop-down menu to the nav bar as "Class" and "Schedule".

• For quick access, we placed the "Contact" info in a narrow bar at the top of the home page.

2- "Book a Class" button

Initially, we prioritized access to the class page by placing the "Class button" in the hero section.
However, after two rounds of testing, we discovered that users preferred accessing it via the navigation bar.

3- Our Studio

Based on stakeholder feedback and users' preferences, we concluded that a video showcasing the studio’s environment and facilities would have a greater impact on brand recognition and building user trust compared to a series of photos.

4- Our Instructor

Based on user priorities, the team decided to move the instructor section higher on the homepage to make it easier to find.

Classes

1- Progress Bar

During testing, we noticed that users needed to know their progress and upcoming steps in the class booking process. To address this, we added a progress bar to keep users informed at every stage.

2- layout

To improve the user experience, we shifted from a grid layout with brief text to a vertical list featuring expanded class descriptions. This change offers more information at a glance, making it easier for users to read, compare, and select classes efficiently.

Class Description

1- 3 Key Class Aspects

In the second iteration, we found that repositioning three key aspects of the class improved users' ability to quickly scan the information, reducing the need for lengthy reading.

2- Booking Panel

The booking panel was reviewed multiple times. At one point, we updated the design to a dynamic panel where users can select available and booked classes on the calendar by choosing a coach's name.

Later, we noticed that users had trouble returning to
the classes page, so we changed the "Book" button
to "Confirm" and added an "Add More Class" button next to it.

Shopping Basket

1- Session Display (A/B Testing)

The small table in version A, showing the number of remaining sessions from the selected package, led to user errors. During an A/B test, version B without a table was preferred.

Registration

Required Information

At the request of the stakeholder, we needed to collect more information from users in this section, particularly details that could be useful in case of an emergency. Therefore, we reviewed other similar sites and decided to add emergency contact information to this section.

Payment

1- Confirmation

In the confirmation section, the large information boxes for selected classes and packages caused users to lose focus and scroll more. To improve the user experience, we placed the selected classes and packages side by side.

Homepage

After several rounds of iteration with input from the team, stakeholders, and target users, we finalized the design. Their feedback guided us in revising the pages, allowing us to move forward to the final step.

After finishing our research, we pinpointed the main challenges users were experiencing and addressed them through thoughtful design solutions.
The before-and-after images show how our design evolved to solve these issues.

Challenges & Solutions

What design decisions did we make?

Deliver

Since one of the primary issues with the old site was the inconsistency across pages and sections, the team decided early on to steadily develop a mood board, considering the calm nature of
the business.

UI KIT

Mood-board

The contrast between the pages' and buttons' foreground and background color was tested using color blindness simulators to ensure accessibility and readability for all users.

UI Design Approach

Color Accessibility

Hero Area

We iterated several times on the hero area while applying the UI kit. After reviewing feedback, we aimed to maximize its impact on the project's goals and ultimately chose the final version, which introduces the studio with several photos.

Logo

Based on our research and stakeholder input, we redesigned the studio logo to align with the new website’s visual identity, adding a calm, personal touch with a hand-drawn meditation figure and soft script font. The final version refines this with a minimalist yoga pose, emphasizing clarity, peacefulness, and modern elegance.

Iteration

After applying the UI Kit, we worked closely with our team and stakeholders to quickly make improvements through several iterations. Even with limited time for full user testing, we were able to enhance the user experience that some of them shown below. We understand that testing and refining is an ongoing process.

The Calm-Inspired Mood Board

Drawing inspiration from the mood board and focusing on technical aspects, we began using a UI Kit. This approach allowed us to create a cohesive and balanced user interface, which will also streamline the design of additional components in the future.

The Caffe Yoga Website UI Kit

Accessibility Test Result

Some iteration of the Hero Area

We provided feedback to help finalize a suitable Logo

High fidelity Prototype

Let’s take a quick look at our final high-fidelity designs, now complete with colors and images!

Note: We used high-quality unreal images for a better visual display.

Here you can view the final prototype on Figma.

Reflection

What did I learn?

• I learned how to effectively evaluate an existing website and lead a team to address specific design challenges.

• I realized that gaining a deep understanding of the business and considering the stakeholder's perspective early in the process significantly improves research and results in a more effective and cohesive design.

What can we do next?

• We plan to conduct several usability tests to improve the flow of the booking process through class for users.

• Given the importance of the coach from the users' perspective, and following the stakeholder's request, we will take on a new task to redesign the booking through the instructor menu.

• We will reexamine the color accessibility of the buttons, particularly the secondary ones, to ensure they are accessible for users with vision impairments.