PULSE – Website Testing

I carried out website testing on various devices to ensure the functionality and styling was working correctly. Through testing, I realised that the portrait styling was sufficient but I needed to amend the styling for landscape views. I resolved this through created another css media query for orientation=landscape. The below screenshots show some of the errors that I resolved.


As well as the styling, there was also a few links that weren’t working correctly, of which I successfully resolved. I got some members of my target audience to test my site, they registered and tried out the training guide. From this, my target audience gave me some useful feedback of which I acted upon. I added an option to preview week one if the users doesn’t sign up on a Monday, as well as edited a few spelling mistakes and working more on form validation. Previously if the user entered a username but no password, it would still let the access their guide. To overcome this, I altered the code so that it checks the database to see that the password and username match and if not an error message appears.

PULSE – Social Sharing

I added Facebook, Twitter and Email sharing buttons on the home page and on completion of the training guides. Screen Shot 2016-05-31 at 13.36.04

I pre-populated the content that gets shared via twitter and email. This make is easy for users as they only have to press a few buttons. I provided a link in the content to encourage more to visit PULSE.

Screen Shot 2016-06-02 at 12.08.52

Twitter Social Sharing

Screen Shot 2016-06-02 at 12.06.17

Email Social Sharing

On Facebook, you are unable to pre-populate the content. However, I used Facebook’s developer tools(https://developers.facebook.com/) to control what image, title and description gets shared to Facebook.

Screen Shot 2016-05-26 at 10.43.30.png

Hopefully through adding social sharing buttons to my website, it will encourage users to promote my project and increase traffic to the site.

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 – https://www.behance.net/gallery/37999921/PULSE-Icon-Designs

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