Runnr
Design an engaging, well structured and user-centric iOS app by
utilizing a User Interface Library.
WHAT IS runnr
Runnr is a running app that tracks your runs and your progress but also provides you with free streaming music depending on the mood. Runnr would serve unique playlists based on an individual's pace, type of run or distance. RUNNR not only keeps
you on track with your progress but also keeps you motivated by providing you with the tunes to keep moving.
platforms
iOS
Tools used
Adobe Photoshop CC
Adobe Illustrator CC
Adobe XD
Adobe After effects
Role
UX/UI Designer
Opportunity
The opportunity for this project was to conduct research about the persona and understand the user and establish key design considerations for the iOS app. I was challenged to create a UI library and apply the style to provided Mid-Fidelity wireframes.
User Flow
loading screen
The loading screen has an orange gradient with two vertical stripes, inspired by the double solid center line on a road. The logo is placed on the right and there is a gif playing in the background. This screen would also direct the users to sign in or sign up for the app if they are using the application for the first time.
home screen
The home screen gives the user a couple of options to choose from. The user can choose the type the run based on mood, distance, duration, and speed, and according to their selection, a custom music playlist would play while they run. The user also has an option to forfeit the selection and just click on the quick-start button to start running.
run and music screen
The run screen consists of the statistics which would give real-time data while running. This screen has a swipe up option which would take the user to the music player screen where the user can change the song or select a different playlist. Once swiped up, the running stats go down and continue giving the statistics on the run in real-time.
Watch screen
The app on watch iOS works similarly to the app on the phone. There are three main screens on the watch. First is the run screen which gives running statistics in real-time. Second, is the music player screen which lets the runner play the next track or increase/decrease volume. The third is the playlist screen which lets the runner chose different playlist and tracks.
Design Process
wireframes
MOOD BOARD
Using words as inspiration like movement, flowing, directional and speed, I created a mood board fit for the app Runnr. Majority of the runners I interviewed go for an early morning run and they would see the sunrise on their run. I decided to take the orange from the sunrise as a pop colour for the app. Thinking of where runners go for a run, I chose imagery like the road as an inspiration for texture.
LOGo DESIGN
I wanted the logo to possess the overall mood of the app. The logo is tilted towards the right to show movement and forward direction. The letter R is dissected with multiple lines and have a dot on the right corner of each line to depict an equalizer, which represents the music streaming aspect of the app.
