Old Town Yoga studio
UX/UI Design
A responsive website design that streamlines information architecture and improves visual design.
Overview
Old Town Yoga’s business is growing as it recently partnered with a climbing gym and is the only local yoga studio that offers an infrared sauna and massage services. This modernizing responsive upgrade is designed to help users purchase memberships to the studio and book yoga classes online.
Background
My Role: UX design, UI design, User Research
Target platforms: Desktop, iOS
Tools: Figma, Miro
Timeline: January 8th-February 4th
Old Town Yoga needs a responsive website update to keep up with the competition by attracting new members and selling yoga classes.
How might we make a first-time customer feel comfortable booking a class?
How might we support a user in choosing a membership?
Problem
Establish a consistent brand identity
Organize and streamline site architecture
Provide a seamless transition from web to mobile
Create a design that supports and integrates Mindbody software’s booking and checkout flows
Goals
The user
Based on user research, we’ve identified the target user as a beginner to intermediate yoga doer between the ages of 20 and 50 who do not currently belong to a yoga studio.
Name: Kinsey
Age: 27
Occupation: Server
Yoga level: Beginner/ Intermediate
Bio
Kinsey has been active all of her life. She used to play soccer in high school but now runs and hikes with her dog and follows at-home yoga videos on YouTube.
Mental health and feeling good in her body is more important to her than lifting a certain weight or looking a certain way, so her main focus is on building an “active lifestyle routine.”
Lately, she has been seeing ads for a free week trial at a local yoga studio pop up on her Instagram feed. She’s been getting better at yoga and is curious about joining a studio, but hesitant due to a bad experience with a hard-to-break membership at her last gym. Anyway, she sends her co-worker a link to sign up for the trial.
Pains
When everything can’t be done from the website
Inconvenient class times
Difficult cancellation policies
High costs for what you get
Vague descriptions
Wants/Needs
Free trial period
Intentional and inclusive community
Accessible hours
Tiered membership options
Special offers and deals
Helpful/knowledgeable instructors
Influence
Friends told her to join a specific gym because its cheap
Hears good things about yoga from friends and family
As a child, her mom signed her up for sports activities at the YMCA
Found out about a 5k race from a poster in a coffee shop
Behavioral tendencies
Clicks on ads with pretty graphics
Likes to plan ahead
Prefers to workout alone, but is motivated by accountability to others
Will look for additional information before making a commitment
Thoughts & feelings
Works out for stress relief and likes feeling strong
Intimidated by gym bros
Get annoyed when a lot of forms/steps are involved
Has a lot of questions before buying a membership or booking a class
Solutions
by use images of real customers and studio space, include testimonials, and clarifying the details of services and special offers
Increase transparency
by displaying multiple options to users with detailed descriptions and links to learn more
Provide information
by using images of real people of diverse backgrounds and levels of yoga experience, displaying a range of price options, and using casual, conversational language.
Foster inclusivity
Process
Step 1: Research
Step 2: Define goals
Step 3: Explore solutions
Step 4: Prototype
Step 5: Test and revise
Step 6: Reflect
Research
Competitive analysis
50%
of competitors use Mindbody software for booking classes.
Old Town Yoga (OTY) is one of several local yoga studios. We examined top competitor websites to determine industry standards for creating an account/signing in, booking a yoga class and purchasing a membership.
OTY was already using Mindbody, so this data validated the decision to integrate the software into the new design to provide a familiar experience for users when booking a fitness or wellness session.
Booking a class at FossYoga.com
Booking a class at Om AnandaYoga.com
Booking YogaPod.com
User Interviews
We want to know what users expect from the experience of booking a yoga class so that we understand what will encourage them to purchase a class and ultimately membership.
Research objectives
Understand what pains users about other yoga studios
Understand how users choose a studio/gym
Determine priorities
Learn what users expect from a yoga studio website
Understand what motivates someone to purchase a membership
Interviewees expressed feeling apprehensive about choosing a membership.
To find out, I conducted one-on-one interviews where I asked 5 participants to recall their experiences with joining a yoga studio or fitness gym and booking group classes online. Each interview lasted between 20 and 30 minutes and uncovered details about the following topics:
Background
Thoughts and feelings
Pains
Wants and needs
Q: Describe a time you visited a gym or yoga studios website.
A: First impression is everything. Seeing super buff men on the homepage is intimidating because that isn’t me.
Q: Tell me about a time you found out about a gym or yoga studio membership.
A: I was curious about it (a gym) so I went to the website and it said to call for rates, I didn’t enjoy that.
Q: Imagine you are visiting the website of a local gym; you see the option to buy a membership, what are you thinking/feeling?
A: I have a lot a questions; I want to see/feel the space, find out what all is included, and I’d be curious about cancellation.
The following needs emerged from this research:
Convenience
Membership options
Trial before purchase
Culture of Inclusivity and Community
Ability to book online
Persona “Kinsey” and our interviewees like to plan ahead, prefer detailed descriptions, need a visual representation of an inclusive community, are weary of difficult cancellation policies, and want to be able to accomplish “everything” from the website.
Key insights
The old Town Yoga customer experience must be, transparent, informative, and inclusive, to meet the needs of users like Kinsey. Before moving forward, I needed to define how transparency, information, and inclusivity would look as a user experience:
Transparent = real and honest
Informative = useful and detailed
Inclusivity = representative and welcoming
I held up any future decisions against these standards to ensure we met user needs.
Goals
Several attempts were made to discuss business goals with stakeholders, but each was unsuccessful. Consequently, the identified business goals result from competitor and secondary research.
Based on the research, users want a contactless experience when gathering information, booking classes, and exploring membership options. They also want the option of a low-commitment trial.
Exploration
Feature Roadmap
Insights from user interviews, competitive analysis, and secondary research informed the features necessary to meet user and business goals. Each feature was sorted by priority.
Snapshot of feature roadmap
01
Must haves
Account set up
Carousell of special offers
Site navigation
Class schedule
FAQ
Book a class/appointment
Checkout
Filter by (Time, class, instructor, and day)
Purchase a membership
Contact information
02
Nice to have
Testimonials
Map
Contact form
Social media links
Informative videos
Calendar syncing
03
Can come later
E-commerce
blog
Rewards tracking
Integrating Mindbody software into the website allowed for time to include some lower-priority features. The challenge was condensing navigation from 13 items to six. This required some reorganizing and prioritization.
Site Map
How might we speed up the process of finding a class to book?
This user flow exhibits ways a user might come to the website, arrive at the class schedule, and book a class. The homepage has multiple avenues for reaching the class schedule. User testing can validate which route users are more likely to choose.
User Flow
I explored the design patterns of competitor sites before designing screens for Old Town Yoga. I found several of them used Mindbody or another external business management software for booking, signing in, and making payments.
This meant that the look and feel of booking a class would be familiar to anyone who had visited a competitor’s website.
Priority screens
Homepage
Experiences: yoga
Rates and memberships
Visual Design
OTY has been a pillar in the local yoga community since 2005, so we wanted a brand that felt established.
The words welcoming, relaxed, grounded, and modern inspired the overall visual design.
Visual Design: Rebranding
Old town yoga recently redesigned its logo however, the green and purple gradient limited the design to neutral backgrounds and restricted the color palette. I removed the gradient to allow for more versatility and created variations that could be customized to the context. The color palette combines soft earth tones with strong black accents.
Visual Design: Logo
Original Logo design
Redesigned logo variations
Color variations
Usability tests were conducted to determine whether
Users can find and book a class (initiate Mindbody’s booking flow)
Users can find the necessary information to purchase a membership confidently.
Prototype: Usability testing
The prototype took users from the landing page to the start of Mindbody’s booking or checkout flow which was not included in usability testing to keep the user focused on what we designed rather than Mindbody as a product.
Demographic
Five participants between the ages of 20 and 32 with varying levels of yoga experience.
Methodology
Online: Users were given a high-fidelity prototype on Figma and were asked to complete 7 tasks. Interactions and responses were observed and recorded through the screen share feature on Zoom.
Findings
60% 3 of 5
Scrolled the entire home page before making any selections.
80% 4 of 5
Chose the most popular membership option.
100% 5 of 5
Chose “view schedule” to book a yoga class.
20% 1 of 5
Responded to the Hero subtext and CTA.
Prototype
Based on user research, I put together a high-fidelity prototype that was image driven, informative, and allowed users to sign up for classes or purchase memberships directly from the website.
Usability testing revealed the following areas of improvement.
Design iteration 1
Home page version 1
Membership page version 1
Homepage evolution
a gradient overlay was applied to increase CTA visibility, body text size increased, and button designs were updated.
Iteration 2
Despite the gradient overlay, the page header and CTA still seemed lost in the image. The solution was to introduce Parallax scrolling to allow for the text to be displayed on a neutral background. I also added a carousel of special offers.
Iteration 3
Home page version 2
Home page version 3 with parallax scrolling introduced
Test and Revise
Final Responsive Design: Priority screens
Key updates
Enhanced visibility of secondary buttons
Increased the sizes of body text
Established visual hierarchy on the landing page
Adjusted padding between elements
Home page responsive design
Yoga class schedule page responsive design
Rates page responsive design
Reflect
1. Design and test second-priority screens. These are the screens that are not directly a part of booking a class or buying a membership but could help users make their decisions.
about us
infrared sauna details
massage details
events
contact
e-commerce shop
2. Continue to reach out to the business owners to validate business goals.