Overview
Monday Night Yoga is a yoga collective with a mission to empower their environment through community focused affordable classes. This project was done in real time with the clients and the website is currently in the process of being developed.
Challenge
At present the only online presence has been meetup groups and social media platforms like Facebook and Instagram. They now want to have a website so they can keep track of their schedule of past and upcoming classes and events and have an online home to engage with their patrons.
Objective: Design responsive website and new branding
Role: UX Research, UI Design, Branding, Interaction Design
Duration: 80 hrs
Tools: Adobe XD, Illustrator, Photoshop
The Design Process
01. Research
The goal of this phase for me, was to learn about the yoga industry eco-system and to understand the user on a deeper level to gauge the emotional, social, and irrational drivers that may affect their behavior towards taking yoga classes.
Process: (i) Plan Research (ii) Conduct Market Research (iii) Synthesize Research Findings
Research Plan
To effectively conduct research I began by outlining a research plan.
Research Goals
1. Determine motivations, goals, needs, goals, pain points and ideal scenarios individuals have in regard to yoga classes online
2. Define characteristics of people who practice yoga
3. Define the general process of choosing a particular yoga class online
Methodologies
Secondary: Market research, Competitive analysis, Provisional personas
Primary: User interviews
Market Research
To understand the yoga industry and current market trends, threats and opportunities, I conducted market research.
Competitor Analysis
I identified competitors, both direct and indirect and others in the yoga industry, and looked at their approach to achieving similar goals and objectives.
Provisional Personas
Based on market research, I created three provisional personas to help identify and target our audience to conduct primary research.
User Interviews
I interviewed six participants about their experience with Monday Night Yoga and gained valuable insights into their goals, ideal scenarios and pain points. Interviewing long time patrons of the yoga collective helped me gather qualitative data to better define the challenges of the yoga collective.
Demographics
Number of Participants: 6
Ages: 25 - 60
Gender: 2 male, 4 female
Ethnicity: 5 Caucasian, 1 Indian
Employment: 5 Employed, 1 Self-Employed Business Owner
Relationship Status: 4 married, 1 in a relationship, 1 single
Synthesizing User Research
With all the observations, I needed a way to organize and analyze my research findings to enable me to extract user needs, motivations, frustrations, and goals.
Empathy Map
Based on interview findings, I created an empathy map to help understand the users and organize the research to design a user focused product.
User Persona
Based on the primary research findings I created a fictional but realistic representation of our key target demographic.
02. Define
During the Define phase, I worked on making sense of the data collected during research. Insights from research help define the problem from the user’s point of view.
Process: (i) Define Problem from Users perspective (ii) Define the Product Goals
Defining the Problem
Once I completed the research phase, I needed to frame the problem from the users perspective.
POV Statements & HMW Questions
To define the problems and frame them from the user’s perspective, I created Point-of-view (POV) statements for each insight and need pairing from my Empathy Map. I then framed a question for each POV statement to solve this problem for the user.
Define Product Goals
After better understanding the yoga market in Cleveland, I worked with the business owners to further identify the product goals. During this stage of the project the project it was important to to see how different stakeholder goals aligned.
Brain storming
I began the process by first brainstorming using the mind-mapping method to identify as many possible solutions for each HMW question. I then spoke to the owners of this organization in detail and shared my research findings and the user goals from the empathy research.
PRODUCT GOALS
We were then able to define the business goals taking into account logistical considerations. This helped us identify necessary overall goals and common goals of the project.
03. Ideate
The goal for this phase of the project was to ideate and strategize on the product features and pages to include on the website. I worked closely with the business owners to provide solutions that aligned with their overall vision for the organization.
Process: (i) Prioritize Product Features (ii) Build Information Architecture (iii) Understand Interactions (iii) Wireframes
Prioritize Product Features
Once I had an understanding of the market, and defined the goals of the product based on the problems it needed to solve for the users, I began thinking about the key features the product would need to include to achieve those goals.
Feature Roadmap
I created a roadmap of features that would be ideal for the website to have and ranked them based on need and budget allowance defined by the business owners.
Information Architecture
Once I had a foundation of features that would be included, it was time to start thinking about how these features would be organized on the website.
Sitemap
I laid the foundational blocks to the website by creating a sitemap to include proposed features and pages.
Interaction Design
The next step involved working out how a user would navigate and interact with these different features and pages.
Product Requirements
To best identify how the user would interact with the website, I created different scenarios and tasks for the user persona to achieve.
Task Flow
Focusing on the key the objective of the company to help users to learn yoga from them, I created scenarios to simplify these processes on the website for the user.
User Flow
To fine tune the key processes on the website, I created a user flow taking into account the decisions the user will consider while navigating through the website.
04. Validate
Once I had strategized on potential solutions with the business owners, I needed to validate the product. I began by creating a prototype, developing a testing plan and then proceeded to test the prototype keeping in mind it was not fully functioning. Although this is the final phase in our design process, the results from this process will help validate our product before developing the final product.
Process: (i) Prototype (ii) Plan & Conduct Usability Test (iii) Synthesize Usability Test Findings (iv) Apply Revisions
Prototype
During the Prototype phase I built a scaled-down version of the website. Prototyping reduces the amount of UX friction, eliminates errors, and uncovers mistakes and false assumptions, all while saving time, money, and resources.
Early Sketches
At this point, I had a pretty good understanding of the all the elements involved on the website, so I began laying them out visually. Sketching as a first step to work out possible layouts always helps save time later on in the digital process. I then digitized the wireframes to serve as blueprint for the website interface without any branding or UI elements to best test usability without additional distractions.
Usability Test
I was excited and nervous to test the prototype. Especially because i was testing the mid-fidelity version of the prototype. It was great seeing how users interacted with the product and see how all the work in developing this product had come together.
Usability Test Plan
The testing plan outlined objectives, methodologies, participants recruitment plan and tasks to serve as a rubric during testing sessions.
Test Goal
Make website usable
Make website useful
Ensure efficient user experience
Test Subject
Mid-fidelity prototype of MNYoga website
Tasks
Task 1. Learn about MNY teachers
Task 2. Find a yoga class
Task 3. Find free yoga videos
Test Methodology
Moderated remote usability testing using the thinking aloud method conducted via Zoom video call.
Synthesizing Test Findings
Once the usability test was complete, I needed to analyze the results to make any final changes to UI before moving to the development stage.
Test Findings
It was definitely promising that al participants were able to complete the tasks, however, as expected there was room for improvement.
Participants
No-of participants: 4
3 Female, 1 male
2 Indian American, 2 Caucasian
Ages: 30 - 40
Essential qualification: Has experience with yoga websites
Recruited from network of MNYoga students
Test Completion Rate
100% completion rate for all 3 tasks
Error Completion Rate
98%
Common errors not counting errors that are due to the limited nature of the prototype
Affinity Map
I then organized user testing observations by theme categories, insights and developed recommendations ranked by priority based on budget and scope of project.
Brand Identity Design
I always enjoy developing the look and feel of a brand. I worked closely with the business owners to create a logo and custom icons and illustrations which are some of my favorite things to do in a design process.
Branding - Moodboard
I began the branding process by first listing the brand attributes based on primary and secondary research. Based on the key words we identified and grouped inspirational visual assets. I then sketched out various options for the logo.
Branding - Logo
I created a few logo options to share with the business owners. We all thought option 3 would work best balancing scalability as well as the idea behind night yoga classes.
Branding - Style Tile
I then created a visual brand guideline to be followed as a standard for the rest of the website development process. Custom icons and illustrations were created.
Applying Test Findings
In the case of this particular prototype there were minimal changes. The Main changes involved communicating what type of content on the website was free and what was paid content. After applying the UI elements and the revisions based on the usability test, I had a functioning prototype and the business owners were super happy. We are currently working on shipping this project. Yay!
Priority Revisions
Leveraging the visual guidelines and wireframes, we created the responsive high-fidelity responsive website design for Monday Night Yoga. Based on valuable insights from testing and prioritizing recommendations, I revised our mid-fidelity mockups and prototypes to include the UI elements that were approved by the business owners.
Concluding Thoughts
In creating the branding and layout for the website of a local business I learned the following:
1. Managing expectations of business owners. Working towards achieving the business goals and vision in the allotted time is always a challenging yet rewarding experience.
2. Primary research is easier with niche businesses. It was easy to find engaged participants for interviews due to the local and targeted nature of this business.
3. Integrating add-on tools can be clunky. While adding payment or scheduling tools to a website, users sometimes get taken to an external website. This can be a clunky experience. It is important to keep the user informed of external links so for a more seamless user experience.
