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 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


Target Audience

The target audience for my project are runners, specifically those seeking to train for an upcoming event. The website aims to cater for a range of runners all varying in experience, from first times to professionals. It aims to achieve this through providing training plans of different difficulties.

Screen Shot 2015-03-05 at 22.21.18

Runners would use the website in order to not only informatively guide them through the necessary training but also to motivate them to get all the set runs done. From personal experience, training for a marathon is intense and requires high levels of motivation and commitment. Thus, using Strava and gamification elements (can only unlock the next week once runs have been tracked on Strava) it helps to motivate users through their training. Testing with the target audience is crucial and a process I will continually undertake. I am a member of a running club so will regularly test my work with the club. I will gain feedback and opinions from runners throughout all the process, allowing me to continuously modify the website to make it more successful with its intended users.

Graduate Project Proposal

For my graduate project, I intend to produce an interactive training guide for runners. The guide will be in the form of a website, it will be horizontally scrolling and will employ a simplistic, timeline design, clearly guiding users through the training plan. From research, I found that most existing plans are displayed in a table, some are also highly text based and thus this can be quite mundane for users. I propose to produce a more unique, visually appealing training guide for runners. The duration of the guide will depend on the chosen distance, however the plan lengths will adhere to common conventions.

strava-logo-jpgStrava’s API will be integrated into the website, Strava is a popular social fitness application that allows users to track their activities, providing various spatial,
temporal and biometric data such as time, distance,
pace and elevation etc. I propose to create a training guide to work alongside Strava; the website will pull in their Strava data and users would only be able move on to the next week of the guide once they have completed all the set runs. This will hopefully encourage users to stick to the training plan and motivate them to get all the set runs completed.

View Graduate Project Proposal Presentation Slides