Runnr 2018-04-10T05:16:28+00:00

Project Description

runnr.

App Design

Project 2 – Red Academy

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

keywords

UI – App Design – Music

what was the project about?

We were paired with another UI student and given a project brief about a potential app. The goal of the project was to get a central take on the app with your partner, come to a single “why” or purpose of the app, and then branch off into two completely different art directions. After design, present your directions and compare/contrast.

what was our app?

Our app was Runnr, a fitness app that plays music based on the user’s mood, distance, workout style, type of run, etc. Runnr not only keeps you on track with your progress but also keeps you motivated by providing you with the tunes to keep moving.

While our team went in two completely different art directions, we agreed on the one purpose of the app: music led motivation.

our take on runnr.

After reading the brief, we read that the target demographic was

  • 23-35 y/o
  • Male or Female
  • Student or young professional
  • Keywords: newbie, zen, driven, work hard play hard

The app also provides you with a playlist depending on your mood:

  • Feeling strong
  • Feeling zen
  • Feeling fast
  • Feeling sluggish
  • Feeling happy
  • Feeling sad
  • Custom mood

discussion with Roanne.

In talking with Roanne, we saw there was a distinct dichotomy in this initial brief. Words like zen and strong and the keywords newbie, zen didn’t pair with work hard/play hard and driven. It just didn’t make sense. So that’s where we decided we would take our art direction split. How can we title the users that will be more “zen” and relaxed vs the users who will want to get pumped up and work hard? We came to Type A and Type B.

Type A and Type B

Defining Type A

  • outgoing
  • ambitious
  • organized
  • competitive
  • impatient
  • head in the clouds

Defining Type B

  • relaxed
  • consistent
  • reflective
  • even-tempered
  • down to Earth

This created an interesting problem because both Roanne and I are type A! While she is less intense than I am, we both thought designing for type B would be an interesting struggle and challenge. I thought about it for 30 seconds and thought type B was the one I really did NOT want to do! Then I realized that was exactly why I needed to do it. I’m always trying to challenge myself so I figured this would be a perfect challenge.

my hilarious struggle with Type B.

For those of you reading this that don’t know me (well), I am INTJ personality type and I am none of the Type B qualifiers… I am not relaxed, I am inconsistent, up and down, super competitive, and have my head in the clouds! It made planning for this project an interesting exploration!

design inception.

From this, I spent time sifting through photos, interviewing friends and family, and discussing with my UI partner to come up with the following design inception.

the why.

Music led motivation.

Type B.

mood.

Energy

Musical Power

Inspiration

visual language.

colour.

  • green
  • blue
  • grey
  • gradient
  • warm
  • yellow
  • orange
  • water
  • paint

shape.

  • playful
  • smooth
  • relaxed
  • calming
  • curves
  • circles
  • bubbles

space.

  • clear
  • wide space
  • breathing
  • atmospheric

movement.

  • slow bubbles
  • slow transition

colours.

I wanted to create a moodboard that was mindful, zen, relaxed, and playful. While Roanne’s direction would have a strong energy, a powerful energy, mine wouldn’t be absent of energy. While nature is calm it is still powerful and still a source of great energy. Nature’s energy is just very different from industry. Nature’s energy is smooth and connected.

The rest of the board had warm and inviting colours. I had the red and orange in my moodboard but it didn’t make it to the style tile. Photos of lotus, bonsai — plants that are symbols of zen. Landscape photos that are calming and bring you connection to nature and the world.

moodboard.

style tile.

Inserted a sample use of the logo playing on the round shapes, smooth lines, warm and relaxing colours of muted blues and greens. I’m a marketing copywriter so I wrote a tagline to go with my art direction.

The tag captures the why of the app with a spin that isn’t overbearing or intense, rather a source of calming and connected power.

Icons were modern but unthreatening — minimalist. Type was Proxima Soft, a type that is modern but relaxed with rounded corners and especially in lower case allowed for that relaxed feel.

feedback and further direction.

In discussing my direction and style with Andro, Roanne, and Janis, the one big change I needed to make was add a contrasting colour that popped and created that balance and urgency, the power. I had these hues in my moodboard but I just hadn’t put them into my design style tile. I eyedropped a magenta and an orange. In our team meeting with Andro, he loved our direction and suggested that we even name our directions to give them further contrast and character.

wireframes.

We chose wireframes that would give us the most room for artistic freedom and that had a lot of “mood” based elements. Since our directions were mood and personality based, we felt this would give us more room to create 4 different frames. The frames selected also naturally flowed to each other. You sign up, select your mood (slow and steady), find your playlist.

the final design.

let music be your guide.

Loader page. I wanted to start with the energetic and powerful magenta hues but dimmed them with a lower opacity. I positioned the start of the background gradient to emulate a sun. The top corner is where the sun would be. I let the rest of the design speak for itself. I didn’t want it to suffocate the user or create stress but rather make them feel that entering this journey would be a relaxing and invigorating exploration. Use of the circle shapes in the logo created a sense of nature but also energy and movement as the shapes are slightly off centre and different colours. These shapes also follow the same gradient pattern as the background gradient. The logo type is simple, modern, and refined and the italic r at the end created energy and purpose.

The mood page is relaxed. I opted for images and circles instead of hard icons for the 6 mood tiles. I changed the names of the moods to suit the peaceful direction. The icons have no descriptors (except for mindful mix) which created a modern, intuitive design. The target demographic already know what the icons mean and they already know where the icons they need should be on the screen. I swapped “quick run” for “mindful mix”. Quick run is a shortcut icon with a default energetic playlist. I swapped it for my own custom selected and title icon that better suited the art direction. I thought, what would users of this app want to readily and frequently select? The circle pattern and shapes in the background are the same shape and pattern as the logo shapes, just in different hues and opacity. I wanted to continue the movement and energy pattern throughout the app.

And here’s the video walkthrough of the prototype.

contrasting design.

roanne’s direction.

Her design is noticeably more strong and powerful through her icon choice, shapes, album art, and colours.

Once the direction for the project was distinguished, I created a mood board that illustrated my Runnr muse. He/she is an undercover athlete at its core; they are the young professional that is motivated to fulfill their 6 am run before they start work at 9 am, and truly convey a full contact life of fitness, profession, and culture. I was inspired by brands like Reigning Champ and Lululemon Lab; whose aesthetics are all equally clean, sleek, intentional, and functional (another plus because they’re both brands renowned for their minimal monochromatic palettes).

Their target audience would want to invest their time into the buckets that benefit the maximization of their day — nothing more and nothing less. Other images in my mood board were architecturally sound; with heavy and structural elements balancing the sense of direction and speed of an urban cityscape. These young professionals who use Runnr would want an app that supports their lifestyle, and the surroundings that inspire them.

Roanne Mendoza, UI Design Partner

conclusion.

It was a great project and I had a lot of fun doing it. My criticisms and takeaways from project 1 at Red Academy were to spend more time on planning and with my moodboard. I took my feedback from p1 and directly applied it to p2. In p1 I rushed through planning and my design ended up inconsistent and noticeably without purpose. This time around, I spent A LOT of time in planning and it really showed not just in my finished product but also for myself as I was designing. I created my four panels very quickly and when I had a question about design, I already knew the answer.

It was just a matter of one of 3 options I had already created and finalized. It made design easy and made me more confident through the process. I was excited to show it. My screens were extremely consistent and I put a ton of effort into the fine details such as the exact direction and length of a circle gradient. The font sizes and weights across screens. The same circle sizes across screens (the circle shapes in screens 2–4 were the exact same shape as the logo screen circles). It really felt connected as you went from screen to screen.

opportunities.

There were some legibility issues that stemmed from an intense focus on making it look good and making the design match my vision versus the functionality and usability of the app. Just a few nitpick things that fresh eyes would have caught. I also designed it last minute and my computer has f.lux which slightly affected the colours I selected. Fresh eyes and testing it out on an iphone would help the UX.

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