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.

mockup2

Please visit pulsemarathontraining.co.uk to view my final website!

Check out my work on Behance – https://www.behance.net/gallery/38147049/PULSE

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.

Updated MOSWOW With Justifications

MUST

  • 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

SHOULD

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

COULD 

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

WON’T

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

PULSE – SEO

SEO is the process of maximising the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine. I employed Search Engine Optimisation techniques on my website to try achieve this, using Google’s Webmaster Tools as guidelines – https://www.google.com/webmasters/.

I submitted my site to Google and added the suggested title tag and meta tags to the pages of my website, as well as alt attributes to images.

Screen Shot 2016-06-02 at 12.39.57.png

I used Google Adword to search for keywords to use throughout my site – https://adwords.google.com/

Screen Shot 2016-06-02 at 12.48.12.png

Google prioritises mobile-friendly sites, so I used their tool to check my site comes user this category…

Screen Shot 2016-06-02 at 12.51.20.png

I also used GTMetrix to test my website, this provides a report of the site speed and ways to improve its performance, of which I acted upon.

Screen Shot 2016-06-02 at 13.05.50.png

Curently, PULSE is appearing on the 3rd page of search results. I propose to continue to optimise my site using Google’s tools in order to try get it to display on the 1st page.

Screen Shot 2016-06-02 at 12.54.47.png