Runnr is a running app that tracks your runs and your progress but also provides you with free streaming music depending on the mood, pace, type of run or distance you want to do. Runnr not only keeps you on track with your progress but also keeps you motivated by providing you with the tunes to keep moving.
Challenge:
To create an engaging and attractive UI library, with a minimum of 4 hi fi prototypes. That correlates to the mood board created during the design process for the Runnr App
Tools:
Sketch, Invision, Photoshop
Planning:
The planning for this assignment started with a design inception sheet, extracting from that inception sheet I created a mood board allowing me to come up with a dark, clean and high contrast type of mood. I also researched other running apps in the market, which helped me come up with ideas regarding key features for my app.
Design Inception:
During the process of creating the design inception sheet, one thing that really stood out for me while researching other running applications is that they are very chromatic and dark themes through out the app with eyes catching bright contrast. This set the tone for me as to what I imagined my version of the Runnr app to look like, bright contrast, clean interface and dark theme with all the right features.
Mood Board:
Mood boarding was relatively a very easy process after looking at several designs of other running apps. It was very clear that I wanted it to have a very sleek, clean, dark and energetic type of mood. I wanted the interface to have a dark greys and clean rounded shapes, interactive movement and bright like neon contrast to really catch the attention of the users.
Style Tile:
Style Guide:
Runnr App:
The layout for the Runnr app was fairly easy to figure out since the Mid- Fi’s were provided for us on this project. Although I added and changed a couple things such as icons, progress bars and lay our for a couple pages that I felt was much cleaner and made more sense for users.
I really liked the use of the colours I chose for this app since it really pops when you look at the protoypes on your Iphone. It looks really clean and the design makes sense. During my presentation someone commented it looks like it would be tough to see when being used outside in the sun due to the glare and dark theme. But upon testing it actually works really well and is easily legible.
One addition that I really liked during the design process is the half progress bar I added for the “Running Music View Screen” it really made sense since the user can still view their current song with great visual and the ease of changing songs with just a swipe instead of having to press the next button and also being able to check how far they have to go to reach their goal.
Although as per the deliverables we were only required to create four pages for this project, I really wanted to explore my creativity and see the real process of designing an app which is why I ended up creating 7 pages.
Final Results:
After completing this project, I really got to a taste on how designing an app is for a possible client having to fulfill their needs and using everything I have learned to design and include the features that are needed.
I also noticed even though a UX’ers might have provided Mid-Fi’s it does not mean it will be the final product and there’s always problems and input that might work out better than what they might have thought was perfect. I’m really curious to design for a client and see how a project goes from start to finish and also going back and for with a UX’er to develop an app.