Connecting yogis together to grow at both an individual and community level through classes, challenges, events, and simply sharing the yogi's fitness journey
mobile app • health and fitness • event booking and social media
Overview
RESPONSIBILITIES
Project Management
Research
Design
Prototyping
Usability Testing
TOOLS
Miro
Zoom
Google Docs/Sheets
Photoshop/Illustrator
Figma
INTRODUCTION
COVID-19 caused many yogis to become socially disconnected. This negatively affected their yoga practice. The goal of the project was to find a solution to improve those social connections and their fitness journey at the same time.
PROJECT TYPE
Capstone 1 of Springboard's UI/UX Design program
TIMELINE
Oct 2020 - Mar 2021
01
Discover
METHODS
Competitive Analysis
1-on-1 Interviews
Affinity Maps
Empathy Maps
SUMMARY
I approached the secondary research phase with 2 topics of focus in mind: Growth and Community. I explored existing tools for tracking fitness (both yoga-specific and general fitness tools). I also noted the amount of focus each tool placed on social connection.
For the primary research phase I interviewed 5 yogis of different backgrounds and levels of yoga experiences. I explored how their practice was affected by COVID-19 and the impact that social connection had on their practice.
SECONDARY RESEARCH
Yoga Apps
I analyzed current yoga-related tools and found that most apps focus on providing classes and exercises. Yet they had little to no focus on tracking progress or building community (despite many descriptions containing phrases like “join a community of 100,000 yogis”). Only one app, YogaTrail, had features to build community and connect students with teachers through scheduling and booking local classes and events.
Other Fitness Apps
Many health and fitness apps have a way to record various statistics of the user’s workout, such as heartrate, distance, route, reps, duration, etc. Ways to join challenges and track achievements to encourage activity through gamification are also common. Additionally, some apps contain social features, like sharing posts with friends and various groups focused around a specific topic.
Click / tap image to magnify
Literature
In addition to competitive analysis, I also researched publications about the relationship between community and an individual's yoga practice. While these articles explain the benefits of community in yoga well, they do not offer many practical suggestions on how to actually access or build a sense of community in yoga, especially not digitally. At most, using Facebook and social media hashtags are all that are mentioned.
-
Yoga Journal: How Yoga Fosters Real Community + Relationships in a Digital World
-
Do You Yoga: Why Having A Yoga Community Is Important
INTERVIEWS
Participants
The 5 people that I interviewed had diverse backgrounds and relationships with yoga, including:
-
experience level (beginner students to experienced instructors)
-
total years of practice
-
frequency of practice before / during COVID-19
-
method of practice (in-studio, remote livestream, pre-recorded workout)
-
social involvement
Goals
The key points I wanted to explore during the interviews:
-
How has COVID-19 affected their personal practice?
-
How has COVID-19 affected their connection to their yoga community?
-
What are their motivations and challenges in practicing yoga during times of social distancing?
“It was nice when everyone had their cameras on. It felt like people were actually communal, like we were all doing something together. It felt a little closer to like being in-studio.”
Mimi N, student
“Being around people that want to be practicing, it energizes you to practice, and then you feel like you’re feeding into it as well.”
Val P, instructor
AFFINITY MAP
Click / tap image to magnify
My findings from the interviews were compiled into an affinity map, in which all the thoughts, comments and insights were grouped into similar ideas. This made it easy to find groups that overlapped. From this map I drew these key takeaways:
Tools to encourage, motivate, and reward activities (especially when visual) can be very effective, because they provide a sense of productivity and accomplishment.
Yoga can be practiced in various forms, with different structures and methods, all with their own advantages.
Yoga-related events allow for both personal growth and opportunities to socialize.
Being around other yogis is very motivating for practice.
The relationship between teacher and student is very powerful.
“Working with my yoga teacher mentor on a 1-to-1 perspective helps me stay motivated in my own yoga journey. ”
Drea A, instructor
EMPATHY MAPS
I used the insights drawn from the affinity map to create empathy maps. I focused on 3 main types of yogis based on experience level (Beginner, Intermediate and Advanced/Instructor). This allowed me to capture the different needs and challenges that those types of yogis have.
These maps helped me empathize with a broader range of yogis beyond the 5 interview participants. I was later able to translate the maps into 3 distinct personas.
Click / tap image to magnify
02.0
Design
METHODS
Personas
User Stories
User Flows
Sketching
Wireframing
SUMMARY
After synthesizing all the information gathered from research, I defined the main problems and challenges and established the primary users of the final product. I then ideated solutions in low fidelity and designed for later testing.
PROBLEM STATEMENT
How might we help yogis build growth in their practice and their community together virtually?
Pains
Lack of tools for tracking growth
Social disconnection
Gains
Build growth in personal practice
Build social connections and community
PERSONAS
I translated the 3 users explored in the empathy maps easily into 3 distinct personas with varying levels of fitness, goals and challenges. Keeping these users in mind helped ensure that every decision made in the design process moving forward was intended to reduce their pain points and help them achieve their goals.
Click / tap image to magnify
USER STORIES
I grouped all of the possible/relevant actions that a user could take into 3 categories (Student, Teacher and General actions). I then broke them down to the most atomic level using Epics, starting with the phrase, "As a [user type] I want to..." to specify the need and ending with, "...so I can..." to specify the goal.
This minute level of detail allowed me to easily see each step in the user's journey to achieve a specific goal. This would also help in creating the user flows below.
Click / tap image to magnify
USER FLOWS
I used the epics from the user stories to compile a flow chart to visually show the steps that users take to complete their goals. While the actions were still color-coordinated by user type, this visualization helped me to see that the actions could also clearly be grouped into similar categories of actions. I also defined the MVP features and added them to the chart here after the Red Routes were established below.
Click / tap image to magnify
RED ROUTES
I plotted the main flows onto a chart to visualize how often each action would be taken and by how many users. This helped determine every action's importance and therefore which features should have the most focus during the design process.
Click / tap image to magnify
Click / tap image to magnify
I defined 4 flows as the red routes of the project based on (1) how frequently they would be taken by many of the users and (2) how much impact the flows had in the growth of the user's (a) yoga practice and (b) connection to community. I also broken down 3 of the routes even further into 2 flows by user type (the student's flow and the teacher's flow).
-
participating in / hosting a yoga challenge
-
taking / teaching a private yoga session
-
taking / teaching a group yoga class
-
interacting with a group
IDEATION SKETCHES
From the chosen red routes, solutions for 7 important screens were explored through quick rough sketches. Each screen had between 3-12 different versions, depending on its complexity:
-
Social News Feed (Home)
-
New Post to Feed
-
Explore
-
Challenge Info
-
User Profile
-
Other Person's Profile
-
Challenge List (in the Profile)
WIREFRAMING
Many more ideas were explored in this phase, with some screens having up to 6 different variations. Some of these ideations included:
-
Number of icons on the bottom navigation bar
-
Alignment of the Profile header
-
Position of category icons and activity card layouts of user profiles
-
Grid layouts of user profile media galleries
-
Initial alternative states, such as for search results and uploading photos
During this process, some ideas and flows were also dismissed, lowered in priority or were combined with other ideas, such as:
-
Groups were de-prioritized due to time and their affect on only community goals, as opposed to both the yoga and community goals of the other 3 red routes.
-
Workshops were combined with classes/events due to similarity (users can name an activity as a workshop if they wish to specify).
03.0
Validate
METHODS
Rapid Prototyping
Guerilla Usability Testing
SUMMARY
I created a rough prototype for usability testing to see if the designs were on the right track while the project was still in its early stages. Conducting tests while the designs were still low in fidelity helped reduce attachment to ideas. They also allowed for major changes and quick iterations if they were found to be necessary.
LOW-FIDELITY USABILITY TESTING
Participants
Due to the COVID-19 pandemic, I conducted guerilla usability testing remotely through video chat with 5 participants. None of them considered themselves yogis (though this could also be expected from regular in-person guerilla testing, since participants are not screened as optimal users). However, some of the participants for this testing were familiar with fitness apps. Most of them were also familiar with social media patterns, and all had moderate to advanced knowledge of general technology.
Goals
-
Test effectiveness of the design in achieving the following red routes (through specific tasks):
-
Take a live group class.
-
Take a private session.
-
Participate in a challenge.
-
-
Get general opinions on a number of different screens and elements, some of which had numerous variations and some that were more complicated and could potentially be problematic:
-
User Profile
-
Other Person's Profile
-
Explore
-
Bottom Navigation Bar
-
Key Findings
Red Route Tasks
-
The flow to find and take a live group class was effective, presenting zero troubles for the participants.
-
Booking a private session can use further refinement.
-
The "Join" button on the Challenge screen was difficult to find, preventing most users from completing the scenario task to participate in a challenge.
-
Many users intuitively attempted to use the search bar (which had not yet been fleshed out in the prototype), indicating its potential importance.
General Opinions
-
The majority of participants were drawn to the center-aligned profile header, due to its evocation of the yogic theme of being balanced and centered.
-
Giving the user control of the layout of their grid was suggested, allowing for a compromise of both uniform and non-uniform layouts.
-
Navigation of both the profile screen and the overall app still had a lot of room for ideation.
-
Many participants wanted to see a schedule or calendar of activities.
02.1
Design
METHODS
Wireframing
Brand Platform
Moodboard
Style Guide
High-Fidelity Mockups
SUMMARY
Utilizing the cycle of iteration, I incorporated the key findings from guerilla testing into a second batch of wireframe designs. I then created a brand platform along with a moodboard and style guide to prepare for the high-fidelity mockup phase.
MORE WIREFRAMING
Ideation and iteration continued for many screens and elements, such as the top header, the Challenge screen and the flow to book a private session.
I incorporated one major idea of an Activities screen to provide users with a calendar schedule of all their current activities on a single screen. This screen replaced the News Feed as the new "home" screen. I also gave the screen its own icon in the bottom navigation bar. This brought the number of primary navigational icons to 4. The 4-icon navigation bar provided quick access to the most important screens without crowding the bar.
Additionally, more alternative and empty states were explored and added in this phase.
BRAND PLATFORM
the name
MOVE TOGETHER
The name "Move Together" is simple, un-complicated and clearly states the idea of the product at a glance. 1 of the 2 pillars of the app is about fitness. “Movement” describes this without being too specific, so there is room for expansion beyond just yoga. This word is also neutral in energy. It could refer to any kind of movement, ranging from restorative yoga to high impact cardio training. Another definition of “move” is also to “inspire” emotionally. I believe inspiration is an important feeling to promote in a fitness community.
Lastly, “together” invokes that sense of community and connection. It creates a call to action to not just “move”, but to move with others. Fitness is a journey that can be both individual yet also unifying.
Brand Personality and Attributes
Calm • Uplifting • Inspiring • Kind • Inclusive
Move Together has calming and non-aggressive energy, yet inspires and encourages activity. It is also light, colorful and friendly to reflect openness and welcoming of many different kinds of people, no matter their background or where they are in their fitness journey.
This personality further expresses the focus on both the fitness journey and on people. It still has its roots in yoga, which is thought to be calming and stress-releasing. Yet it still promotes activity through connecting people with kindness and inclusivity.
MOODBOARD
The brand platform helped me develop a general visual theme for the product, focusing especially on the feeling of calm, friendliness and diversity. I decided on a large color palette of soft pastels, white negative space, circular UI elements and rounded corners. Images of smiling, diverse people working out, hanging out or relaxing, as well as plants and wide open spaces of nature were also gathered for inspiration.
Click / tap image to magnify
STYLE GUIDE
I then translated the visual feelings and inspirations from the moodboard into a full style guide to instruct the visual direction of the brand. It also helped develop practical UI elements to use in the upcoming high-fidelity mockups.
The logo included both a wordmark and an icon, a modified infinity loop to inspire movement and togetherness.
Yet, due to its thin lines I understood that it would not work at a small scale. The focus of the project was not logo creation, and I knew that the logo would not be used very often (if at all) in the product itself.
So I included a compact logo using letters from the wordmark to save time, rather than designing a completely different logo icon.
The color palette was a major focus for the project, using a total of 6 base colors as an expression of inclusivity. I chose yellow as the primary brand color. Due to its soft yet lively energy, it encourages positive activity in a non-aggressive way. All 6 base colors each had an additional 6 variations. They went through many iterations throughout the high-fidelity design phase to improve accessibility.
Using these colors was part of a self-imposed challenge to make a large color palette work.
Again following inspirations from the brand platform, I chose the fonts and iconography with regard to simplicity, clarity and friendliness.
HIGH-FIDELITY MOCKUPS
Version 1
The style guide informed many visual design decisions throughout the high-fidelity mockups, such as the white negative space and rounded shapes. I converted the icons, buttons and other elements in the style guide directly into master components for quick and easy access.
One of the major points of focus was the colors. I coordinated them with specific screens, such as primary colors for the main navigation screens on the bottom bar.
I also coordinated the colors with specific screens depending on activity types (red for classes, green for challenges, blue for events).
In both the Activities and the User Profile screens, I color-coded the content cards depending on whether the user was participating in that activity as a student (warm colors) or as an instructor (cool colors). I also reflected each card's color in the calendar.
03.1
Validate
METHODS
Prototyping
Moderated Usability Testing
SUMMARY
I created a prototype from the high-fidelity mockups for the next round of usability testing. While the major flows were already tested earlier with wireframes, the Activities screen and calendar were still untested. The effectiveness of the large color palette was also a large unknown. I compiled the test results into a table with issues ranked by severity and recommended solutions.
HIGH-FIDELITY USABILITY TESTING
Round 1
Participants
Again due to COVID-19, I conducted usability testing remotely through video chat. I recruited 4 yogis (2 male and 2 female) with diverse backgrounds, experience levels and frequency of practice. They were also familiar with common social media patterns.
Goals
-
Test effectiveness of the design in achieving the following red routes (through specific tasks):
-
Take a live group class.
-
Take a private session.
-
Participate in a challenge.
-
-
Test effectiveness of these descriptive icons (through general app use):
-
Lightning bolt for Activities
-
Graduation cap for Participating
-
Sun for Teaching/Hosting
-
-
Test effectiveness and gauge general opinion of the large color palette
I ranked the issues from the usability tests by a severity scale and compiled them into a table with recommended solutions.
Click / tap image to magnify
“I wanted to check my calendar to see if I had anything else booked, but I don't know if I know how... I don't think I knew that I was teaching at that time.”
Mimi N, student
“The colors are hard for me, because there are so many of them, [and] to scan through [the Activities screen] is a bit overwhelming [with information].”
Kushal P, instructor
Key Findings
-
Activities screen had the most issues:
-
Content was unclear as to whether they were already booked by the user or were new options
-
Overwhelming with info and difficult to scan
-
Colors were confusing
-
-
Iconography was often unclear or not even noticed, especially lightning bolt, graduation cap and sun icons
-
Private Session, Group Class, Challenge pages needed minor refinement for better clarity and discoverability
02.2
Design
METHODS
High-Fidelity Mockups
SUMMARY
After solutions were ideated for the issues found during the usability testing, I incorporated them into a second round of iteration for the high-fidelity mockups.
HIGH-FIDELITY MOCKUPS
Version 2
The large color palette was a clear road block in the first iteration. Instead of removing colors from the palette, I reduced where they were used by making all of the primary screens yellow. This change served to reinforce the brand color while retaining the expression of diversity.
Making the primary screens yellow also improved the color-coordination and recognition of the different activity types. I changed the content cards in the Activities and the User Profile screens to match the color of each activity's respective detail screens (red for group classes, orange for private sessions, green for challenges, blue for events). I updated the colors in the calendar to match. I also adjusted the content of the cards for better visual hierarchy and scannability to reduce mental load.
I added a "dashboard" of stats to the top of the Activities screen. It also doubled as quick category filters for better navigation.
I also replaced or added text labels to many icons for better clarity.
03.2
Validate
METHODS
Prototyping
Moderated Usability Testing
SUMMARY
I updated the prototype with the second iteration of high-fidelity mockups for usability testing. I compiled the results again into a table for easy viewing of the issues and their recommended solutions.
HIGH-FIDELITY USABILITY TESTING
Round 2
Participants
I recruited 5 yogis (1 male and 4 female) for this final round of remotely moderated usability testing. Same as the previous round, participants had a diverse background and relationship with yoga.
Goals
-
Test effectiveness of the design in achieving the following red routes (through specific tasks):
-
Take a live group class.
-
Take a private session.
-
Participate in a challenge.
-
-
Test effectiveness of the changes / text label additions to the icons
-
Test effectiveness of changes to color
-
Gauge general opinion on visual hierarchy of activity content cards
Again I ranked the issues from the usability tests by a severity scale and compiled them into a table with recommended solutions.
Click / tap image to magnify
“I did notice [the icons], but I didn't realize that that meant that's what she was teaching... The graduation cap makes sense now, [but] I'm not really sure what the sun icon would be. I naturally associate that with brightness.”
Ashley C, instructor
Key Findings
-
Many changes from the previous iteration were highly successful:
-
Color re-coordination
-
Addition of dashboard to Activities screen
-
Replacement / addition of text labels to icons
-
Other minor refinements
-
-
Activity cards can still use more refinement for better clarity of which activities the user is participating as a student versus as an instructor
-
Calendar’s day tab needs activity indicators like the other tabs
-
Some icon buttons (filter, graduation cap and sun) still need to be replaced in some places for more clarity / better discoverability
“I love yoga. I love sharing it with my friends, and so to be able to have an app like this where it's easy to do challenges to keep each other accountable... Having this where I can, now with COVID and everything, I could have different Zoom classes to invite my friends to.”
Alex P, student
Final Takeaways
As this was my first major project for Springboard, I definitely learned a lot more than I can list out here. In particular, this project helped me develop my inter-personal communication skills during my interviews and usability tests. I learned to be careful about asking leading questions. I practiced being as neutral as possible in my speech and body language to avoid influencing participants in any direction.
I also found that affinity maps helped me organize and synthesize the information gathered from interviews. Such large quantities of info would otherwise have been overwhelming. It is a method that I will may rely on often in the future.
Lastly, challenging myself with such a large color palette was fun but difficult. One of the most common feedback I received from usability testers was that they liked the colors and that they were fun and calming. Yet, after those initial impressions, it was clear that the colors caused usability issues. It was important for me to use the large palette to express the brand attribute of inclusivity. However, usability testing reinforced the idea that function was much more important than form. Using colors strategically can have a big impact on usability while still maintaining consistency with the visual theme.
NEXT STEPS
Since this project was part of Springboard's UI/UX design course, I was not instructed to continue past the second round of usability testing. If I were to continue, my next step would be to incorporate my latest test findings into another iteration of high-fidelity mockups. I would test the resulting prototype again for usability, and so on.
Fixing the latest issues and continuing to work on overall refinement are a given. Additionally, my next major focus would be to explore solutions to address safety / privacy concerns across the entirety of the app. Because instructors would potentially serve as "influencers" on the platform, some of them could have thousands of followers who know their schedule. As a yoga instructor myself, privacy / safety concerns were always in the back of my mind since the beginning of the project. Because I was being instructed to focus only on the red routes, I did not implement solutions for those concerns. Yet, if this were a real product, I believe it would be extremely important to address them from the very beginning.
“I do think that as a teacher myself I probably would be a little concerned about publicly showing where I was, just because you don't know who's following you... I would want the ability to control at least who sees what events I'm going to.”
Chrissy B, instructor
Some possible solutions include: giving users more control over who can see their activities and posts and who can direct message them. Features like private groups could also help (Instagram's "Close Friends" feature was referenced by one of the usability testers).
Additionally, I would also begin adding other features that were considered at the beginning of the project (ex. pre-recorded videos, goal tracker, achievement badges and rewards, etc.)
FOR READING!
Thanks
View more case studies below:
