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 –

Meeting Assessment Criteria

AC 1.   Your work demonstrates your design exploration through the creation of a substantial media artefact.

For my website, I have used a substantial range of programming languages as well as various digital design techniques. I explored ways to solve a design problem with existing training guides and have produced visual, personalised marathon training guides that integrate Strava’s API.

Design Exploration Posts: Initial Design IdeasWireframesInitial Designs – Training GuideHTML Responsive TemplatesWebsite ImageryWebsite StylingLogo DesignsPULSE – Final LogoPULSE – Icon DesignsFinal Website

AC 2.Your artefact is situated according to contemporary design and development practices.

I have employed various contemporary website design and development techniques throughout my project. In regards to website design is the use of large high-res imagery, visual icons to support text, and subtle design animations. In regards to website development is the use of javascript libraries, responsive css media queries, social sharing and SEO. For the majority of my designs I have used Adobe Illustrator and I have used Adobe Photoshop for the image edited. As for programming, I have used HTML, CSS, Javascript, PHP and MySQL.

AC 3. Your artefact demonstrates your understanding of exemplar works and notable practitioners in the field.

Throughout the production of my graduate project, I have researched exemplar works, critically evaluating what works well and what doesn’t and reflecting upon it for the design and development on my website. The key works that I have extensively researched are Strava, Asics and Nike.

AC 4.Your artefact demonstrates evidence of considerable organisational and project management knowledge and skill.

At the beginning I set out what tasks need to complete and used MoSCow techniques to prioritise each task. I have work worked through this document, working hard on my project consistently throughout the months. I updated my MoSCow document at the end of my project, providing justification of how I achieved the set tasks. I collaborated with an external contributor to enhance my project and make the content more credible. This whole blog shows my main stages of development, demonstrating my organisation and project management

AC 5.Your Graduate Project demonstrates your appropriate selection and use of materials, processes and environments in the production of a major creative work.

The above criteria all relate to this. I have appropriately researched existing works and solved a common design problem (all plans being displayed in basic tables). Through adopting contemporary design and development trends and working through prioritisation processes, I have been able to successfully produce PULSE. My graduate project fit within the training guide environment, yet offers something more unique. It provides the guides visually in a more appealing way, and integrates Strava’s API to make the guide more personal as well as employ gamification techniques.

Hover Animations

Screen Shot 2016-05-28 at 16.01.29

To improve users experiences on my website, I added a few animation using hover.css ( I added hover animations to the green buttons as well as to the icons in the ‘How To Use This Guide Section’. The charts throughout the weeks of the training guide also animate as they load. To develop further in the future, I may look into employing more subtle animation, possible for the text headings to further enhance users experiences.


PULSE – Icon Designs

I created all the icons for my website in Adobe Illustrator. I designed the icons with a white outline and then when hovered over they become filled. For the about section, I made the icons brightly coloured, linking to the coloured bar charts to come within the guide. On completion I have made the icons red, making the users training achievements distinctly stand out as well as linking to the logo colour scheme.


View on Behance –

PULSE – Completion Page

I decided to add a completion page so that when users finish the guide, they can see their total training statistics. This is an original idea that I have not found within any other plans, emphasising the amount of training that the users has successfully committed to. I have pulled in users Strava data and totalled up their total distance, time, calories, elevation, achievements and average pace. I included icons alongside the data to make it more visually appealing, I designed these in Adobe Illustrator.

Here is a screenshot of the completion page…

Screen Shot 2016-05-27 at 21.59.08.png

And here is a snippet of my code:

Screen Shot 2016-05-31 at 13.04.20.png