About The Redesign Of Yoga With Deni Website

Yoga with Deni is a cozy yoga studio nestled in the heart of Wantage, London, offering small, intimate yoga classes. This case study explores the process of redesigning the Yoga with Deni website, focusing on enhancing user experience (UX) through improved information architecture, user-friendly flow, and user interface design.

"Sound On Please"

Problem Statment

Problem Statement

The existing Yoga with Deni website was outdated, lacked a user-friendly interface, and had issues with its information architecture. This made it difficult for potential clients to access essential information and book classes efficiently.

Design Goal

• Improve Information Architecture

• Smooth Booking

• Enhance User Experience:

• Increase Class Bookings

Opportunity

Redesigning the Yoga with Deni website is a great chance to make it match the studio's welcoming atmosphere, engage more users, and attract a broader audience of yoga enthusiasts in Wantage, London. This transformation will create a valuable online space, promoting a sense of community and trust among current and potential clients.

Duration

3 Weeks

Team

Group of 2

My Role

UX researcher

UI Designer

Tools

Figma, Maze

Design Process and Descover

Design Process

In redesigning the website, we followed the Double Diamond design process, which involved four key phases: Discover, Define, Develop, and Deliver. This method allowed us to thoroughly research user needs, define clear goals, develop user-friendly solutions, and ultimately deliver a well-crafted, visually appealing website aligned with the studio's values.

Competitive analysis

In the project's early stages, we focused on a comprehensive competitive analysis of similar websites to gather valuable insights that guided our design decisions. This analysis helped us identify critical challenges and informed our design process for the Yoga with Deni website.

Major Competitive Analysis Takeaway

• All of them have a class tab that makes finding or booking a class or flow easier.

• They used proper images from classes but there was no video for the instructor's introduction.

• Some of them had a long drop-down for their navigation bar.

• Most of them have unnecessary information on the home page which distracts users.

Heuristic Evaluation

The next step was to evaluate the website from top to bottom, searching for mistakes and exploring options for redesigning it. Click here and try it out.

• Interview

• Heuristic evaluation

• Competitive analysis

• Persona

• Site Map

• User Flow

• Wireframes

• Iteration

• Usability Test

• Wireframe

• prototype

Consistency and Standards

The home page navbar deviates from standard design conventions, introducing an unusual and potentially confusing layout. Inconsistency in tab placement, especially with the "Login" icon under the "Home" tab, can hinder user expectations and navigation predictability. Strive for a more conventional structure to enhance user familiarity and usability.

Consistency in Typography

The font choices on the site, mixing Futura and Arial, along with inconsistent font sizes in headings and the body text create a lack of uniformity.

Visibility of System Status

When booking a class, the website transitions to another page, but it's not clear that you've moved to a different site. This lack of indication can confuse users about their current location.

User Control and Freedom

After transitioning to another website for booking a class, there's no clear way to return to the home page or previous page. The absence of a navigation option creates frustration for users who wish to go back.

Recognition Rather Than Recall

Users are required to recall class names from the main webpage when booking on the new website, additionally, the split layout on the booking page, separating class names and dates from type and pricing, leads to confusion.

Define

Persona

Following comprehensive user research and consideration of their needs, we have created a persona that illustrates the objectives and difficulties of our users.

User Flow

We have gone through the process of booking a session on the Yoga With Deni website, so you can now observe the user flow of this task.

Develope

Mood board

Mid-Fidelity Wireframes

We have improved our design through user feedback and testing. We started iterations with mid-fidelity wireframes to save time and energy.

Iterations

We had several iterations after getting feedback and doing usability tests with Maze.

Redesign Pages

The original pages of Caffe Yoga can be seen in this section, along with the redesign's iterations and modifications.

Nav Bar and Hero Section

Calendar and Booking

Classes Cards

Before

UI Kit

Home Page

Class Page

Event Page

Home Page Iteration

After

Values and Vision

Before

After

Before

After

Before

After

Deliver

Hi-Fidelity Wireframes

After multiple iterations, we arrived at the final versions of the wireframes.

Home Page

Once a Month Event

Class Page

About Me

Payment Page

Contact Me & Sign Up

Solution

• What I have learned from this project?
  
  I realized how iterations and feedback could raise the quality of a product.

  This project has highlighted how important it is to collaborate with team members.

• What is the next step?

  Redesigning other pages of the website.

  Adding reviews and testimonials to first page.