Brainfit 2018-04-10T05:16:03+00:00

Project Description

brainfit.

App Design

Project 3 – Red Academy

Mood and fitness tracking app that allows you to see your own personal trends between your physical and mental health.

keywords

UI – Illustration – Onboarding

what was the project about?

BrainFit is a mood tracking app that helps you connect your physical activity with your happiness, calmness, and confidence. Our client, a brilliant neuroscientist, based his research on those three valences. His goal is to create a “movement” movement. People already know that fitness and physical activity help you look better but not everyone understands that a bit of sweat actually has mental health benefits as well. The foundational science of the app is based on the fact that increases in physical activity improve your level of happiness, consistency of mood, calmness levels, and confidence.

Takeaways from the first meeting.

The first meeting went off to a great start. Our clients, a husband and wife team of Shahin and Elly Zangenehpour, were lovely to meet, absolutely engaging, passionate about their project, and thankfully, incredibly curious about what the design team at Red would create for them.

The research is based on the Pleasure-Arousal-Dominance (PAD) emotional model. In our first meeting, Shahin brought a sketch file that outlined his idea of how the representation of the three valences, Pleasure, Arousal, and Dominance might look. The sketch showed a Self Assessment Mannequin (SAM) using simple faces and bodies.

the team.

The amazing team that tackled this challenging project!

Shirley and Tanya for the UX and Craig and myself for the UI.

the challenges.

During our first meeting, we simplified the main challenges for the project with our client.

Our challenge was to create an MVP that:

1

Has a fun and professional brand.

2

Has a clear onboarding process.

3

Measures and presents the three valences in an engaging and accessible way.

We narrowed down our three target demographics to 3 user profiles:

  1. People with mood disorders
  2. People who are already physically active and understand the benefits of being active
  3. People who either have been a #2 or want to be but struggle with motivation and other challenges

All of our demographics fell under: Millennials and Post-Millennials in North America who have a wearable active wear tech such as an Apple Fit. After a team discussion and review with our client, we decided that #1 would benefit the most but would be possibly difficult to market/target and may struggle with engaging with the app. Target #2 would be the easiest to market and would quickly onboard the app but may not have long lasting engagement since they wouldn’t see major benefits from the app, being already active. Target #3 would benefit greatly, be easy to market to, and would both have quick onboarding and longer engagement. We went with target #2.

design inception.

To discover the why of the app, we had to dig deep. For our users, it was more than just being happier or feeling more confident. Why did they want to be more happy? What benefit did being more confident give them? We saw that the three valences, happiness, calmness, and confidence, affect both your personal relationships and business/career life greatly. It wasn’t just about achievement nor was it strictly about connection. It’s about achieving your goals, cultivating amazing and deep connection with your relationships, and creating the best life possible. It’s about playful empowerment.

It’s about achieving your goals, cultivating amazing and deep connection with your relationships, and creating the best life possible. It’s about playful empowerment.

keyword analysis and gut test.

During our gut test with our client and all of our conversations with them, when talking about the BrainFit brand, brands they liked, and how they saw the app to be, 7 keywords stuck out to us. They were:

Playful Engaging Minimal Creative Visual Illustrations Happy

We took those words and their direction and made the following design inception:

the why.

playful empowerment.

mood.

motivational.

Track progress. Document milestones. See change.

purpose drive.

To help change the stigma behind mental health with decades of scientific research.

routine.

Let the user realize the benefits of consistent daily exercise.

empowerment.

Give the power to the user to let them take control and improve their own mental, emotional, and physical health.

visual language.

  • engaging
  • gradient
  • teal
  • calm
  • soft
  • playful
  • eye-catching
  • smooth
  • relaxed

moodboard.

With two UI designers on the team, we decided to agree on a design inception “why” and then go in two separate art directions. We would then show the client and the client would then choose the direction that best fit their vision. We would then work together to bring that direction to the presentation. From the design inception, I created the following moodboard.

I wanted to make a moodboard that reflected the playful empowerment of my why. Happy young people showing their wants and desires of achievement and connection. Warm and friendly colours that emphasized life and energy. It’s about dreams and being in the moment.

challenge 1: create a fun and professional brand.

I used the moodboard to create a style tile that was warm and playful but not childish. I wanted a font that was familiar and worked well with headers and body text. The colours and type were modern and professional and let the illustrations have room to breathe and flex their innate playfulness. More on the illustrations below…

wireframes.

These were a few of the digital frames we received from the UX team.

challenge 2: have a clear onboarding process

Even though I wasn’t on the UX team, our group was very connected and had a fluid dynamic. I challenged myself to learn about the onboarding problem and how we might solve it. In my research I came up with 5 rules of onboarding that other apps had done successfully. The UX team took our team discussion as a foundation and created a streamlined solution.

Successful onboarding:

  1. Provides an obvious way to move forward
  2. Best way to learn is by doing
  3. Showcase primary features only, secondary features can be found through exploration
  4. Keep everything succinct
  5. Make it playful and fun

the logo.

This was one of the tougher parts of the project and because it wasn’t essential, it got put aside. However, when the client selected my art direction to pursue, it allowed Craig the time to really challenge himself, dig deep, and create an amazing logo. On the day of our art direction presentation (style tile presentation), I had a simple text logo using the typeface that I had selected for the app. Craig had dived in and made a few brain logos.

original version

input from client

second iteration

digging deeper

refining design

A few more iterations in for Craig…

After discussion with the client, they sent us a shape and colours they felt represented the three valences (shown in the middle). Craig continued to flex that into the design. At this point, I focused on the UI and Craig focused on the logo. After attempting to combine the triangle shape and colours into the brain, I suggested he not reinvent the wheel and simplify — just use the triangle. It’s a simple, memorable shape and it has three points, one for each valence. We had seen the brain logo in our research countless times and it was overdone… and never done well. Brains are inherently gross looking shapes.

It was in the right direction… but not quite right. Excitedly, he told the team that the next day, he’d have a finished logo to present to us… we got out the drumrolls…

. . .

What he showed us was the logo in monochrome of the teal colour and without a tilt. I tilted it, put it on the background, through the type logo above, and made each part of the triangle a different colour based on our style guide.

A reminder, BrainFit is a mood tracking app that helps you connect your physical activity with your happiness, calmness, and confidence. Our client, a brilliant Neuroscientist, based his research on those three valences. We wanted a logo that reverberated throughout the app and so we created a logo that represented the three states in colour and shape. Using the impossible Penrose triangle as a foundation.

the logo as an iOS app icon

We wanted a logo that reverberated throughout the app and so we created a logo that represented the three states in colour and shape.

design studio.

At this point in the project, we had digitized wireframes. We understand the general flow of the app and we had solve the onboarding process and created a fun and professional brand. We knew that the valences would be presented on a scale of 1 to 5 but we didn’t know how it would look. At that moment, they were called pleasure, arousal, and dominance.

my thoughts on the copy.

The original scientific valence titles are pleasure, arousal, and dominance. This is what the client came to us with. As you can imagine, through testing, these terms came back with confused and mixed results. Our users often laughed at the wording or, at best, were confused at the definition in the context. To redefine the terms we had to understand what they were designed to mean. Pleasure measured mood or happiness from happy to sad, arousal measured how agitated or stress you were, and dominance measured how “big” or “small” you felt, similar to confidence. The terms we decided on as a group were happiness (for pleasure), calmness (for arousal), and confidence (for dominance).

Once we had decided on these terms and after they had been tested, we had a got together and had a sprint brain storm session of how these valences would be best represented in an app format. We started with the SAM, self-assessment mannequin, which was based on a human body and was emoji/emoticon like. SAM and emojis are modern. They are familiar. And most importantly, they are simple to understand. But we wanted to go further. We wanted to push the envelope. We wanted to create a timeless metaphor for emotion.

We wanted to create a timeless metaphor for emotion.

Human beings have an amazing ability to give inanimate objects life.

We name our cars and our ships. Many languages around the world use gender to describe pronouns. The sun in french is “la” soleil. The mountain is “der” Berg in german. When we unwrap this, we can further see how the world around us influences emotion. When we think of the wind, and clouds, and rain, we feel sadness, gloom, and maybe a bit of melancholy. In the summer, we feel excited, energized, and playful.

The influence of nature is timeless. And now, our solution. Our timeless metaphor for emotion:

happiness — from left to right, least happy to most happy

confidence — from left to right, least confident to most confident

calmness — from left to right, least calm to most calm

conclusion.

the main challenges reiterated.

During our first meeting, we simplified the main challenges for the project with our client.

Our challenge was to create an MVP that:

  1. A fun and professional brand
  2. Has a clear onboarding process
  3. Measures and presents the three valences in an engaging and accessible way

opportunities.

What’s my takeaway or something I want to work on for next project?

During our first meeting, we simplified the main challenges for the project with our client.

Don’t forget to keep checking in with your team. I did that a lot and it really helped. Keep focused. Trust the process. I put time into planning and inception and it really paid off. This time around vs p2, I leaned on my team and others a lot which was great. I was often asking for advice and suggestions with my designs. I didn’t always take it but the conversation often sparked ideas or change and it helped make my designs better.

As far as design improvements go, changes I am considering are:

  1. Make all backgrounds teal, no maroon background
  2. Adding a water feature to the most calm state
  3. Removing the bird in most confident and adding a lumberjack/“mountain-man”
  4. Better QA for alignment
  5. Change the calendar to a 3 toggle slider with day — month — year

Home Page design concept after

the project was completed.

recent work.

Brainfit

Brainfit

App Design

Take care of your mental health, one step at a time.

  8 minute read

keywords

UI – Illustration – Onboarding

Runnr

Web Design

A music and fitness app that creates playlists based on your mood and lifestyle.

  5 minute read

keywords

UI – Marketing – Animation

Hummingbird Networks

Web Design

Designing the online presence for an emerging wildfire fighting company.

   6 minute read

keywords

UI – Web

see more work.

Jayson Postle

Full-Stack Digital Designer and Marketer