Flowlife
UX/UI App Design (04.26.21 - 05.26.21)
An app design that guides users on how to reach their fitness/yoga goals.
Overview
Summary
Flowlife is a yoga/fitness-based app that allows users to learn about yoga, and how to progress in a linear way through video guides to learn things like handstands and other technique-based postures.
Roles & Responsibilities
As the sole designer for this project, I worked to create the beginning design elements: persona, empathy map, journey map, and wireframe sketches. Later, I built digital wireframes and prototypes. Through user testing, I was able to reiterate the prototype into the screens below.
The Problem
Due to Justin’s (the client) high demand for working with clients (in-person) on their fitness/yoga practice, Justin needs a way to meet the demands of his ever-increasing audience and client-base, without having to meet in person. Justin is also looking for a way to increase his user-audience by way of creating an app that can reach far more people.
The Audience
Justin’s client-base is mostly 20-40 year old males, but also consists of a high level of female clients as well. This population includes mostly working class individuals but also some college-level individuals.
The Solution
Create a comprehensive yoga/fitness app that can help clients meet their goals without having to see Justin in-person, as well as to increase Justin’s total user base.
Competitive Analysis
I looked at Thenx (a fitness-based app) and AloMoves (a yoga-based app) to try and take the best of both worlds. Thenx is the structure that I borrowed from mostly for the design, as it’s outlined in an easy to follow, linear structure. AloMoves is more in line with yoga, so this is more of the kind of content that will be seen on the app.
-
Alo Moves
“Your At-Home Studio”
• App relies heavily on button images to elicit immediate understanding of what you’re learning and who you’re learning from.
• Plain and simple black and white UI helps to focus user attention on the images and video content.
• Carousel scrolling makes for an organized user experience.
-
Thenx
“The School of Calisthenics”
• Navigation is intuitive and information hierarchy is organized.
• App has laggy behavior and stops working sometimes.
• The UI capitalizes on images, making the app easy to understand and navigate.
Persona
Based off of Justin’s Instagram following, I decided to create one main user persona to first meet the needs of this majority demographic. Daniel is motivated by his peers and his favorite trainer Justin. His goals are to learn how to handstand, while also getting stronger through calisthenics. His frustrations include: being unsuccessful, looking 'bad' in front of others, and not having enough time.
User Flow
I created a user flow to demonstrate how one operates within the app, and how signing up for the premium membership unlocks all content within the app. Some content is available without membership.
User Journey
I created a user journey map that details the user’s goals, challenges, and how they feel during different stages of using the app.
Storyboard
Before wireframing and prototyping, I employed the fun and useful strategy of creating a storyboard for how someone might learn about the Flowlife app.
Wireframing
After coming up with the solution sketch and storyboard, and with all of the other material gathered throughout the design process, I created the base digital wireframes that would serve as the skeleton for the future prototype.
Home screen
Skills screen
Membership screen
User Testing and Feedback
I ran some simple user testing to measure the navigation of the app and tested simple interactions. This phase of the process proved to be invaluable as a lot of insight was gained on how to better improve the overall user experience.
Added images to create a more thoughtful user experience.
Changed the hero image on the handstand screen to show an actual handstand.
Added details to the purchase options, highlighted the savings potential, and changed the bottom button to say ‘Complete Purchase’ instead of ‘Get Membership’.
Branding
Overall, I stuck with a simple design, focusing mostly on function and accessibility. This promotes a more clear-cut user experience, providing greater emphasis on the content itself.
-
Name
The client came up with the name for the app, Flowlife and I wanted to make sure the name matched the design. Flowlife is simple, intuitive and the word ‘Flow’ is combined with the word ‘life’ to show the flowy nature of the name and the brand.
-
Color Palette
Simple, neutral colors to make the app easy on the eyes to not detract from the content and pictures in the app.
-
Typography
Roboto - easy to read, and has a good balance of both mechanical (for technique of poses) as well as open, friendly curves (the nature of flow)
High Fidelity Prototype
Based off the feedback I received from user testing, I made a series of updates to the prototype to make it the shining MVP it turned out to be.
Hi-fi home screen.
Hi-fi skills screen.
Hi-fi membership screen.
Final Thoughts
Meeting with Justin and helping to bring his idea to life was a great learning experience and fun opportunity. Gathering information about his vision and his audience helped to shape the beginnings of the Flowlife app design. This app is for yoga/fitness enthusiasts and more specifically, for Justin’s large following of trainees, to help improve their yoga skills and fitness anytime, anywhere.
I used my knowledge of UX/UI design to do competitive research, create a meaningful persona, design a user flow, user journey, storyboard, wireframes and a testable prototype.
So much was learned through user testing. I’ve learned that it helps tremendously to get fresh eyes on a project I’m working closely on as this helps to gain more perspective and to truly create user-centered design. This was key to making the Flowlife design more functional and appealing.
The flow of the app seemed to work well as users testing did not have much trouble navigating through the app. What didn’t work was the plain buttons that did not illustrate what exactly was being learned. To help this, I added pictures to the buttons to more clearly show what exactly one was learning.
Moving forward, I believe more development of this app and adding the video content, would make for better testing and iterations.