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 (http://ianlunn.github.io/Hover/). 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.

 

Advertisements

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.

IMG_2227IMG_2228

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.

homeiconshomeiconshovercompletioniconshover

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

PULSE – How This Guide Works

Reflecting upon feedback and my research on exemplar works, I decided to add more information to my home page. Originally, my site just featured the top image, however I have now made it parallax scrolling, in order to relate to contemporary website trends and to provide users with more information about the PULSE…home.png

This addition allows users to find out more about the guide before they have to register, it clearly explains that it provides 15 week marathon guides that integrate Strava. Reflecting upon existing works and contemporary design trends, I decided to add icons to support the text in order to make it more visually appealing.

Exemplar Work (NIKE)

It was suggested to have an about section offering support to those unsure of how to use my guide to its full potential. I have aimed to use an intuitive design so the guide is clear and simple to follow, however some users may require additional support. Through research I found Nike+ has a section labelled ‘How This Plan Works’, I propose to add something similar to my project.

Screen Shot 2016-05-28 at 15.54.25

Conducting research is highly important when working on projects; it is essential to be aware of existing materials, critically evaluating what works well and what doesn’t and reflecting upon this.