Project Background
Today’s digital fitness market is saturated with applications. Whether you’re interested in nutrition, fitness, or total wellness, there are a plethora of tools for users to explore.
However, one key feature is lacking in most of these apps — customization, specifically for a wide range of health conditions such as asthma, diabetes, hypertension, etc. Users aren’t able to tailor applications to their needs. Because of this, fitness becomes an afterthought and simply something people only do sometimes, or if at all.
The creative brief I was handed included an example persona for Erin.
Erin is a 23-year-old single millennial with a demanding and stressful job managing kids as an elementary school teacher. She's trying to get in great physical shape while dealing with an ongoing health condition.
How might we create a customized wellness solution that addresses Erin’s health condition while holding her accountable to a routine?
Kickoff
My first step in approaching the project challenge was research. I began by asking myself:
What does the current health and fitness market landscape look like?
In order to answer this question, I kept in mind the project goals. Since I would be creating a holistic brand concept from scratch, I determined that it would be vital to conduct research from a branding standpoint as well as a user experience standpoint. To do this, the primary research method I leveraged was a competitive analysis.
It was important that I outlined the strengths and weaknesses of competitor products because this would help me identify any gaps in the marketplace and design a product that aligned with Erin's core needs.
Explorations
Informed by my visual research, I started drafting up a brand DNA by creating divergent logos, moodboards, and style tiles. I had to consider finding an opportunity where my brand could exist among the saturated digital fitness marketplace.
What could be the key defining characteristics of my brand?
A couple of competitor design choices went on to influence my product:
When deciding on a brand direction, the research insight that heavily influenced my brand direction was:
Most competitors embraced a minimal approach with muted colors.
This insight presented an opportunity for me to diversify both my color palette and my brand. The concept that included a wide range of colors was the dark theme with the vibrant neon colors. I paired this concept with the logo sketches based on the 808 Drum, arriving at an exciting concept that connected the dots between dance music and fitness.
This exploration aligned with Erin's needs because it would evoke excitement and vitality, something Erin clearly needed due to her high stress levels and inability to maintain a consistent workout routine. Additionally, the logo tagline “Find Your Rhythm” implies that with ROOM808, Erin can find her niche when it comes to fitness.
Design Execution Prep
Evaluating the wireframes from the UX team was a critical part of my design process and was key in the execution of my high fidelity mockups.
Why?
Jumping straight into designing screens is risky. It was my responsibility to ensure the wireframes were clear, organized and easily functional for the user. Furthermore, discovering any issues upfront with usability or functionality as well as paying attention to the layout and the approach to UI elements would save time and reduce confusion down the line.
Creating a user flow diagram helped me detail the steps a user must take in order to complete a goal — In this case, logging food. As I learned from competitor products, this can often be a complex task. By determining this path, I was able to see possible turns through the route and optimize the user experience.
These are two divergent concepts I explored. I was experimenting with different colors as well as different ways of laying out UI elements. At this point in the design process, I struggled to translate the wireframes that the UX team had created. As a UI designer, it was difficult to assess how much freedom I had in adjusting the layout and structure of the wireframes. I ended up taking some risks regarding how content was displayed, which were influenced by research and user feedback.
I arrived at these designs after critiques with my classmates. One thing I struggled with was the dark theme. UI elements such as cards originally had an off-white fill, which was jarring against the dark background. In order to better align with the dark theme, I ended up changing these fills to darker shades.
I created my first prototype in Framer. Although this was a fun experiment, I didn't proceed with this direction because Framer had a steep learning curve and distorted my assets upon import. I also encountered problems sharing and viewing the prototype, which ultimately caused it to not function properly.
Due to these problems, I had to re-do my prototype in Adobe XD, which ended up delaying the creation of additional high-fidelity mockups. All in all, I learned that sometimes it's better to stick to what I know. I always get excited about shiny, new tools, but they come with drawbacks and take time to learn.
To evaluate the desirability and usability of the ROOM808 app, I relied on two individuals who fell within the target audience. This allowed me to gather qualitative data and better empathize with users.
Effort directly correlates with the familiarity of interface patterns. Users mentioned they prefer to utilize their knowledge from other apps rather than learning completely new patterns.
Users associated certain colors with certain actions. Colors helped them differentiate between elements and increased recognizability.
Discussions with users revealed that they struggled to identify static vs. dynamic elements because buttons and cards in the app were outlined instead of filled in. Therefore, they didn't appear interactive or clickable.
Refinements
User testing revealed that some small tweaks were needed to enhance comfort and familiarity while navigating the app.
"I would love it if there was a way for me to easily change the flavor of yogurt in the overlay."
Katie S. — End User
"It's not really apparent which elements and buttons are clickable. Although I can navigate around the interface with ease, some of the buttons weren't consistent and just didn't look dynamic."
Kassandra H. — End User
On the Progress screen, the "Workout" section was overhauled to better meet the needs of Erin. The new screen states supported health conditions upfront as well as images of exercises to expect.
Meanwhile, a key thing that changed on the Nutrition screen was the relocation of the "Water" section to the top. One user mentioned water should be at the top because it's the metric she tends to fill out most frequently.
Originally, the "Scan Barcode" section was taking up a lot of real estate. A key refinement I made here was relocating the barcode to the top right-hand corner. This allowed the food cards to sit above the fold on the interface, eliminating the need for users to scroll.
I completely overhauled the slide-out hamburger menu after testing it with users. With the previous design, it wasn't clear which page was active and the addition of the icons provided more context.
Creating the workout screen was based on one key concept from competitive research — The use of long, continuous videos to display exercises and classes. These proved hard to follow, which is why I introduced a step-by-step approach.
The other changes I made to the workout screen took into account user feedback:
Final Solution
The ROOM808 marketing site was an opportunity for me to tell a story about how my solution solves a real-world problem for users.
As a final step, I created a style guide that clearly defined the key elements of ROOM808 so that future designers can create the same consistent style and aesthetic.
ROOM808 was special to me and I'd love to expand on it in the future. My first step would be to elaborate on these micro-interaction sketches. I would like to digitize them because subtle interactions are good feedback indicators and inject personality into products.
Reflection
This project gave me a glimpse into what it’s like to design a holistic brand from the ground up. Because of this, I improved on my ideation skills by generating various brand concepts from the start. Designing a logo was a challenge for me, but acquiring validation from other designers along the way allowed me to approach this task with a continuous iteration mindset.
Moving forward, this project introduced me to grids and modular type scales — Two key techniques that I continued to improve on throughout my time at the Flatiron School. Learning about these techniques shifted my design process by making it more organized and systematized. This would also lead me to start exploring design systems in detail.
Lastly, this project introduced me to effective critique methods. I learned how to: