Finalised Narrative

We have created a scenario and storyboard to help establish our concept. This should also help us with the creation of our final video.

Mrs Anderson comes in to watch TV, she uses her iPad application to browse her live TV recommendations.

She selects to view a programme, using the iPad in place of the remote. 

Mrs. Anderson’s daughter Heather gets home and wants to check out what she can watch in the evening. Mrs. Anderson logs out of her MySky account and hands the iPad to her daughter. After logging in to her personalised account Heather can browse through popular listings from her demographic and view her recommendations. 

She sees a programme in her recommendations that she fancies watching later, Heather can opt to set a reminder or can record the programme via the iPad application. 

Mrs. Anderson suggests she and heather watch a box office movie together because they have credit on their account due to underspending that month. Over time MySky will learn about Mrs. Anderson and her families viewing habits and will make suggestions to alter or upgrade her package. 

Design Iterations

The images above show some of our design iterations, as a response to our feedback we did try and experiment with adding more colour into the design, but we found this overcomplicated our interface. We tried changing the icon colour to black (shown above) but didn't like the way this looked and felt our design worked best with a limited colour scheme. Another aspect we developed was the typography, initially we stuck to Helvetica Neue Light, as it is a reliable and well known. However, our feedback suggested we try out something different, above we used a font called 'Quick Sand 300' but we thought it was too bold so in our final design we opted for 'Ankor regular'.

Above shows what we thought would be our final design however from completing user testing we realised that we had not included an option for users to get to their TV guide. We added this feature along side the Recording & Reminder buttons on the 'My Hub' home page, as shown bellow. 

Above is another users profile we decided to add colour to our design by giving each individual user their own personalised colour scheme.

User Testing Final Prototype

We carried out user testing on our final prototype to ensure our interface design was simple to navigate through. When we asked the user to set a recording they asked 'how to I get to the guide?". This is a curtail element of the interface that we almost missed out, we will be sure to add a TV guide page and button to the interface. A feature we were concerned about was the substitutions page, we were concerned that users would not understand how to navigate through the page, however, luckily the user seemed to be able to navigate through the page quite easily.  

Colourscheme

We received feedback on our new prototype design, it was found to be much improved and visually appealing. One suggestion we received was to implement one or more other colours within the design. We chose 4 complimentary colours to experiment with, if we find that this is beneficial we may include this within our prototype. We have decided to bring our concept to life using Proto.io

Hi-fidelity Wireframes #2

We redesigned our initial mockups in response to our feedback. We altered the colour scheme to a turquoise shade of blue which we think gives the interface a modern finish. We also filled in the icons on the MySky home page, which we think makes the design look more finalised. Additionally we cut out two of the links on the home page as we agreed that they were unnecessary and could be combined into another page. Finally we changed the font from helvetica, and changed the recording space section to display every users available recording space, as well as removing the title to avoid confusion for users.  

Branding

According to our feedback, we could deviate from the standard blue colorscheme of Sky. This lead us to test several colours on the blue/green spectrum that would be suitable for a flat UI. We feel that it looks much trendier and more modern than the royal blue. We created a mood board to test different design styles and we feel that the most successful is using a combination of white with block colours.  We also tested a few different typefaces as Helvetica Nueue is becoming overused.

Creating The Sky Logo

By following this tutorial we were able to recreate the sky logo. We decided to make our logo using the colour we had chosen for our prototype: #33CCCC

After creating this, we decided to experiment with the extra colours we had chosen for our colour scheme. We used our 5 colours to create a gradient, however we felt this overcomplicated the design and decided to stick with the original logo design (despite it being similar to one of sky's existing versions of their logo).

Mockup Feedback

We asked for feedback on our hi-fidelity wireframe mockups. We intend to utilise all our feedback to ensure we end up with a well designed final prototype.

• Consider exploring a different colour theme and more detail to the flat UI.
• Add explanation about what is in each section. e,g. What is in the 'my hub' section?
• Are eight sections neccacary or could some be linked together such as 'package' and 'upgrades'
• Some of the icons are confusing, a spanner and cog usually suggest the same thing.
• Consider a different typeface from Helvetica or Arial.

User Testing: Millennial

We tested our design mockups on a Millennial user to asses the functionality of the prototype. To test the prototype we asked a variety of questions such as "can you find your profile". Observation told us that we required a back button on all pages, and also that the "Recordings" label was misleading, as this caused the user to think this was where the recordings were stored. Throughout, it took approximately 1 second to locate the correct location/button to proceed and navigate to the correct screen. The carousel element seemed successful when the user attempted to scroll through the programmes where she asked "Is this live TV" (about live TV recommendations). Overall, we found that the user reacted positively to the prototype, expressing that they found it easy to navigate and thought it was a nice colour scheme.

"I like it."

User Testing: Baby Boomers

We also tested our initial prototype on a baby boomer in order to ensure the interface was appropriate for both generations. To test the prototype we asked the user 'can you find your profile?' 'can you find recordings?' and 'can you find your recommendations?' One thing the user initially struggled with was where the recommendations page was, which was also a problem with the millennial user. The user also asked 'how do I get back?' this is an aspect we definitely need to include within the UI. Other then the problems identified the user said the interface was simple and easy to navigate through.