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.

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

Integrating Strava’s API

After lots of experimentation and several errors later, I managed to successfully integrate Strava’s API into my website. The official documentation can be found here – https://strava.github.io/api/, for further support I used this PHP specific Github repository (https://github.com/iamstuartwilson/strava).

When users register to my site they are directed to this page stating when their chosen plan starts as well as the link to connect to Strava…

Screen Shot 2016-05-27 at 21.36.20

Logging in to Strava will then direct users to this authorisation page. If the user accepts the authorisation, their Strava access token is stored in my database and I am able to access their activity data…Screen Shot 2016-05-27 at 21.38.21

I access users Strava data at the end of each week, comparing their weekly total to the required total of selected plan. If users run enough then they receive a tip and can progress to the next week. However, if not, they are prompted to run more! From feedback, my target audience preferred that it checks at the end of the week rather than each day, as this allows users more flexibility with the training.

Screen Shot 2016-05-27 at 21.39.49Screen Shot 2016-05-27 at 21.45.20

Snippet of my integration of Strava’s API:

Screen Shot 2016-05-31 at 12.23.56.png

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.

Broader Context

My graduate project closely relates to my dissertation, whereby I explored how Strava augments the social world of long distance running; thus some of the theory can be transferable to my practical work. I have reviewed multiple secondary literature as well as undertaken primary research, gaining understandings into why people run, motivations of participants and uses of digital media. This knowledge is highly useful for the proposed project and has helped me to greatly understand my target audience.

Historical Context:
Shipway (2010) suggests that runners are now accepted as a significant sporting interest group in society, proposing that distance running in particular has become ‘a hobby, an enthusiasm, an obsession and for many, a life-changing experience’ (p.11). Thus this increasing popularity of running offers a rationale for the production of digital media products targeting participants of the serious leisure activity. Health and fitness has become a vast growing app category, with multiple running applications now available to download. My proposed idea will work alongside Strava, a contemporary, popular fitness application. Aiming to improve users experiences of running, as well as help to improve their fitness for upcoming events.

Social and Cultural Context:
The sociological concept of social worlds (Unruh 1980) is applicable as the website is targeting the social world of running. There are certain norms and values associated with the social world and thus it is important to understand these in order to produce a website that lives up to runners expectations. Due to being a member of the running social world, I will ensure that I use appropriate running language in order to verbally connect with the users, as well as appropriate visuals that appeal to runners. The social world of running is diffuse and thus not limited to a certain culture or geographical area, therefore I need to ensure the project appeals to the wide demographic of runners.

Aesthetic Context:
There are various theoretical concepts related to the aesthetics of my project:

Semiotics – this is the study of signs and the cultures that use them (Bertin 1967). I need to ensure that the visual aesthetics I use are easily identifiable by the running culture.

Data Visualisation – this is the representation of data in graphical or pictorial formats. I need to closely consider how to visually present the training guides rather than in a basic, traditional table.

User Experience Design – this involves studying and evaluating how users feel about a system (Gube 2010). I need to thoroughly consider the usability, accessibility and efficiency; continuously testing with the intended audience will thus be crucial.

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