Final Tweaks

Of course we had to make the voiceover match with the visual elements of the video. We did this by creating and cutting the visuals according to the pace of the voiceover.

We found that despite ensuring that the voiceover was of high quality, the space between sentences of the audio left a slight crackling noise. To solve this, we muted the sound between the voice clips, which created a much better finish.

To finish the video, we added a "happy" music track in the background, which really brought everything together. To ensure that it was not overpowering, we lowered the sound level of the music track to half that of the audio clips - this meant that the music was not the focus of the sound but just added an extra element to it.

Creating The Video: Visuals

Using a tripod and a high quality SLR camera we filmed several scenarios for our narrative. Filming the area from different angles and aspects allowed us to tell a story in a dynamic visual way. We chose to shoot from wide angles and closeups so that we could cut between the two, allowing the viewer to experience the "real life" situation and envision themselves in the same position.

For the aesthetics of the video, we chose to use the light blue colour we have used throughout our blog and presentations as a plain and simple background. Adding a TV vector at the beginning gave the video an initial context.

While the footage brought the concept to life, we didn't want the video to be too long, and decided that including scenes of a walkthrough of the prototype would help to explain the concept. This allowed us to explain the features in more detail.

Initially, we had no transitions between the scenes and they cut from one to the other. This meant that it wasn't very appealing and looked quite static. To solve this, we made each clip enter/exit by swiping up, almost like a parallax scrolling website. This gave it a bit more excitement and finesse.

To finish the video, we used the Sky logo and slogan. This rounded up the video and reminded the user of the brand. We kept our video simple, using minimal overlaid text, and despite originally thinking of adding vector images over the footage to give further explanation, we felt we didn't need this as the voiceover was descriptive. The video told the story we desired and we were pleased with the outcome.

Creating The Video: Audio

We decided to create a voice over rather then using on screen text, in order to give our video a professional finish. We created the script according to our storyboard, so that the visual and audio elements would work in tandem with each other and used an Olympus voice recorder to get high quality sound. 

This is the script we created:

Introducing My Sky, a personalised viewing experience that gives you more of the TV you love. 

(walkthrough)

My Hub, located within the iPad application, is a new feature of the Sky+ package. My Hub allows each family member to create their own personalised account, offering them tv recommendations and suggestions based on their tv viewing habits. 

(on the iPad)

Heather uses her hub to record her favourite programmes within her own private recording space. This allows my sky to build Heathers profile based on her preferences. Over time, increasingly personalised suggestions will be made, giving Heather the opportunity to explore exciting new content. My Hub also displays trending series that are popular amongst other Sky users within the same demographic.

(clip of handing over iPad)

The micro-profiling concept of My Hub results in each individual user receiving a personalised sky service that allows them to feel more recognised by the brand.

(walkthrough) 

As the bill payer, Mrs. Anderson is the only user to have access to her account details, ensuring that there are no unauthorised changes made to the package. My Sky allows Mrs. Anderson to view her bills, arrange an engineer visit or even seamlessly upgrade her package from one convenient location.

(on the iPad)

As a regular daytime tv viewer, Mrs. Anderson frequently sets reminders in her hub. She uses the live TV recommendations to suggest tv programmes in real-time that my sky knows she will enjoy, improving her casual tv viewing experience. The iPad communicates with the TV, allowing mrs. anderson to use it in replace of the remote.

(clip of tv homes under the hammer)

(walkthrough) 

When signing up for My Sky, the Anderson's were asked to set a budget for their sky service. Over time, their package can be made progressively bespoke with channel substations. Utilising the data from their viewing habits can result in channel swaps being made by my sky, giving the Anderson’s access to extra channels in place of ones that are not used. This can also be done manually by the user.

(on the iPad)

Underspending on their package results in credit which can be redeemed by viewing movies in the sky box office. Heather and her mum can enjoy a film together and feel appreciated by the sky brand, receiving a valuable service that gives them an optimum TV viewing experience.

(clip of tv film)

Sky: Believe in better.

Prototype Elements

To create scrolling elements and all other visual elements of the prototype design we created these in Adobe Illustrator. This meant that we were able to create the imagery at the correct dimensions for the interface and create good quality images without compromising the speed of the proto.io software.

 

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