workoutscreen.png
Foodscreen.png
homescreen.png
Tools
Timeline
Skills
  • Sketch

  • Invision

  • Adobe Photoshop

  • Adobe Illustrator

  • 4 weeks

  • Research

  • User Testing

  • User Interface Design

  • Prototyping

bud

Role
  • Branding & Identity Designer

  • UX/UI Designer

Overview

bud is a mobile fitness app for millennials who felt excluded by current app offerings. I was tasked with creating the branding, identity, and UI for the product.

The Challenge

The Problem

I was presented with a branding challenge, my goal was to develop a brand and its visual style from the ground up. The UX team provided us with research outlining a gap in the fitness app market that left out people with health conditions that altered ability levels and their approach to fitness, as well as those with busy schedules who needed help staying  accountable and motivated.

Erin, our primary persona, was an overworked millennial whose health condition requires her to alter her fitness plan and struggles to stay motivated while juggling her busy schedule. She has found that other apps have not provided her with the support and motivation she needs in her workout plan

Screen Shot 2020-06-10 at 12.44.55 PM.pn

The Solution

I created a fitness app that illustrated a welcoming space for all levels and abilities who were previously under-supported and unmotivated by current offerings in a dense market. I designed high-fidelity screens for the main navigation pages, and built interactions to include many of these users by creating a space free of judgement for not being able to prioritize fitness. 

Competitive Analysis

While conducting a visual competitive analysis I asked myself: “What is it that is making these specific users feel excluded from what is already offered to them?”

-boring, lack of humor & joy

-lots of orange, few other colors

-use of grey very heavy & intimidating

There were a few things that stuck out to me, namely, that current offerings felt heavy, intense, and inaccessible, especially to less active users. The use of grey in many current fitness apps, while calming and neutral, felt intimidating and depressing, especially the darker tones. Orange is usually seen as healthy, energizing, and attention-grabbing which is why it’s such a popular color among fitness brands, but it could also come off as alarming and intimidating - particularly with a dark interface.

Design Concept & Principles

Based on our takeaways from my competitive analysis, I developed the following design concept to guide my visual design:

 

Today’s fitness culture is obsessed with #goals, without taking your particular needs into consideration. bud rethinks your fitness experience with positive, energizing, encouragement (and maybe a little bit of humor) that meets your where you are, wherever that is. Think of us as your new best friend! bud is:

Screen Shot 2020-06-10 at 2.25.30 PM.png

Playful

Screen Shot 2020-06-10 at 2.34.12 PM.png

Empowering

Screen Shot 2020-06-10 at 2.49.25 PM.png

Joyful

Inclusive

The combination of my design concept and principles emphasized the message that “no matter where the user is in their fitness journey, bud is there for them,” and highlight a conversational feeling, like talking to a trusted friend. This was the core concept of my ethos for bud's branding.

Design Exploration

Moodboard 1

Moodboard 1 was bright and vibrant with an inclusive, playful feel. Bright color-blocking and joyful images of people with encouraging statements were the main focus.

Moodboard 2

Moodboard 2 had a more pastel, but still bright and happy feeling color palette. Here humor and friendliness were the main message - embracing a "best friend" feeling. 

In my initial visual exploration, my goal was to have users not feel ashamed or judged for their fitness ability, level, or desire, and have a good time using the app rather than a begrudging obligation. By crafting moodboards, I was able to iron out the product’s color story, overarching sense of fun in movement, and most importantly, the voice I wanted my copy to have. Both moodboards captured the bright colorful palette, but I felt that Moodboard 2 fully embraced the humor and joy that would encourage users to use the product.

Style Tile

I synthesized the images and ideas from my moodboard I wanted most to represent my concept and tried to create a lighthearted interface that would attract my ideal user. I continued to focus on color and style, as they were the main elements that would help express these happy feelings immediately and obviously. I kept all the edges of my shapes and buttons soft and amorphous to feel easy-going.

Colors.png

Bright, fun colors were chosen in contrast to current app offerings and to encourange the playful, joyful vibe.

Font.png

The illustrative feel of my header font, Henderson Slab, expressed a playful vibe. I wanted to keep the other text simple and light so as to not overwhelm the reader in areas with heavier copy, and the sans serif Brandon Grotesque had the exact whimsical feel I wanted.

illustraton.png

Bright, feel good, whimsical illustrations by Sebastian Curi focused on inclusivity of body types and activities, as well as an overwhelming feeling of happiness that I felt really spoke to the voice I was trying to use in my app. 

Logo Development

After establishing the design direction, I explored the look and feel of the logo design. Inspired by the hand written “unmotivational” poster from my moodboard due to its humorous, free-flowing vibe, I was able to illustrate a sense of movement, fun, and sparkle. After my initial color iteration, I simplified the b to add a little bit more symmetry to the logo and make it more readable. 

Artboard Copy.png
Artboard Copy 2.png
Artboard Copy 3.png
Final Logo

High Fidelity Prototype

bud home screen
bud workout screen
bud splash screen
bud nutrition screen

Key Features included:

  • Daily progress tracking 

  • Hydration and food logs 

  • Nutrition tips, 

  • Daily curated workouts, 

  • A way to talk to your assigned expert. 

Here is where my UX experience took a front seat. The wireframes provided to us from the UX team did not test well with users and were found to be confusing and busy. I simplified the design with an 80/20 mindset, that 80% of our users were going to use 20% of what was offered regularly. This lead to the customization concept with a very simple layout. We wanted all users to be able to easily navigate through the interface and only have what they wanted to use easily available and eliminate extraneous features and information.

 

All features would be able to be customized, for example not logging meals, changing hydration amounts, or number/frequency of workouts, that could change based on what each individual user wants to accomplish with their fitness expert. 

 

Most importantly I wanted to make sure humor and fun was at the forefront, giving the user a little bit of joy every time they logged in. To keep them coming back each day there would be a new fun quote as inspiration at the top of each page. Please explore my prototype on InVision!

 

User Tests

Four users were tested for desirability feedback on the high fidelity screens. We tested users in the millennial age group as defined by the UX team as the most desirable user group and all users had used fitness apps before. Users were asked to explore bud as they were asked about color, layout, text styles and hierarchy, and opinions on copy content.

Most participants commented that the colors were very pleasing and that they found the humor and upbeat vibe enjoyable and unique. All participants found the app easy to navigate from the bottom navigation bar.

Marketing Website

I was then asked to create a marketing website for bud

BudWebsite.gif

The marketing site immediately highlights bud’s unique, friendly language. As you explore, it describes the customizability of features, including the inclusivity of different fitness desires such as food logging, activity, or just feeling your best. Please take a closer look on InVision of the desktop and mobile versions!

BudMobileSite.gif

Future Goals

Based off of user interviews, suggestions for bud in the future would be to add a goal obtaining system with points that could track users accomplishments as well as expand the customizability of each modal of the app.

Takeaways

This project challenged me to think differently, beyond my able-bodiedness and preconceived notions of those who use or would like to use fitness apps. In an attempt to create a unique fitness platform that would attract users that felt excluded by other apps and fitness tools, I found a strong voice in my design that emphasized inclusion above all else. Using visual competitive research as a launching point and confirming with fitness app users that this was a niche market that bud would be able to fill.