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

Final Designs

Here are the final designs for our Magna Carta application.

Main Screen – features a zoomable high resolution image of the Magna Carta. The clients wanted the Magna Carta document to be a main component of the app, hence we have clearly adhered to their requirements. The design features a simple navigation bar, whereby users can click the burger button to access the menu in order to filter the overlays.

main-screen1.png

Menu – the menu design is very clear and simple. Each category is accompanied by a relevant icon, using iconography really  helps to make it more appealing for users and is also a common convention of iOS apps. The menu bar has a scrolling gesture allowing you to further filter the clauses by the various different categories.

menuscreen1Clause Details – the translation and contextualisation of the selected clause appears in a translucent box that slides up from the bottom. It is clear and easy for users to read and the Magna Carta document is still the prominent feature.

clause-details1.pngOverall, we are pleased with the design of our app, the simplicity really helps to make it easy for users to use and navigate without difficulty. The design is sophisticated and professional looking, which has been achieved through adhering to Apples iOS conventions, as well as Salisbury style guide. The designs show creativity and originality, especially within the category iconography. In the next design post, I will clearly discuss how the designs have met the assessment criteria.

final-designs.png(designs by Kaylee)

Design Experiments

Based on the various improvements that we agreed upon from our initial designs, we have creatively experimented further with different designs to consider for our app. We experimented with a range of colours from Salisburys’ style guide in order to see which colour scheme worked best for our application. We also experimented with different ways to display the detailed/selected clause information, for example on a new screen that would totally cover the Magna Carta document (1), sliding up from bottom which half covered the document leaving the top exposed (2), and a temporary pop up box which would be centrally placed  stopping navigation briefly but showing the document was still there(3,4). Here are some of the design experiments:

1.designs 2. designs2 3. designs3 4. designs4
(designs by Kaylee)

We liked the addition of the navigation bar in these improved designs and felt this helped to make it more accessible for the menu. The use of the apple menu button (top left) also helped to make it adhere more to Apples iOS Guidelines and using these common button icons means most iOS users will already have existing knowledge as to what it means. The slide out menu of categories is another feature that the group liked, allowing users to easily filter their search on the Magna Carta clauses. If there was no filters, the whole document would have overlays due to the vast amount of clauses, so the use of categories helps to narrow down the overlays, making it a lot clearer for users. The use of icons to go alongside each of the categories helps to make it more visually appealing; it is important that the icons we use are readily understood, hence why we have used a key icon for key clauses and a money icon for debt etc. We decided that our favourite colour scheme was the dark brown with the gold overlays (3). We felt that these colours stood out most and fitted best with the design. The blue was slightly to powerful and took away from the documents importance. The simple design helps to make it clear and easy to navigate and read without difficulty or prior knowledge. We decided that having the clause information/detail slide up from the bottom of the screen worked best as it allowed users to still see some of the document unlike the others, also it was more native to apple devices. The clients, Seif and Steph also said they liked the idea of the details of the clause popping up from the bottom, and covering the lower half of the screen with a translucent background (similar to design 2). A main improvement to consider is proportions, as at the moment the font and icon sizes are too big. Apples Guidelines suggest – ‘Text should never be smaller than 11 points, even when the user chooses the extra-small text size. For comparison, the body style uses a font size of 17 points at the large size, which is the default text-size setting’ (Apple 2015). It is also important that ‘all icons in your app look like they belong to thScreen Shot 2015-04-27 at 12.41.21e same family in terms of perceived size, level of detail, and visual weight’ (Apple 2015). This is another feature that needs to be improved upon as at the moment some of the icons are filleScreen Shot 2015-04-27 at 12.40.04d in whereas others use an outline. Apples iOS Developer Guidelines suggest ‘you should provide two versions—one for the unselected appearance and one for the selected appearance. The selected appearance is often a filled-in version of the unselected appearance’.

From this, we will go on to further improve the designs, making amendments to the proportions, including menu, text and icon size. We will also make sure all icons are consistent and create unselected and selected icons in order to further adhere to Apples conventions. Also, in the above designs the colours are only rough so we need to get the hex codes of the colours to ensure they exactly match the style requirements. Additionally, we will go on to further research the Magna Carta clauses in order to clearly define the categories that will be displayed in the menu bar.

Apple, 2015. Designing For iOS [online]. Available from: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/[Accessed 21 April 2015].