High
Land Yoga
scroll
About
I was asked to design a website for a travel venture. Through research, UX best practices and User testing I created a responsive website that would tap into a new way of traveling.
Task
With a total of 289 destinations around the world Zeit has created a safe and secure way to travel back in time to controlled and protected areas. Features like allowing travelers to access attractions and nearby cities with groups makes trips unforgettable. Zeit is the first company to sell time travel packages.
Background
01
About
I was asked by the owner of Highland Yoga to rebrand and find a way to help customers book a class with ease and less friction to increase sales. Through research, UX best practices and User testing I created a responsive website that would convey Highland Yogas brand and increasing sale by creating a more intuitive site.
Request
Highland Yoga is a Hot Power Vinyasa yoga studio based in Atlanta, Ga. Having launched as a single location in 2015 by Owner/Operator Elspeth Brotherton, Highland Yoga now has multiple studios, with a 5th studio opening up in the beginning of June. Brotherton’s primary focus is on community, as she explained: “Our students are our number one priority, and we want our studios to feel like your home away from home where you can step away from your busy life, become completely immersed in the present moment, and connect to yourself on a deeper level.”
Background
01
Deliverables
UX | Responsive Website
-
Book a class
-
Check out teachers at the studio
-
See locations
02
UI | Rebrand
-
Simple
-
Calming
-
Intuitive
Research
03
Competitor Analysis
Method
-
Research 5 fitness websites
-
Analyze strengths, weaknesses and target personas
Findings
-
Most fitness sites were very poorly designed
-
Creating a brand that carried on to a website was critical in trusting a site.
-
Book a class CTA needs to be prominent and in multiple places
The image above represents the 5 competitors used for the competitive analysis. 3 (Bring It Om, Yonder Yoga and Exhale) are Highland Yoga's direct competitors and 2 ( Y7 and Orange Theory) are indirect competitors
Card Sorting
Method
-
10 participants
-
20 cards
-
Open sort
Findings
-
70% of participants grouped class packages into a major category
-
70% of participants grouped About Us, Covid 19 Safety, Teachers Bio and bio into a category
-
With 50% of participants adding on Teacher Training into that category
-
-
80% of participants grouped sweaters, shirts, gift cards and an e-book into a group
This chart show strong pairing cards and potential groupings. For each pair of cards, the intersecting cell shows the percentage of participants who grouped these cards together.
User Interviews
Method
-
1 on 1 interviews
-
5 Participants
-
Ages: 28-32
General Questions
-
What are their motivations for yoga?
-
What kind of experiences are they looking for?
-
What are some pain points in finding a yoga studio?
-
What is the customer looking for when going on the website?
-
What website do consumers use to book a class (online/ on an app/ in studio)?
-
Are there things that the consumer likes/dislikes about the website?
Findings
-
5 out of 5 participants expressed an importance of ease of navigation when visiting the highland yoga website or a fitness website
-
3 out of 5 participants said that the booking process left them frustrated
-
5 out of 5 participants said that booking a class was there main purpose of visiting the Highland Yoga website
Above is the compiled notes with final conclusion found during the interview process
Define
04
Empathy Map
Method
Created by Dave Gray as a collaborative tool, an empathy map is used to gain deeper insight into their customers. Much like a user persona, an empathy map can represent a group of users, such as a customer segment. I took my interview notes and broke down ever comment into doing, think & feeling, seeing, hearing, pains and gains.
Findings
In processing user interview information users mostly thought about the process of actually attending a class through and through. There was a lot of thoughts about what the class will be like and similarly feeling of insecurity about not know what they are about to attend. Users want a site built to respond to how they feel about the proccess of booking a class.
Persona
To create the persona, I meshed the goals of the business (middle agers) as well as common information found throughout the user interviews.
Design
05
Site Map
A site map is a list of pages of a web site within a domain. Pages that I found were important were teachers bio page, location page and a booking a class page.
.jpg)
Task Flow
Based on my user persona I created a task flow reflecting the flow Sarah would perform to book a class.
.jpg)
User Flow
A user flow is a map of how users can move through the product to accomplish their goals. It outlines all possible scenarios, options, errors, dependencies, and outcomes. It also takes into account Persona needs and context. The flow below is how I perceived the user would move through Highland Yoga.
.jpg)
Sketches
These sketches are the base of the final product. They focused on what the user needed. I sketch out some rough low -fidelity wireframes which you can view below.
Low Fidelity Wireframes
Low fidelity wireframes brings my sketches to life. This is where I really start editing my design to ensure the needs of the user are meet.
.png)
High Fidelity Wireframes
After creating an initial wireframe which got approved. We moved onto creating a high-fidelity wireframe which included adding the color theme, images, and text.
Responsive Wireframes
Responsive wireframes are dynamic, so they require less effort to introduce changes. They are also very important as they give a dynamic view from desktop to mobile device. Below are examples (from left to right) of a Desktop, Ipad and Iphone view of Highland Yoga's website.
Desktop
iPad
iPhone
UI Kit
When creating the UI kit I chose a calming palette with green and a pop of fuchsia. The typeface Lato and Raleway which are both clean and easy to read.
The logo itself is a lotus is a symbol of purity, enlightenment, self-regeneration and rebirth.
.png)
Test
06
Usability Testing
Method
-
Maze.co
-
12 participants
-
Late 20s - Early 50s
-
Have used a fitness website before
-
Key Findings
-
( 6/11 ) Participants stated that they ran into no significant roadblock
-
( 7/11 ) Participants found the website visually appealing
-
( 3/11 ) Participants suggested a better calendar display
.png)
Affinity Map
Method
An affinity map helps designers sort, prioritize, and rank our user testing feedback
Participants comments were divided by fundamental elements.
Take Aways
06
Summary
Overall this project was a great way to begin seeing design in real life. I enjoyed working with the owner and working through the problems she has been facing. I would say the most valuable part of this process would be usability testing. Though nothing dramatic came up using tools like Maze really showed me how important usability can be.
Next Steps
-
Implement priority iterations:
-
Enlarge paragraph font throughout site so its more accessible
-
Rework calendar on booking page to make look less overwhelming
-
Add a feature section in location page so users can find teachers from the location page
-
-
Areas to consider for the future:
-
Design and Test chat bot to answers users questions within seconds
-
Plan usability tests for calendar
-