PROJECT INFORMATION
CLIENT : Just Breathe Yoga Studio
TIME FRAME: 3 months
TOOLS: Sketch, Squarespace
ROLE: UX Researcher, UX Strategist, Interaction Designer, Visual designer
BACKGROUND
Just Breathe Yoga is located in the heart of Silicon Valley, and created for the hard working neighbors that need a place to escape to. They offer a friendly, nurturing and comfortable space for anyone and everyone to practice yoga.
ROLES & RESPONSIBILITIES
The goal for this project was to redesign the existing website of Just Breathe Yoga studio. I led the design of this website independently from user research to high fidelity prototype to developing it on squarespace. These roles included:
-
UX strategy
-
User research & analysis
-
User Flow & Stories
-
Persona creation
-
UI design & prototyping
-
Usability testing
OUTCOME
Re-designed website of Just Breathe Yoga studio on square space platform to provide a better user experience.
RESEARCH
STAKEHOLDER INTERVIEW
I met with the owner of Just Breathe Yoga studio and discussed the background of the studio, reviewing their current offerings, future goals, and our project goals. This gave me an understanding of who their website users are, and what purpose they have for the website.
​
My key takeaway was that the users have difficulty in signing in.
Just breathe yoga website is connected to mind body online website for all the payment procedure it have. Users log in twice- once on Just breathe yoga website and then on mind body online- as they get confused with the options provided.
USER INTERVIEW
I interviewed 10 users who took classes at the studio. While they had great feedback and insights into the studio, most didn’t use the website regularly, some hadn’t used it at all — so I went to plan B — asking people to visit the site, and give feedback on their initial reaction of the current look and feel, and their understanding of payment flow from the site.
KEY FINDINGS
Site menu is overwhelming and confusing. There is a lot of repeated content.
Current site issues
Current layout is dull with very less visuals.
Users doesn’t use the site much and go to mind body online directly.
New site expectations
Communicate to potential customers.
Make the sign in and payment procedures smooth
Make users stay on Just Breathe Yoga
website
PERSONA
Based on my research interviews, I created a primary user personas for the website redesign. Here are two of them- Andrea and Karl.
This really helped me focus on who would be looking at the website and visualize what they would need to find from visiting.
Need
I need to find an affordable yoga class.
I need to find a yoga class that fits my schedule.
I need to be able to register the classes without any hassle.
ANDREA, 32 years old
Andrea is a working professional and has always wanted to take fitness class after working hours. She doesn’t like surprises and would like to know about what to expect out of a class.
Goals
I want to take a fitness class in the evening.
I want to work out in a comfortable setting.
KARL, 44 years old
Karl is a working professional, father of two and has always wanted to take fitness class right after working hours. He doesn't like any confusing site and want a smooth navigation when browsing through a website.
View on current website
Dull to look at.
Confusing navigation.
ANALYSIS
COMPETITIVE ANALYSIS
To begin the process, I looked at competitor websites that offered yoga classes to compare their content and information hierarchy, reviewing what features they offered, and how information was displayed.
COMPETITIVE ANALYSIS FINDINGS
After analyzing the competitor websites, I reviewed all the current pages, listing content, repeated content and links between pages of Just Breathe Yoga website. This gave me an idea on how to better organize the pages, minimize the number of pages and delete duplicate content, and combine some content.
CURRENT WEBSITE
ANALYSIS FINDINGS
The current site was confusing, many users found it overwhelming and hard to navigate. After the discussion with the owner and reviewing the competitor websites, I planned to simplify the content, combine pages that could work together, and delete content that wasn’t serving a purpose.
I would do this by:
-
Reducing the main menu options.
-
Providing a Sign in button to the header and linking it to the payment website,i.e. Mindbody online.
-
Adding some colors to the website.
-
Adding the studio's story, owner's story, latest offers and events on the landing page.
-
Removing the drop down menu and providing horizontal menu on each page.
SITE MAP
Before exploring the solutions into visual layouts, I first streamlined the site map to align with the redesign. My focus was to highlight the sections of the site that prompts users to get involved. Creating a site map helped me break down the steps and site pages needed, and understand how user would use the website, and the decisions that needed to be made as they went through the process to make the payment.
Old sitemap of the website:
Changes I made to the website's
site map:
​
-
Reduced the menu to six options.
-
Added links to pages- Class schedule, workshops, new student offers, Owner's story and Studio's story.
-
Separate page for teacher training with showcasing the information regarding training.
-
Sign in button that will take you to the payment website. Earlier the sign in was confusing as users registered on both the websites,i.e, Just breathe yoga and mindbody online. I provided the link to register directly on mindbody online(It's compulsory for user to register on mindbody online, irrespective of whether they sign in on Just breathe yoga websigte)
-
Removed the drop down option and added horizontal menu on each page for the smooth access of pages.
-
Added the description of each course alongwith the buy button. This will make it easy fpr users to select what class they want.
-
Combined teacher's, Studio's and location's information.
New sitemap of the website:
DESIGN
SKETCHES
I began by sketching, and designing a nav bar and footer that were aligned. Getting quick drafts down, I jotted down some ideas for the home page and general content, then worked on the other sections of the site. During this process, I thought about how the layout and content could be structured to satisfy user and business goals.
WIREFRAMES
After testing the conceptual sketching with few users, i figured out that some core functionalities were not recognized by the them. So, I changed the layout of pages to make the website pretty straight forward. I designed the wireframes based on the feedback from user testing and below are the results.
UI DESIGN
After iterating the wireframes based on feedback from the users and the client, I moved to designing the UI. The final version was drafted keeping all the necessary functionalities. Color palette was taken keeping the owner's need in mind.
COLOR PALETTE
#6b4370
rgb(107, 67, 112)
#e6e4e7
rgb(230, 228, 231)
#030104
​rgb(3, 1, 4)
TYPOGRAPHY
Heading 1
Heading 2
Paragraph
Label & Call-to- action
BUTTONS
BUTTON
35px
19px
14px
16px
Poppins
Poppins
Poppins
Poppins
SIGN IN
ICONS
FINAL DESIGN
Using the UI kit, I designed and developed the final website on squarespace. My main focus was to make the landing page attractive and accessible. Adding the latest offers and workshops details to attract more users to visit the website.
Check the redesigned website here:
USER TESTING
TESTING
After developing the website on squarespace, I tested it with five users. Following are there views on new website
-
Attractive layout
-
Smooth navigation
-
Buttons linked to schedule page gave users quick access to the schedule.
-
Liked the horizontal menu on each page. It made users to move between pages effortless.
WHAT I LEARNED
During the 3 months of this project, I enjoyed very much because it was a product of my interest and was happy to solve problems that users were facing. Here are the insights that I got through this project:
​
1. Understanding the true user needs is important
When I first decided to do this project, I was making all sorts of assumptions. However, when I got to delve into user research, I found that the feedback that the users were giving were a little different than my assumption. While I was focused on the visual aspects of the problem, users focused on interaction between the elements. So, I made sure that all the elements in this website help users to achieve their needs and ease their frustration.
​
2. Communication with the client is most important
In order to have a successful project it is important to have a clear communication with the client. Timeline and needs of the client should be clearly defined. You should design by keeping client in loop in each step. Also, I had to learn to be more aware and open to constructive critique.