Exemplar Work (STRAVA)

Strava is a key work associated with my project due to the integration of its API. I extensively researched Strava for my dissertation, titled: ‘An Ethnographic Exploration Into How Strava Augments The Social World Of The Serious Leisure Activity Of Long Distance Running’, so developed an in-depth understanding of the application. I am also a keen user of the popular social fitness application, aware of its numerous social and gamification features. Reflecting upon my broader research, I strategically employed gamification elements within my website due to it being a highly favoured feature within Strava.

Screen Shot 2016-05-28 at 15.45.52

I took inspiration from Strava’s data visualisation and hence decided to display the guide in simple bar charts. I am inspired by Strava’s use of icon, and will design my own running related icons to feature within the site.Screen Shot 2016-05-28 at 15.56.39.png

I took inspiration from Strava’s website design, particularly the login/registration. I like the use of a large running related background image with a transparent text box and will consider something similar for my project.

HTML Responsive Templates

I created HTML templates of my initial designs. It was essential to consider how my project would display on mobiles from the early stages of my project development. Here are my responsive templates…

To develop the bar charts for the training guide, I used HTML divs, Boostrap grids and CSS, however to cover all possible mileage this would be fairly time consuming. To overcome this, I am looking into using Chart.js, open source HTML based JavaScript charts.

Initial Designs – Training Guide

I came up with various design ideas to display the training guide, I produced these using Adobe Photoshop. I wanted to display data visually rather than in a basic table but also wanted it to be clear and simple for users to understand. I incorporated bright colours and the runner icon to make it visually appealing to the intended audience.

guideguide2guide3 copyguide5

From this, I went on to develop the first idea as felt that using bars makes it extremely clear for users to see the required training runs. For example, for shorter runs the bar length will be shorter and for longer runs the bar length will be longer. I transformed my digital design into a html mockup as well as creating mockups for the home and login pages.

Initial Research

I looked at existing training guides for inspiration for my graduate project. I choose to review Nike and Asics as they are a highly popular fitness brands.

Screen Shot 2016-05-28 at 15.39.38


-displayed in a unique way with the use of seven coloured squares clearly showing the set runs for each week

-quite a large amount of text used
-relies on users to remember their training progression (what week/day they are on)

Screen Shot 2016-05-28 at 15.42.50.png


– personal plans based on users running experience
-use of little text, making the plan clear to follow
-shows users progression

-displayed in the traditional table style design



I used MoSCoW techniques to prioritise the development my project. I propose to get all the MUST completed first, then work through the SHOULD and COULD if time is permitted…


  • Provide training plans in a visual, interesting way (not basic table)
  • Offer marathon training plans of different difficulties
  • Connect to Strava API in order to progress through plans
  • Be responsive


  • Allow users to register/login and store their training guide progression
  • Be personal
  • Provide running tips (throughout or on completion)
  • Incorporate sharing features


  • Total up users training statistics on completion
  • Use subtle animations throughout website
  • Offer training plans for other common race distances


  • Track users running activities