Jordan Cupples @jordan-cupples98 - Tumblr Blog

Title update

On each page of my website they all start with a title and a background image. Originally I had exported and used a PNG for this but it was pointed out to me that this wasn’t a good option if the a user was blind and needed to use a screen reader, due to it being a PNG the screen reader would not pick up the title that was within the image so I had to change this to make the over all website more accessible.

As you can see below I was able to separate the text and image so that it can be picked up by a screen reader. this was done by adding a heading, filling in the correct tile for the page and making it absolute. This allowed me to change the position of the text to be in front of the background image and be clearly seen.

Updated Title

Previous Image Title

#ixd304

Auxillium (Apple watch)

Auxillium user flow

Once I had completed the wireframes I then moved to designing them on Figma. Below you will be able to see the flow of the app mapped out, due to the app having a limited screen size the navigation has to be simple and easy to use. Over all i feel that I have executed this to a high standard and created an aesthetically pleasing and easy to use apple watch version of the app.

HRM

Below are some high resolution mock-ups that show how the app would look like while being used and beside the other apps.

#ixd303

Apple watch (wireframes)

Below are the main watch faces that I want to be accessible for users that have the Auxillium app. These faces consist of the fallowing:

Home page

Contact page

Sign out page

Emergency contacts page

call page

End call page

Nearby page

Directions page

#ixd303

Immersive Website Link

https://www.jordancupples.com/304/heroes-villians-homepage

#Ixd304

Interactions

Image interaction

To make my website more immersive and pleasant to use I added some small interactions on each page. On images I added a scroll into view interaction and choose the slide “from bottom” action so that it slides in to the view of the user as they scroll down. I choose to delay action of 100ms, this gave the interaction more time and presented a better outcome while viewing.

Block Quote interaction

The second interaction that I added was to the block quotes. This interaction was similar but slightly different to the image interaction. I added the same slide action but changed the direction to “from left”. This was the only change that I made to the interaction. the reason i changed the block quote interaction to “from left” was because I felt it better suited text simply due to the text being left aligned, I feel that this added a consistent feel and pleasant outcome.

#ixd304

Hover states

Below are the three hover states that i implemented in to my website to make it more immersive.

Nav

The nav bar has a simple but effective hover effect that changes the colour from white to pink, this lets the user know that it has an action and shows them where it will take them. I feel that this simple design makes the website very accessible and easy to navigate through while keeps a clean and sleek feel.

Action button

This action button below is located on the homepage and starts the user off on there journey through the Sherlock Holmes immersive website. To make this button stand out i went for a bolder design of hover effect. As you can see below the button changes from a block pink with white text to pink text and a pink outline.

Graph

The third hover effect of my website is found on the stats and statistics page. I implemented this within the two graphs for character appearances and common clues. This hover effect activates when the user moves the curser over any of the bars. As you can see below a subtle bubble appears and shows the information of the bar that is being hovered over.

#ixd304

Map Update

Originally on my stats and statistics page i created the infographic below labelled version 1. This infographic displayed a clear and easy to understand range of stats but lacked to show where these places are. This was pointed out to me through some feedback that I had received. this then made me explore the option of adding a map of England with the same data but displayed where these locations are on the map. below you will be able to see version 2 which i designed and upgraded too later down the line. Overall I feel that this is a much stronger infographic and matches the theme of the website while being much more aesthetically pleasing to the user.

Version 1

#ixd304

Stats & Statistics Update

Chart.js

Chart Examples

Old Graphs

Below are my original graphs that i made on Figma and uploaded to my website as images, during week twelve i was given some feed back and told about the Chart.js resource website. I then started to look in to it and see how to implement this in to my site.

New Graphs

Below are the upgraded charts that I have implemented into my website. These charts are much more user friendly and accessible for its audience as well as being interactive. when a user hovers over each bar a small text box will appear telling them about that bars stats.

This is an example of the bar when hovered on by the users cursor. I feel that this interaction makes the page much more interesting and will hold the users attention for longer than previously.

Code

Below is the code that I altered and added to my website in order to display the new Graphs. Through it was at a very basic level it was the first time I have used java and over all I enjoyed the experience. In the near future I would like to expand and improve on this skill.

#ixd304

303 Auxilium updates

Icon Update

Visual grammer Update

HRM update

User flow Update

#ixd303

SUS (System Usability Scale)

This scale was created by John Brooke in 1986. This scale measures the usability of the product. Some of the benefits are as follows: It is a very quick, cheap and easy scale to administer to participants, it Can be used on small sample sizes with reliable results and Is valid – it can effectively differentiate between usable and unusable systems.

The SUS consists of the following 10 questions with five response options for respondents; from Strongly agree to Strongly disagree-

I think that I would like to use this system frequently.

I found the system unnecessarily complex.

I thought the system was easy to use.

I think that I would need the support of a technical person to be able to use this system.

I found the various functions in this system were well integrated.

I thought there was too much inconsistency in this system.

I would imagine that most people would learn to use this system very quickly.

I found the system very cumbersome to use.

I felt very confident using the system.

I needed to learn a lot of things before I could get going with this system.

Once these questions have been answered, I was able to gather these responses and work out my apps score. Scoring above 68 would be considered better than average and anything below 68 is below average.

Results

Below are the results of the SUS test that i carried out for the Auxillium app. Due to this being the first time using this method i used a small group of testers in order to manage the test properly. If i was to develop this app further i would use a much larger group to test the application. The scores that came back are extremely positive and pleasing for me. although the app Isn't perfect i know Im on the right track.

Scores

Participant 1 -100

Participant 2 - 92.5

Participant 3 - 90.0

Participant 4 - 100

Average Score = 95.625

#Ixd303

Website Logo

For the website, I wanted to design a simplistic modern logo that matched the theme and style of the site. Before starting I already knew that I wanted to make the logo linked in some way to Sherlock's home. The reason behind this was that I wanted the logo to also act as the home page button. By combining the logo and home page button and designing the logo around Sherlock's house I feel that this will be a nice overall touch to the website. The home button will be identified by something that clearly has a link to 221 baker street.

While looking for inspiration I found it hard to find an item or symbol that better embodies/represents Sherlock's house than its address. This lead me to look into the address and the various ways it was visualised. The two main styles that I was drawn to was the metal numbers on the Sherlocks house door or the modern baker street style.

Once I had established that the logo was going to be centred around the address then it was just a case of matching it in with the websites colour theme and typeface. Below are the two variations that I choose, one inverted and one not. Overall I am very happy with the look and feel of the logo and feel that its simplicity complements the websites nav and footer.

#ixd304

Website illustrations

The first images below were the basis for what would become my own digital illustrations. These images were used in the example website and caught my eye from the start. I knew I wanted to use these images as inspiration for my illustrations so I kept them in view while designing my own. When designing my illustrations I wanted them to reflect the body language of the original images but styled in a modern sleek feel with matt colours.

After designing my illustrations around the original images I then branched out and started to create my own header images for each page.

Once I had designed the illustrations I felt that they needed to be framed and after some research, I came across the use of blobs. I instantly knew it would complement my illustrations and tried it out. I felt that the combination was a success and framed the illustrations the way I had envisioned.

#ixd304

Website Wireframes

Below are some simplistic wireframes that allowed me to make a basic plan of how the immersive website would be structured and laid out. This let me see a visual hierarchy of the website and how the user would move through it. Once these were completed I had the blueprint for the website and could start to build it.

Homepage

Life & Times

Characters

221 Baker Street

Stats & Statistics

#ixd304

what3words

Recently for my 303 project, I was told about a website that can tell where you located based on 3 specific words that have been given to that location. Due to my project being involved with locations etc I wanted to look into it and see what it might offer or what I could learn from it. Above is a screenshot of the website, it shows a map that is covered in squares and this is where it gets specific, each of these squares has its own three words that identify it. I found this to be a very interesting concept that has a lot of potential.

#ixd303

303 HRM 1

#ixd303

Auxilium Branding

Strapline

Visual Grammar, Brand Values & Tone of Voice

App Icon

#ixd303

User Persona

#id303

Trending Blogs

Recently Viewed Blogs

Jordan Cupples