ROOM808

An exercise and nutrition platform based on the energetic, feel-good emotions of music catered towards users with specific health conditions

Table of Contents

Role
UI/Brand Designer
Team
Solo Project
TimeTable
6 Weeks, May — June 2020
Tools
Sketch
Adobe XD
Framer
Outputs
Market Research, Branding, Moodboards, Style Tiles, User Flow, High Fidelity Mockups, Interactive Prototype, Micro-Interactions, User Testing, Responsive Marketing Site, Style Guide

Project Background

A Customized Wellness Experience

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.

Target Audience

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.

Core User Needs
  • Help Erin find an exercise plan that conforms to her health condition, has classes, and includes the help of a health professional
  • Create an efficient wellness tool that would help Erin fit in exercise at some point during the day, hold her accountable to a weekly routine, and serve as a suitable outlet for her stress
  • Spark excitement around the idea of working out and staying physically fit

The Challenge

How might we create a customized wellness solution that addresses Erin’s health condition while holding her accountable to a routine?

Kickoff

Assessing the Marketplace

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.

Research Insights
Key Learnings
  • Most apps embraced a minimal approach with muted colors, only having CTAs stand out — In what ways could I diversify my color palette and brand?
  • All competitors used similar IA and IxD patterns such as image carousels, cards, and tab bars — How could I differentiate my product and think creatively with my design approach?
  • None of the competitors managed to combine fitness and nutrition into an all-in-one platform.

Explorations

Creating a Holistic Brand

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?

Logos

Moodboards

Style Tiles

A couple of competitor design choices went on to influence my product:

  • Exercise videos — These are hard to follow compared to a step-by-step approach.
  • Detailed information is necessary — Especially when it comes to exercise and nutrition, users need accurate data to achieve their goals.
  • Similar IA and IxD patterns such as image carousels, cards, and tab bars — I shouldn't reinvent the wheel but I can think creatively with my design approach.

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

Following Through on User Needs

Wireframe Evaluation

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.

User Flow

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.

High Fidelity Mockups

Early Designs

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.

Tested Designs

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.

Prototype Attempt #1

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.

Prototype Attempt #2

I arrived at this prototype after evaluating my options regarding various tools. Considering the time constraints I was under, I discovered that Adobe XD was the best option. It allowed me to efficiently create a functional prototype and this was key because I needed to proceed onto other project tasks.

Testing Insights & Discoveries

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.

01

Knowledge Transfer

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.

02

Take Advantage of Color

Users associated certain colors with certain actions. Colors helped them differentiate between elements and increased recognizability.

03

Clear and Clickable Elements

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

Small Tweaks Make A Huge Difference

User testing revealed that some small tweaks were needed to enhance comfort and familiarity while navigating the app.

Addition of Key Onboarding Screens

Progress Screen & Nutrition Screen Iterations

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.

Recent Nutrition Items

Hamburger Menu

Workout Screen

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:

  • Integrating the timer with the pause button eliminated the original awkward placement.
  • Relocating the music controls to the top saved space and made room for identifying the next exercise.
  • Color-coding allowed the "Close" and "Done" actions to become more apparent.

Wrapping up

Remaining Deliverables & Future Plans

Responsive Marketing Site

The ROOM808 marketing site was an opportunity for me to tell a story about how my solution solves a real-world problem for users.

Style Guide

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.

Future Plans

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

Effective Critiques & Systematic Design

Don't Design Inside a Bubble

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.

A Whole New World

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.

Critiques Are Useful If...

Lastly, this project introduced me to effective critique methods. I learned how to:

  • Be brief and clear in describing my concept
  • State my intentions or goals behind the work I present
  • Be honest about the design choices I’m not sure about
  • Be an engaged listener for my classmates as they’re presenting