WEB DESIGN
Kinship Yoga
Responsive UX Design for a yoga studio with a focus on brand awareness.
ROLE
UX Researcher
UX/UI Designer
TOOLS
Figma
Miro
Maze
Optimal Workshop
DURATION
5 weeks
TLDR
THE NITTY GRITTY
Background
Kinship Yoga is a harmonious, friendly, and welcoming yoga studio in Highland Park, Los Angeles. It is focused on building a community that promotes growth, tolerance, self-awareness, and self-healing.
The website is built on Squarespace.
All class scheduling is done through a third-party website called MindBody which has limited options when it comes to design choices.
Problem
While Kinship’s physical studio reflects these values of community, growth, and tolerance, its website didn’t convey these. The site lacked a clear CTA, information architecture, and brand identity.
In addition, students are having trouble figuring out where to go on the site, in order to book a class - which is the main goal of the website.
Solutions
INCREASE VISIBILITY OF BOOKING CLASSES
Previously, the way students booked classes was going to schedule and booking from there. We wanted to increase the visibility of booking a class and maintain a clear CTA across all pages, whether viewed on mobile or desktop. The Book button is separate from the hamburger menu and is a clear CTA.
SIMPLIFY INFORMATION ARCHITECTURE
The navigation had 10 level-one options, causing users to feel overwhelmed trying to find what they were looking for. The solution was to narrow down the level one navigation and group navigation options together at the second level.
MATCH BRAND IDENTITY
The site wasn’t reflective of the airy, colorful space that the physical studio and its Instagram represent. It was important to make the website match the funky branding of the studio.
THE PROCESS PT. 1
Research
The project started with research to better understand what yogis prioritize on a studio’s website and what competitor sites are doing. This was accomplished through user interviews, participant observation, and secondary research.
Goals of the research:
Discover pain points of using Kinship’s current website
Understand the Kinship brand
Learn why and how people currently book yoga classes at a variety of studios
User Interviews
I interviewed 5 yogis to better understand why and how they book yoga classes. Unfortunately, I didn’t have access to any Kinship yoga students. I asked participants to screen share with me, visit the Kinship site, and complete a number of tasks.
5 yogis, between 20-45 years old
Book workout classes online regularly (min once a week)
About the Participants
What device do you normally use when booking?
What are your first impressions of the Kinship website?
Can you please walk me through the process of finding a yoga class you’d like to book?
Questions Asked
FINDINGS
Too many navigation options and they don’t know where to click first
Wouldn’t read the mission statement
Like the video on the landing page - gives a feel for the studio space
Primary Research
I conducted a site audit of kinshipyoga.com in order to determine what information Kinship currently has on its site and how it is organized and presented.
Key Takeaways
There is no clear CTA in the top navigation
Pages are text-heavy and lack hierarchy
The branding isn’t carried through the site
Secondary Research
I reviewed other yoga sites that the participants mentioned. This was done in order to determine what changes are possible within the constraints of the third-party scheduling site called MindBody.
Here is where you can see the MilaNote file.
Discoveries based on this research:
Most yoga studios include a Sign-Up button in the top right, so people can book immediately
MindBody allows you to do continuous scrolling so students can see future days without having to click a date on the calendar
Can do a two-week calendar view with MindBody, eliminating a step from Kinship’s current setup
THE PROCESS PT. 2
Ideation
After completing the research phase, I moved on to ideating solutions to the problems presented. This involved creating sitemaps, an impact/effort matrix, a user flow, and task flows. These provided clarity on what to focus on before starting to design.
Sitemaps
A barebones sitemap of the current SH Built site helped to visualize what the information architecture looks like as is.
From there, a sitemap was created for how I’d like to reorganize the SH Built site.
User Flow
By focusing on the minimum viable product, I was able to create a user flow for a user booking a class on the Kinship site. The user flow made it easier to see which key screens needed to be designed.
Task Flow
The task flows were created to narrow the scope of the project and show the most important screens that needed to be redesigned in order to fulfill users’ needs.
THE PROCESS PT. 3
Design
After ideating, I moved on to sketching and creating low-fi wireframes, focusing on mobile first. This was because, during user interviews, 5 out of 5 participants said they preferred booking yoga classes on their phones.
Lo-Fi Wireframe Preference Test
The low-fidelity wireframes were done as a way to see how the site will function, before spending time implementing UI elements.
A preference test was done at this stage to get users’ opinions on different iterations of key screens. The findings at this stage directly impacted the versions I decided to move forward with and ultimately, the final product.
Teachers Page
Users liked the constraints of the cards used in V2
User Quote- “I like the separation and spacing of V2 more. I also like the emphasis of the teacher’s names”
FINDINGS
Moved forward with Version 2
TAKEAWAY
FAQs Page
Users found V2 to be less text-heavy and easier to comprehend the information
User Quote- “I think it would be easier to find what I’m looking for on Version 2 of the page.”
FINDINGS
Moved forward with Version 2
TAKEAWAY
Visual Identity
The client shared two of their recent posters to use as inspiration for the brand identity of the website. Based on these, I created two style tiles that incorporate different versions of the common colors seen in the posters.
I presented these to the client along with a few key screens utilizing this UI, asking for their preference.
Inspiration from Client
Style Tiles
CLIENT QUOTES
“I know pinks and corals can be motivating and catch attention. But it feels a little intense.”
“[The green] has that feeling of renewal, soft and inviting. It’s calling to me.”
DECISION
Moved foward with V2
Testing and Iterating
THE PROCESS PT. 4
After gathering feedback from the key stakeholders on the lo-fi wireframes and style tiles, I implemented UI elements and created a working hi-fi prototype. Unmoderated usability tests were done at this stage. This provided important insights on what revisions needed to be made. Below are a few of the significant changes that were made.
New Student Information
Users want parking and pricing information on the New Students page
FINDINGS
Added an accordion of FAQs that new students are most interested in
Added CTA to sign up for the new student special pricing
REVISIONS
Making FAQs More Prominent
Users had trouble finding the FAQs Page nestled under The Studio
FINDINGS
Made FAQs page more prominent as a level one navigation option
REVISIONS
THE PROCESS PT. 5
Final Designs
YOU MADE IT THIS FAR!
Conclusion
After making many iterations on the final designs, I implemented the designs utilizing Squarespace. The client was very pleased with my design choices, thinks the new website conveys their luxury brand well, and we are expecting the new responsive website to bring in new client traffic.
Key Takeaways
This project was insightful and a great learning experience for me to work on client relations, balancing the needs of the users and clients while solving real issues. I also got to practice designing within tight constraints - time, third-party scheduling app, and website host. I loved coming up with solutions that both the client and I were excited about. In addition, I enjoyed the challenge of creating and implementing the brand identity of the studio.