Born to Run(nr)

P2 Case Study — 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, 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.

Logo designed by yours truly


Research for Runnr felt quite easy. I immediately thought of Nike, their website, stores and clothing after being assigned this app. Is it a bad thing that I thought of them right away? Not so much. Does their brand serve as a reference? Totally! Will I copy whatever Nike’s been doing? Not even Steven. No matter how great a designer is, they will always browse for reference and gather notes from what other projects, apps or websites look like.

I didn’t have a UX team to work with, and at the time I had little experience with conducting user research. I felt it was still necessary to set up some interviews and get a feel for the the relationship between running & music with those who run often. I have a handful of family and friends who run, so to reach out and conduct interviews was so problem.

Results were okay. Nothing that really surprised me, but what I noticed after conducting these interviews is that there are two types of runners…

Aspiring Runner: A aspires to become fit, works through the pain to get results.

Motivated Runner: Someone who enjoys running, doesn’t consider it a chore and is part of a “running culture”

I was very amped to get cracking on starting the style tile / high-fidelity screens. I wasn’t worried about any set backs. I knew this was a time consuming task but I was more than ready for the challenge. If there were any issues that stand out it was keeping everything consistent from typeface to weights, alignments, icon thickness etc. These are things you don’t think of until you sit back and review your work.

Design Inception Worksheet

Please excuse my chicken scratch.

Let’s Trim the Fat, What Some Key Points?

When digging deep into our interviewee’s answers, and constantly asking ourselves WHY would someone want to use Runnr we came up with these key points..

  • To feel more drive to accomplish more
  • Maximize your capabilities

Regardless of the type of runner you are (aspiring/motivated) these are the reasons why you run and use the app.


Creating a moodboard is always a fun task, browsing the web for images and websites really helped the process. Some images such as the Nike shoe, Barcelona jersey (bottom right) and racetrack were a few things I knew I was going to incorporate.

Style Tile

Damn That’s Bright

The Style Tile really helped me kick off on designing the prototypes. A lot of time was put into selecting colour palette, gradient, icons, buttons, images and text so from there it was simply copy and pasting from my style tile. I find the concept of a Style Tile quite brilliant because you’re making your own cheat sheet. From here I copy and pasted almost everything which then made the process of designing the prototypes much easier and faster. A few changes were made along the way such as colour selection and icon selection but I think that’s expected. I’m overall quite happy with the Style Tile, if there was any issues when it came to this part of the project is was simply finding out what is the difference between Style Tile and Style Guide. Icons designed by madebyoliver from

Style Guide

Wireframes → High-fidelity

Carol and I selected these wire frames because we felt that they represented the app best. We wanted the wire frames to each look different from each other so we’re challenged with keeping it consistent. It wasn’t until I was rather deep into my prototypes that I found out how loose of an idea the wire frames were and how much I could branch off from the layout. Lesson learned, from now on I’ll be sure cover details like that with my instructors and UX designers before I assume how it’s supposed to be.

Below are selected Runnr wireframes compared to the final design.

Track Uno = Banger

This is a good example of me simply copying and pasting from the style tile. Everything except for album covers were selected from the tile. Also they weren’t on the wireframe I made sure I added the “shuffle/repeat” buttons and track time.

Dash screen showing the user the number of steps, km, calories burned and duration of their run


You can browse through the Runnr prototype here.

Looking Back

Throughout the Case Study I share problems I faced. Looking back I begin to appreciate these problems more and more because they serve as learning curves. Things such as alignment and consistency are things that are forever cemented into my thought process when it comes to tackling projects such as these.

Keeping our target users in mind I wanted to create a nifty and sleek digital experience. It’s not often that designers are tackling projects that give them the freedom to push style boundaries and come up with a funky and lively product. I will admit I prefer the projects with style limitations because I find them more challenging. Regardless I always love to push the boundaries and see how I can incorporate my signature style/approach in a digital experience.

Like what you read? Give Giuseppe Morcinelli a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.