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.
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.
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.
I have taken many website design inspirations from MyAsics, including the use of large, imagery, bold clear fonts, and coloured buttons. I really like the parallax scrolling home page and will consider developing something similar for my home page.
I set up localhost on mac so I can locally test my php files:
I set up a user database for my registration/login
When users register to my site, their details are added to the user database. I have set the training difficulty field type to enum, so Beginner = 1, Intermediate = 2 and Advanced = 3. I have also added a sign up date field of type=timestamp. So when users log 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 the guide commences from the following Monday. The database also stores users access token from Strava’s API; when the user connects with Strava through the OAuth protocol, their token gets added to the database. This then allows me to pull in their personal Strava data in order to see if they have done enough miles to progress to the next week.
FEEDBACK: Originally, I was using MySQL statements to connect, select and update the databases. However, from feedback it was suggesting to look into Propel, an orm library. I installed propel using terminal and have used Propels Basic C.R.U.D operations.
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…
I came up with various design ideas to display the training guide, I produced these using Adobe Photoshop. I wanted to display data visually rather than in a basic table but also wanted it to be clear and simple for users to understand. I incorporated bright colours and the runner icon to make it visually appealing to the intended audience.
From this, I went on to develop the first idea as felt that using bars makes it extremely clear for users to see the required training runs. For example, for shorter runs the bar length will be shorter and for longer runs the bar length will be longer. I transformed my digital design into a html mockup as well as creating mockups for the home and login pages.
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.
-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)
– 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
I used MoSCoW techniques to prioritise the development my project. I propose to get all the MUST completed first, then work through the SHOULD and COULD if time is permitted…
- Provide training plans in a visual, interesting way (not basic table)
- Offer marathon training plans of different difficulties
- Connect to Strava API in order to progress through plans
- Be responsive
- Allow users to register/login and store their training guide progression
- Be personal
- Provide running tips (throughout or on completion)
- Incorporate sharing features
- Total up users training statistics on completion
- Use subtle animations throughout website
- Offer training plans for other common race distances
- Track users running activities
I sketched out some ideas of how I could visually display the training data rather than in a basic table.
Using Pinterest as a tool to gather inspiration…