untitled-project@2x (1).png

Be Cause Yoga

Be Cause Yoga is a donation-based yoga community that supports local causes in need.

 

Prototypes

DESKTOP

MOBILE

Duration

This project took about 2 1/2 weeks (roughly 100 hours) to complete.

My Role as Product Designer

  • Documenting business details and needs

  • Researching user needs

  • Creating a product that accomplished all needs

  • Testing product and revising product based on results

Tools

Figma, Survey Monkey, Whimsical, WebAIM, Maze

 OVERVIEW

 

Background

Be Cause Yoga, created by Kelly Roatch, is a donation-based yoga community-based in Austin, TX. All donations go to a local organization in need of support.

Kelly created Be Cause Yoga because she wants to give back to her community by teaching yoga as well as raising awareness for local organizations in need.

When Kelly shared her vision with me, I offered to help her by designing her website.

IMG-20210502-WA0001.jpg
 

Challenges

  • How do we help people remember us?

  • How do we get people to donate to a cause in need?

  • How do we get people to come to class?

Goals

  • Create a logo that highlights the business keywords: Surrender, Acceptance, Guidance

  • Create a responsive design that answers Who, What, Where, Why, and How Be Cause Yoga works

  • Create a way for users to book a class online

EMPATHIZE

Research Analysis

I started my competitor analysis by researching local donation-based yoga classes. I wanted to understand their designs as well as the impression their designs gave me. Black Swan Yoga is flashy, clean, and bold. It gave me the impression that they would be an intense hipster studio. My Vinyasa Practice gave me a more peaceful and spiritual impression. I also wanted to analyze how the user would learn more about the studio and how they would book a class.

I also wanted to analyze how indirect competitors’ design flow. YouTube would be a great resource for someone practicing remotely, however, it doesn’t offer a way to meet in person. Meetup shares local events, however, it doesn’t offer a personalized design for the group page.

To conclude, I pulled design inspiration from direct competitors. Black Swan Yoga offered an easy way to sign up for classes, while My Vinyasa Yoga shares more about the community and encourages a peaceful feeling.

 

CompetitorAnalysis (9).png

Provisional Personas

Frame 87.png

User Research

 

I conducted user research by creating a survey in Survey Monkey and posting it to Slack, LinkedIn, and personal chats.

My only prerequisite was that they are interested in yoga and/or donation-based classes.

I had the survey live for 1 day and attracted 5 participants.

 

User Research Results

 
100%.png
  • Say yoga nurtures their soul.

  • They want to learn about class discussions, sponsored causes, yoga tips, and motivations on blog.

  • Weather, noise, or prior obligations might keep people from attending class.

80%.png
  • Go to donation based yoga classes up to twice a week.

  • Want to learn more about where the donation goes online and in class.

60%.png
  • Go to donation based classes to support a cause.

  • Find classes by referral.

  • Looks on yoga organization’s website for class schedules and events.

  • Prefer to donate through a third party app.

  • Go to donation based classes because they’re on a budget.

  • Find classes on through internet search.

  • Looks on yoga organization’s website to learn about the organization and find out how much classes cost.

  • Prefer to donate in person with cash.

  • Interested in receiving monthly newsletters.

DEFINE

Design Process Timeline

Frame 82.png

Be Cause Yoga Persona

Meet Be Cause Yoga’s Persona, Brooklyn. I created her based on the user research results. She is a native Austinite that values kindness and well-being. She practices self-care and gives to those in need. As a teacher, she doesn’t have a high income, so she has to be frugal, resourceful, and creative. She turns to Be Cause Yoga to not only take care of herself but to also donate to the community's needs.

Persona.png

Empathy Map

I created an Empathy Map based on Brooklyn’s Persona. I wanted to highlight things she would say, do, think, or feel. I also wanted to highlight her goals and pain points. I planned to use these key elements to guide my design decisions. While conducting my research, I was surprised to find that people enjoyed going to donation-based classes to support the cause. I also found it helpful to see how many people would prefer to donate through an app and how many prefer cash donations in class.

Task Flow

My goal with designing this website is to have the user be able to find and book a class. I created this Task Flow to show how the user would accomplish the task. They would start on the Home Page and then navigate to the class schedule. Then they would book their preferred class. Once they are confirmed, they will have the option to add the class to their calendar.

Be Cause Yoga Task Flow.png

User Flow

I created a User Flow to show the decisions the user could make based on their dilemma. This shows the users’ actions due to their thought processes. I wanted to show the options the user has to navigate through my design.

 

IDEATE

Logo

Final (2).png

I researched yoga symbols. Several matched Be Cause Yoga’s inspirational words: gratitude, peace, acceptance, surrender

 

Sketchbook

I created several sketches for the logo in my sketchbook. The lotus flower symbolizes enlightenment. Hamsa hand offers protection. The sun symbolizes strength, the moon represents enlightenment and inner spirits, and the stars over guidance.

IMG_3355.jpeg

Digital

Then I digitized several versions of the two ideas. I was inspired by the lotus flower because it’s a symbol of spiritual awaking. I was also inspired by the moon, sun, and stars. The moon represents the inner spirit, the sun represents strength, and the stars represent guidance. I also felt that the type needed to have a soulful style.

Final Pick

Kelly picked the logo she preferred for Be Cause Yoga. Then I created 3 sizes to match the different devices it would show on. The biggest one is for desktops, the medium is for tablets, and the smallest one is for mobile.

Final (1).png

Responsive Wireframes

I created a responsive wireframe to show how the website’s home page would look on different devices. I started with the desktop, using 12 columns, and 32 px margins. Then I moved everything to a tablet with 8 columns, and 24 px margins. Last I moved everything to mobile with 4 columns and 16px margins.

Responsive Wireframes (1).png

Low Fidelity Wireframes

I designed pages for Home, About, Contact, and Schedule. The Home page shows an overview of Be Cause Yoga. The About page shares more about Kelly, Be Cause Yoga, and who the donations will help. The Contact page shares contact and location information. The Schedule page offers class details and options to book. I also designed how a user would complete the task of Booking a Class. Guest will input their name and email address. They will have the option to add events to their calendar. Option to close out of modals.

 

Desktop

Frame 85.png
 

Mobile

I started designing for desktop first then I designed for mobile. I made changes accordingly, like turning cards into carousels.

Frame 86.png

B R A N D C O L O R S

The color palette Kelly decided on for Be Cause Yoga is a dark purple and green. Green represents renewal. Purple represents wisdom. She chose these colors to represent what she hopes to inspire in others.

User Interface Kit

I created a UI kit to house design elements I used throughout my design.

  • Final Logo

  • Typography

  • Color palette

  • Dropdowns/Progress

  • Buttons/ Inputs/Links

  • Icons

UI Kit (9).png

High Fidelity Wireframes

I received feedback from my mentor that my design still felt more like a wireframe. I also presented my wireframes to a group critic and received feedback that they didn’t have a consistent layout through each page. After receiving feedback, I organized my design to clean it up and look more like a website.

 

Desktop

Frame 83.png
 

Mobile

I also created this wireframe to show how my design would appear on a mobile device. This version has carousels for the users to swipe through the cards and photos.

Frame 84.png

PROTOTYPES

Desktop

I created this prototype to show how the user would move through my design. I created different states of buttons and pages and then connected them together. I want the user to be able to book a class. I also wanted them to see all the pages I created.

Screen Shot 2021-06-25 at 3.24.44 PM.png

Mobile

I also created a prototype of mobile. I wanted to show how the user would move through my design on a mobile device. I also wanted them to be able to book a class.

 

Revised Prototypes

After receiving the usability testing results, I made priority revisions to match the feedback.

DESKTOP

MOBILE

 USABILITY TESTING

I conducted usability testing through Maze. I wanted to observe how users navigate through my design. I uploaded my Figma prototype, created tasks for users to accomplish, and asked 3 questions at the end. I shared the link to LinkedIn, Slack, and personal chats. I had the usability test up for a weekend and attracted 6 testers that completed the tasks and 5 of the 6 completed my questions.

2789972.png
 

Usability Testing Results

The insight I found was that the majority of participants responded the same.

 

Successful

2789890.png
  • 4 out of 5 say my design is easy to navigate.

  • 4 out of 5 would revisit this website based on design.

  • Call to Action pulled focus.

  • Intuitive layout for a workout sign-up.

Pain Points

2789987.png
  • Doesn’t like scrolling while signing up.

  • Wants to be able to sign up easily.

  • Doesn’t read directions thoroughly and needs simple directions.

Improvements

2789935.png
  • Make the cards smaller so they don’t have to scroll.

  • Make the hierarchy in the cards clearer.

  • Make the modals smaller and fixed.

  • Make the mobile margins 16px.

  • Write the testing directions as if the user has never touched a computer.

CONCLUSION

Reflection

I found that this process took longer than I had originally estimated. The parts that I needed to focus more time on were the hi-fi wireframes and the prototypes. My biggest challenge is my UI design. After receiving feedback, I was able to go back and organize the content to make it look clean and consistent. I learned that I need to be more aware of spacing and consistency. My proudest moments with this project are my prototypes and overall case study.

untitled-project@2x (1).png
2789946.png

Next Steps

  • Kelly is searching for a Developer to collaborate with.

  • I plan to hand off my design to the developer

  • I will continue to work closely with the team to make this vision come to life.

Previous
Previous

Evergreen

Next
Next

Bookey