OUGD601: End of Module Evaluation

What skills have you developed through this module and how effectively do you think you have applied them?

My research skills have improved dramatically within this module as in previous years I have tended to use a selection of sources and craft my argument around that however this year I have really tied to look as a many sources as possible to both strengthen my argument as well provide myself with a range of perspectives that can help mould my own viewpoint. Through this my research skills using the library and the internet have significantly improved and I can now use these tools more efficiently to gain the knowledge that I need.

In addition to this I also think my writing skills have improved this year. In past years I have always been one to integrate my quotes within the text I am writing. However this year I have tried to include a range of different styles of quoting within my work such as using extended quotes as well paraphrasing the work of others. In regards to my writing skills I also think that having to write an extended piece of text has meant I have improved my skills in regards to structuring my argument in terms of paragraphs as well how to structure the text as a whole to make it flow.


What approaches to/methods of design production have you developed and how have they informed your design development process?

This has truly been a unique experience for myself in regards to how I think about designing user interface. within work I have produced in the past I principally look at existing trends and current work to influence how I design an interface. However within the module I have looked to academic research to influence how and why and interface should work and this has been an immensely rewarding experience and I believe i've developed a much better product as a result of this and a it's a product that is backed up by theory. This method of looking to user research before designing an interface is a way of working I hope to bring forth into my other projects and briefs.


What strengths can you identify in your work and how have/will you capitalise on these?

The main strength that I can see within my work is the production quality both the interface that I have designed as well as the website in which it sits both have high production values and are well finished. I will aim to capitalise on this in future my continuing to develop my skills within Photoshop as well as furthering my skills when building and developing websites. A strength that I also feel I have demonstrated within this module is my ability to look forward and produce a piece of design that is current but also presents ideas for the future.


What weaknesses can you identify in your work and how will you address these in the future?

The main weakness that I can see within my work is that I have created a range of mockup for my vision of what YouTube could become and these mockups have been crafted for all devices such as Televisions and iPhone however the nature of a website means I can't show all of this work and therefore I can only present a selected version of my concept. Furthermore on a website the mockups are still image this mock ups would be enhanced if they moved and showed how the user would interact with the interface. In the future I will try to build upon on this and use such software as After Effects to brings my ideas to life and make them move and feel more realistic.


Identify five things that you will do differently next time and what do you expect to gain from doing these?

1. If I were to do this project again, I would definitely start my primary research a lot earlier, I started to collected primary research from October time however as I was contact high profile people no one ended up getting back to me. I therefore has little time to collect research that was of quality. I was lucky in that using the internet allowed me to collect primary research instantaneously. However has I began this process much earlier I would have been able to gain higher quality results.
2. I would better time manage my time within this module so that I have more time to push my idea further than I already have done within this models. This would have meant that my project outcomes were more elaborate such as filming a video, which I have under estimated how long this would take and therefore I couldn't produce this.
3. I would have liked to have gained my feedback on my practical project. As I had scheduled that I would begin my practical project over christmas and finish it this meant there was little opportunity for me to collect feedback. I made use of Facebook to specific surface feedback however taking my work to a critique would have provided myself with much stronger feedback. 
4. If I were to do this module again I think I would like to seek collaboration for aspects of the practical which were beyond my skill set for example creating a video which I have no experience in an working with someone who does would have meant that I could have produced this within the allotted time. 
5. If I were to do this brief again I also think I would have liked to allowed myself time to bring the product to life and make the design into a usable design through using such software as Quartz Composer this would have meant i'd have been able to text my designs to see if they actually work.
   

How would you grade yourself in the following areas;
Attendance: 5
Punctuality: 5
Motivation: 4
Commitment: 4
Quantity of work: 5
Quality of work: 4

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.

DISCOVER: Primary Research

As my initial primary research idea to email YouTuber's directly did not work as I did not receive any replies therefore decided to try another avenue of research collection to again a primary view for my research. I used E-research as my methodology behind using an internet forum to speak directly with YouTube Partners, which are high profile users within the YouTube Community. I posted an initial series of questions which was put out openly to the community for users to comment back.

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.