top of page
Real life.png
air.png
Untitled2.png

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. 

Highland Yoga Brief

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

Humaaans.png
  • 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

Cometitive Analysis.png

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

Additional Resources

Screen Shot 2021-06-12 at 11.18.36 AM.png

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?

Research Plan

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

Interview Script 

1-on-1 Interviews
 

Highland Yoga.png

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.

Highland Yoga- Empathy Map.jpg

Persona

To create the persona, I meshed the goals of the business (middle agers) as well as common information found throughout the user interviews.

Persona.png

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.

Sitemap - Frame 1 (1).jpg

Task Flow

Based on my user persona I created a task flow reflecting the flow Sarah would perform to book a class.

Task Flow - Frame 1 (1).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. 

User Flow - Frame 1 (1).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.

Scan.jpg
Scan 2.jpg
Scan 1.jpg
Scan 3.jpg

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. 

Highland Yoga (6).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.

Screen Shot 2021-08-13 at 9.48.26 AM.png

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

Desktop - 1.jpg

iPad

iPad 11 Pro.png

iPhone

X - 1.png

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.

Letter - 1.png

Prototyping

For this prototype I focused on Sarah's main flow of booking a class, checking out teachers and viewing locations. Hover, active, and loading states were included to make sure this higher fidelity prototype felt real to the testers.

Screen Shot 2021-06-12 at 6.25.11 PM (1).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

Usability test in action

Test findings

Highland Yoga (5).png

Affinity Map

Method

An affinity map helps designers sort, prioritize, and rank our user testing feedback

Participants comments were divided by fundamental elements. 

Highland Yoga- Affinity Map_edited.jpg

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

bottom of page