Mobile App UI Library Case Study

Initial Objective

To create an engaging, impactful and well designed UI Library for the runnr application wireframe. The target audience is ages 18–29 and target device is iOS.

The function of the app is to curate a playlist for user runs. In order to curate the perfect playlist, users must enter in their desired mood, duration, distance and tempo of the run.

Additional Objectives

Preserve user momentum

In order for the app to create the perfectly curated playlist, users must input specific information. Unfortunately, after reviewing the provided wireframe, I noticed the input fields were spread across way too many screens. I found this to be very problematic. Therefore I added a secondary objective; to lessen the time it would take users to input required information. This would optimize the user’s run experience as it would preserve users motivation to go for a run in the first place.

This was the driving force behind my entire creative process. As a retired runner, I knew the importance of keeping up the momentum / energy level whenever the mood to run would strike. It was so important to me that I used to have my running gear neatly folded in the corner of my bedroom with a hair tie on top. The faster I could get out of the house and go for a run, the more likely I could channel whatever put me into the mood into my actual run.

Remake of wireframe

With the incorporation of this new goal, I decided to reworking the given wireframe was necessary.

In order to make the set up a lot quicker, I decided which questions were too specific and could be eliminated. The component that fit the bill was the distance options; users could select either 5km, 10kms, half a marathon or a full marathon. I replaced the options with an open field where the user could manually input whatever distance their heart desired.

With that, I decided all required information could be consolidated into one in to one page. This would make the set up screen a one stop shop.

Research

Once I was satisfied with the wireframe, I moved onto aesthetic research. I researched top UI app designs and UI trends. I found that minimalistic, polished and flat art were persistent themes.

The app that inspired me

Going through top apps of 2017 I stumbled upon the ‘Sway’ app. This app caught my attention because of its unique beauty. It had gorgeous colours and simple text. The function of this app was to assist users in meditation, by use of calming colours and straightforward instruction.

Sway Mobile Application

I felt the emphasis on mood was applicable to the Runnr app, because the sole purpose of running with music, is to enhance or provoke a desired state of mind. Therefore, this app was definitely an inspiration for the high fidelity.

Top exercise playlist apps

I also researched top exercise playlist apps. Each of the top apps had unique and interesting features. The aesthetics were all minimal and clean, but none were emotion provoking. This discovery solidified my decision to have a mood enhancing design, as it would tremendously stand out against its competitors.

FIT Radio, GYM Radio, pace DJ, RockMyRun

Design process

Design Inception

Now that I had completed my research and reworked the wireframe, I moved onto filling out the design inception. The design inception is very important, as it contains the desired brand and mood that users will experience.

Step # 1; answer the middle circle ‘why’. Here you explain the underlying goal for the app. This is the most important step, as he rest of the outer circles are all dependant on this.

Step # 2; input the adjectives that describe the overall mood you would like users to experience, while using the mobile application.

Step # 3; input adjectives relevant to each section.

Mood board

Once I had filled out the design inception I found images on Pinterest to create a mood board. Using the Sway app for inspiration, my goal was to create an app that was inspiring, fluid and intuitive.

Initially I wanted to use real images of the sky, but keeping in mind the current UI design trends, I opted for flat art images. I felt the sky would be a great focal point for all screens, as the sky is the same all around the globe. The universal nature of the sky would be more inclusive than utilizing localized images, such as specific streets and hiking trails.

Mood Board

Style Tile

Once I was satisfied with the mood board, I moved onto creating the style tile. All the features; iconography, buttons, colour palette, and image sample are reflective of the adjectives found in my design inception.

The icons were thin and strategically placed on a bright background, and in the bottom right corner of the screen. The contrast made the icons more vivid and the placement made the options fluid.

The colour palette was very calm and inspiring. The different hues of blue were chosen to make the mobile app look very clean and simple. The unified colour scheme is beneficial for the user experience, as it draws the eyes to the bright icons placed at the bottom of the screens.

The blue colour palette is a lot more cohesive than a previously selected one. The iteration below had different colour palettes on each page which is why I changed it.

Previous iteration

Style guide

Once the high fidelity was complete I produced the style guide. I provided the typeface & iconography dos and do nots.

It is important the the typeface remain consistent and unaltered in order to acheive the simple and clean look I was going for. The iconography must remain the same size throughout. The size was chosen in order to make them easy to view and easily click while users are running. During my creation process, I received feedback from my peers, advising me to make the icons smaller. However I decided to keep them large, in order to optimize the user experience . The icons must also never be framed, as it would appear too busy on a mobile screen. The coloured button is all it needs to be highlighted.

Solution

I did my best to create a beautiful and user friendly mobile application that would inspire users to reach their goals while running.

Keeping the current trends and target audience in mind, I kept the overall design very simple and straightforward.

I achieved this by:

  • consolidating all required information to one page
  • using abbreviations on selected words, in order to simplify the overall look & appeal to my target audience
  • using larges icons with contrasting backgrounds & strategic placement, so that users can easily navigate while running
  • including a share button on the run stats page, so users would be motivated to share their success with friends and family
runnr app prototype