DISCOVER, DEFINE, DESIGN: Synthesised Output

View my practical output that has been developed as a direct reaction of the research undertaken in my dissertation, at this web address. My practical has taken the findings from the written element, which I have then used to theories potential ways in which YouTube could be developed in the future. I have designed an entirely new user interface for YouTube which features a new ways of engaging with the platform, this has all been presented and explained on the website bellow.


 YouTube Kaleidoscope

DESIGN: Designing and Coding the Website

Designing
I initially started my creating my website with Photoshop, I used the interface images I had designed and applied them to real world image, to show them in use, and I also showed them on there own for specific elements of the site.

Coding
After finalising the website I photoshop, I used a tool called WebFlow which enable me to code the design into a functioning website.

DESIGN: Proof in the Pudding

http://www.engadget.com/2014/01/13/youtube-gets-a-daily-highlight-reel-courtesy-of-dreamworks/

YouTube have today just announced a new service and programme coming soon to the platform which provides a daily highlight of the YouTube's top content which is curated a narrated by a presenter.  This is exactly the concept that I have proposed for the future of YouTube, so it appears that the future is already here. I was initially disheartened when I read this article but it's really a positive outcome as it means my research project and practical project have lead me to create something that it's both possible, and is happening or is going to happen in the future it demonstrates that my thinking is heading in the right direction.

DESIGN: Translating the Design Across Devices

Widescreen TV
When translating the design for television, the design needed to be dramatically enlarged so that all type was at least 28pt as this is the most readable font size for television. This meant that less content was show on the TV but the layout remained the same. Furthermore arrow buttons were added into the design where scroll is used on the web as television don't have a mouse scroll feature as part of their input.

iPhone

It was initially difficult to translate the design to iPhone as it's not a device that is natively used in landscape mode like the other devices. Therefore when translating the design to iPhone I switched the interaction from the sides to the top of iPhone this meant the same design could be implemented and work functionally the same but at the top of bottom of the screen rather than the sides. 

DESIGN: Live Guide

At this stage that the main design principles had been consider it was more about tweaking layout and colour within an individual section of the site design. For the live guide I first started working with a light grey however I don't think work as there was no distinction between this secondary navigation and the main navigation.

Whilst in the design process, I added some new features to this aspect of the site and added options to look a live content happening in the future and the ability to keep a schedule of upcoming live content. I switched to darker grey palette which unified this secondary navigation. 

I experimented with using both light and dark backgrounds for this sections, I felt that it could be beneficial to give this section a grey background in opposition to the rest of the site so that it felt different from the guide and it was clear that the user was looking at live content however overall I felt it was too heavy.

The final design for the Live Guide and the viewing of a live stream. Clear distinctions are drawn between primary and secondary content/navigation areas with use of dark grey to contrast with stark white. 

DESIGN: Search

This initial version of the search results is based on the a layer that lay over the video and appear from the bottom of the screen however this doesn't flow with the rest of the site's interactions which are all overlay from the right or left hand side of the screen, Furthermore the layout feels and blends and unoriginal and has no hierarchy. 

This version feels extremely cramped and it's hard to see individual pieces of content as they all blend into one, a definition between channel results and video results would also make this layout more proficient. 

In the final view I have separated the two types of search result with a larger gap to make it evident that two types of content of being viewed, I have also placed a small margin around the edges of the main content so that individual content can be seen clearly and unified the colour palette with the colour used across the rest of the site. 

DESIGN: Navigation

Navigation bar is too large and over powering. Interactions aren't it is not made cleat that these are clickable actions, more button like would make them more efficient.

This navigation is slimmed down and provide much greater contrast against the video and it is clear that there are buttons for different actions. Large search makes it easy people to jump into a specific video they want to watch. 

Dark user interface is less obtrusive whilst watching a video, however this navigation feels a little dated it doesn't bring anything new to the table, lack any obvious youtube branding also. 

Again, as before it is not immediately implied that this is a navigation bar, this might not also stand out on all video background, it's not access, not everyone will be able to read the text, icons would be more productive. 

Navigation has been to the left hand side, the entire site is based on vertical interactions it feels odd that the navigation should be horizontal. The whole platform is unified with the also present navigation bar. 

 

Tweaked the colours so that there is a greater contrast when a user highlights a clickable areas, furthermore it makes the branding less in your face. The navigation bar is also a completely mew way of thinking about nav bars, it's not just responsive and fitting to every device, it's also adaptive. It's contextually aware of where you are in the user interface and only shows you the controls you need when you need them. 

DESIGN: Homepage

Homepage Wireframes

Homepage Development

Within this initial layout I have filled the entire space with content, I think this layout is disproportionate, as focus is placed more on the live content where as this is more secondary and the primary focus should be on traditional video content.

Within the final version of the homepage layout I have aimed to address the issue of hierarchy within the importance of content. It would on a basis of the rule of three with larger and smaller division. The largest division and the section that has main focus is the stream of traditional video content. Secondary to this is the timeline of live show. And finally users can easily access and jump in flow within the final section of the screen. Colour contrast has helped to achieve this balance in focus of content. 

DESIGN: Guide

The Guide
There are three main aways in which users currently access new content this is through subscriptions, what's happening within there social networks and videos highlighted to watch later. I think this entire process can be unified into a single guide to allows users to access everything in one place and the vision for the guide is that it works effectively across all devices.

Wire Frames

In my specification for my design I stated that I wanted to content to control the layout and content to come before design, however using those principles within the design for the guide haven't quite worked out. The design feels extremely cluttered, content is merging into each  other and it is unclear which element navigate and which are content there is too much going on within this design. 

To help improve the contrast within this design I have added white into the layout although this has created some distinction between content and navigation the layout still feels busy and unclear. 

To help the layout feel more clear I have attempted to add small margin between content although this is more productive, it could be better. Also using profile picture over text has been more efficient in that familiarity it created for the user. 

Added some white back into this layout for potential extra content, but after thoughts make me think this is not needed! 

Within the final of this layout and page, there is clearer distinctions between individual pieces of content created through the stark white border between content which I think works well. I have also reduced the amount of content on show as it was content overload before that was making it feel busy and crowded. 

DESIGN: Flow

What is Flow?

Within my research and dissertation I discovered that the future of YouTube lies within the curation of it's vast content library. Currently users can generate custom playlist this is very basic. To progress the service I have development a new concept called 'Flow' flow is a feature that works in many ways across the site. Flow can be produced electronically by YouTube or it can produced by users. Computer generated flow is used to aggregate content into 'flows' flows are a series of youtube videos stitched together to make a longer entity. These flows appear at the end of video or when searching and allows a user to continually watch content without having to stop and find a new video, this does two things, makes the experience feel more like TV which will introduce digital immigrant users to the community and it also allows users to discover new content more easily. 

User generated flows take playlists to a new level, instead of simply creating playlist of existing content. User can create flows which they aggregate content together and they then present this content and create a longer entity from the stitched content and there 'commentary'. This will create a new breed of YouTuber in which there are creators, but also curators of content. YouTuber's can now be presenters of content as well as creators.

Flow Wireframes

Initially I experimented with a horizontal layout for this feature as this would imply time and content that is happening now and content that is coming, but it doesn't fit the rest of the website which acts on a vertical axis, this feels disjointed. 

As the horizontal layout was not effective, I transitioned the same elements of interaction into a vertical layout which mirrored the interaction of the rest of the site, this immediately felt more productive. I also think a sense and conception of time is still implied within this layout. 

DESIGN: Channel

Effective use of screen space, however this layout won't work with the majority of users profiles pictures which are square. This design put user profile first which is an innovative progress from the existing design. Currently avatars are small squares across the site, this design brings the user to forefront.

The composition is more effective in a square format, it will work better with the traditional square format of user profile pictures that already exist. 

The blocks over the image feel over designed, they are heavy and distract from the image, they don't allow for longer profile names either.

This layout makes uses of the video player always being present, which is innovative, however I don't think it's clear that it's a profile page, it's looks more like a video synopsis.

This feel much more effective it's always the image to speak and the overlaying content isn't distracting. 

Content can a join from the other side of the screen, creating clear and easy user interaction without the needs for excessive button pushing to get to content. This layout put it all in one view. 

These demonstrate varying views from channels content, however they feel crowded and I don't think the user will know where to look, the content is all merging into one.

In the final version navigation around the channel is now much more clear, the unified navigation bar at the left make accessing content easier without having to navigate all over the screen to complete task. The high contrast between the white and dark grey make it clear exactly where the user is within the interface. Individual content is no more clear as borders have been placed around images which has made it more effective than when the content was merging together in one.