Graduate Project

I intentionality created my graduate project to demonstrate my capabilities within website design and development as well as show my strong interest within fitness (running). I am highly interested in working within sport/fitness design, so the strategic purpose of my project is to get me into the industry to hopefully achieve my career goals and aspirations.


Please visit to view my final website!

Check out my work on Behance –

Updated MOSWOW With Justifications


  • Provide training plans in a visual, interesting way (not basic table)

I have achieved this through visually displaying the training data in colourful bar charts. I used Chart.js to produce the charts, pulling in the data dynamically from a database, dependant on the users selected training difficulty. I have used imagery behind the charts to make it more visually appealing, as well as relating to contemporary website design trends.

  • Offer marathon training plans of different difficulties

I have provided beginner, intermediate and advanced 15 week marathon training guides to appeal to a range of running abilities. I collaborated with Lewis Brown who is studying (MSc) Sport and Exercise Science; he helped with producing the training content. I have provided explanation of the different difficulties upon registration.

  • Connect to Strava API in order to progress through plan

After lots of experimentation and several errors, I managed to get Strava’s API to work. The integration of Strava is a unique selling point of my project. When the user reaches the end of the week, it checks their Strava activities to see if they have ran enough in order to progress to the next week. This use of gamification aims to help support and motivate users to keep on track with their training.

  • Be responsive

I strategically designed and programmed my website responsively so that it can be accessed from any device; this is highly essential for contemporary websites. I carried out testing on various devices, adapting my stylesheet to suit different media queries


  • Allow users to register/login and store their training guide progression

I successfully set up my own registration/login system for the website. When the user logs in, it pulls in their sign up date to determine what week they are currently on. All the training plans start on a Monday so if the users sign up date is not a Monday then it commences from the following Monday. I incorporated a runner icon within the guide to clearly display users progression through the week, for example if it is Wednesday then the icon is displayed under ‘W’.

  • Be personal

I have used personal prompts throughout the guide (‘well done Kaylee’) to help motivate the user, pulling in users name as well as their Strava profile image.

  • Provide running tips (throughout or on completion)

 If the user runs enough weekly miles then they receive a training tip. I decided to provide these tips after each week rather on completion as it helps to motivate users to get all the required training done.

  • Incorporate sharing features

I have added sharing buttons so that users can promote Pulse through Facebook, Twitter and Email. I pre-populated the content for Twitter and Email; making it easy for users to share, strategically providing a link to the website to try increase traffic. I also used Facebook’s developer tools to set the image that would get shared on Facebook, strategically choosing the logo to help promote the brand.


  • Total up users training statistics on completion

When the user reaches the end of their training, it totals up their personal training statistics. For example, they can see the total amount of miles they have run, time, calories burnt, elevation etc. I have used icons to make this more visually appealing as well as relate to contemporary website design trends.

  • Use subtle animations throughout website

I have used hover animations on the main buttons as well as for the icons in the ‘How To Use This Guide’ section and Completion Page. The training charts also animate as they load. To develop further in the future, I could look into employing more subtle animation, possible for the text headings to further enhance users experiences. 

  • Offer training plans for other common race distances

I have specifically focused on the marathon distance for my graduate project, however to develop my website further I could add other common race distance such as Half Marathon, 10k and 5k. This is something I may consider adding if I successfully promote my project and get runners using it for their marathon training.


  • Track users running activities

Users will externally use Strava to track their runs and Pulse to support and motivate them through marathon training. Through the integration of Strava, hopefully my website will draw upon its popularity and attract its users to my site.

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.