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.
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.
Provisional Personas
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
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.
Go to donation based yoga classes up to twice a week.
Want to learn more about where the donation goes online and in class.
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
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.
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.
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
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.
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.
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.
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
Mobile
I started designing for desktop first then I designed for mobile. I made changes accordingly, like turning cards into carousels.
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
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
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.
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.
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.
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.
Usability Testing Results
The insight I found was that the majority of participants responded the same.
Successful
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
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
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.
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.