YouTube Brand Extension

University of Colorado Denver

New Brand Extension for YouTube

Interactive Media I Project 2

Jinju Park

1

Content

User Goals

Testing Question & Result

Summary of Design

Data Analysis & Future Improvement

Guide to YouTube

Link to Prototype

User Flow Chart

Project Retrospective

Persona Feature Prioritization Map Wire frame High Fidelity

2

User Goals

Creating the customizable YouTube theme by allowing users to change the layout, color, and font to make their own designed theme of YouTube with no time limit.

Users will allow sharing their own designed theme to share with other users and also request ideas to reduce a time for those who have limited time.

The user can feel achievement by creating own designed theme and sharing.

3

Summary of Design

The design of new brand extension for YouTube is to increase personalization by using customizable design theme. The idea of the brand extension was found during the interview of "Redesigning YouTube" from past project. A lot of users used only specific contents in YouTube thus, I found that it is more efficient for users to change the layout of content in YouTube to guiding their interest in short time. Although only changing layout does not interest users to try new brand extension thus, the extension includes font, layout, and backgrounds to be customizable for the users to finish designing theme. The design focuses on personalizing the theme for the users to increase their achievement after sharing themes with others also.

Although not everything will be customized to keep the brand guidelines which are logos, and colors usage. YouTube itself does not have much official brand guidelines that it is a good brand to be personally customized. This new brand extension allows users to have control over YouTube to manage their task in varieties ways.

The design is to keep the simplicity and feeling of YouTube to make sure users don't think its a total different website, but part of YouTube.

4

Guide to YouTube

5

User Flow Chart

6

User Flow Chart Starts

7

User Flow Chart Existing Theme

8

User Flow Chart Color

9

Layout

10

User Font

11

User Flow Chart Saving

12

Persona

13

Feature Prioritization Map

14

Wire frame

15

16

17

18

19

20

21

BEFORE

22

High Fidelity

23

1

1

2

24

2

The icon that navigates to a new brand extension of customizing YouTube theme.

Another navigation icon directly to Sharing YouTube theme page.

25

1

1 2 3

4

26

It is a pop out screen with three different option when customization icon is clicked in YouTube Homepage.

2

It is an Original YouTube theme where a user can quickly return to the original theme if they need to.

3

A second navigation option is given to a user, which allows the user to create their own YouTube theme.

4

It is a collections of theme that has been created by the user and other themes downloaded from YT sharing page by the others.

27

1 1

2

It is an automatic grid layout given to help users to find where the contents can be displayed on the website. When content is not displayed in given area "Empty" will appear to notify the user the place is available to add content.

3

It is an option for the font that applies to all the title and words in the menu, the color, arrangement, and size can be adjusted as the user want.

4

It is one of the options for YouTube background by uploading the image as the user would want to use for their YouTube page.

5

Multiple different interaction buttons are provided to share the theme, save, preview, and use the theme right away.

6

The category of contents is bubbled to show the users it can be moved in layout and visually helps understand division in different contents .

7

This is the biggest interesting interaction new brand extension have, the list of unused contents of the video that are already existing are grouped to add or removed from YouTube(number 6 is where the content can be display).

8

This is another list of unused content divided by the categories of video, and a user can find and add any specific category to their YouTube.

7 3 6

4

8

It is a setting icon that allows a user to change the options of the item.

2

5

28

29

1

1

2

3

30

A list of preview in the main menu is shown to help users to see how it will look like when changes are made.

2

This is the customizable options that are provided to users to make changes in the first menu. Where user can change the font, color, alignment and sizes.

3

Recycle bin is provided to remove the menu if the user wishes to by dragging the item to recycle bin.

31

1

1

2

3

4

32

A preview of a library where a user can select and see the changes that are made.

2

Fonts are customizable by selecting one of the lists from the preview screen.

3

This is the other customizable option where a user can change the font, color, and alignment.

4

Recycle bin is provided to remove the menu if the user wishes to by dragging the item to recycle bin.

33

1

1

2 3

34

A preview of Subscription where a user can see the changes that have been made.

2

It is a different way to view the subscription, which is list and grid view. Once it has been selected the icon will change the color to red.

3

This is the option to change the view list of subscription, the image or list can be aligned by the size of grid or icons and can choose to either text only or image only or both at the same time.

35

36

1

2

1

This is the three primary swatches and one recently used color swatch thus, user can easily select the recent colors to make easy consistency.

A color ramp to select is provided to the user to make choice of the color of font and background.

2

37

38

1

2

2

This is showing how the content can be removed from the layout, removed layout will automatically add the list of unused list of content on the right.

It is an automatic grid layout given to help users to find where the contents can be displayed on the website. When content is not displayed in given area "Empty" will appear to notify the user the place is available to add content.

1

39

40

41

1 1

3

2

42

This is a page of "Share YouTube theme" where the user can share their own designed theme, use the others shared the theme, and request idea of design.

2

This is the preview of the tutorial when the cursor is hovering the list of "Watch Tutorial" to show quick preview before the user decided to watch full tutorial.

3

This is the grid view list of design that has been shared in Share YouTube theme page.

4

A dock buttons for easy and quick navigation which can be added more or removed.

4

43

1

1

2

The user can name their design before finishing sharing theme to public. If user is not willing to name the theme the page will automatically name it "Untitled"

3

Users can add descriptions of a theme if they want to, but it is not a mandatory information to provide.

4

A next button to see different preview image that is provided by the designer to help a user to see what it is like to use the theme before the other user decided to use.

5

The purpose of design will helps the other users to know the limitation of usage if it is not a personal use.

6

This a button where a designer can upload preview image to provide with design to help the users to know what kind of design it is.

7

An interaction button to finish sharing design.

2 3

4 5

6 7

44

This is a pop-up page where the user can finish sharing their design in "Share YouTube Theme", it requires few amount of information to provide information to others.

45

1

1

This is a pop-up page where a user can see the design in "Share YouTube Theme", it provides information user might want to see before it is used.

2

A title of the design, designer's name, how long it was updated, how many users has been downloaded the design information is provided with a design.

3

Users can add descriptions of a theme if they want to, but it is not a mandatory information to provide.

4

Some of the design will have the icon to show if it is trending, hot, most downloaded, most view, and etc.

5

Average rating for the design will provide with stars and user can also rate them by hovering and clicking the stars.

6

It is an interaction button for those who want to download into their collections right away.

7

An interaction button for a user to use the design right away for easy and quick interaction.

2

3

4

6

7 5

46

47

1

1

This is a "Request Ideas" page where users can request their designs to others when users don't feel artistic or have non desire to make their own design.

2

This are the icon where user can upload image for reference if they have any in mind. Also the design can be request in color or black and white by clicking icons.

3

This is the section where user can add more information about desired theme and their few basic personal information to increase security.

4

A interaction button to submit request to go under review by the designers.

5

This is a spot where advertisement can be placed.

2

5 3

4

48

49

1

2

50

1

An appreciation pops up when request idea is submitted .

2

An interaction button to go back to main "Sharing YouTube Theme" page to end requesting ideas.

Testing Question, Result User Testing Question This are the question asked in TryMyUI Test and in personal interview, thus some of the questions are more of guiding questions to help guiding users to try the prototype.

1. Find the new brand extension icon! you should see two circle icon on the right!

2. please try all 3 options that are given and at the end you might want to end with "Customize your own" / You can use "Minion" existing theme in collection.

3. Here are given options to design your own YouTube theme, try the setting icons, font, background color, background image, and SHARE YOUR DESIGN. 4. Now tell me how easy or difficult navigating to YouTube sharing pg was.

5. now you are on the YouTube Sharing page and tell me how you feel about this new content, does it feel like YouTube? or totally different website? or any comments.

6. hover and click on the image of "Flying paint" and try to rate the design!

7. hover and click on the image of "Flying paint" and try to rate the design!

8. hover and click on the image of "Flying paint" and try to rate the design!

9. if you hover on "watch tutorial" it will give you short clip video of how to do.

10. What was the most interesting aspect of this brand extension you just tried?

11. What are the least design you liked in Prototype? and explain why.

12. What was the most design you liked in Prototype? and explain why.

13.If you have to eliminate one thing from the design what would you eliminate and why?

14. How often do you log in to YouTube and what is the most and least task you do in youTube?

15. In a scale of 1 to 10 how much does it motivate you to use the brand extension in the future?

16. In a scale of 1 to 10 how confusing was the prototype and navigating system?

Result only five people took prototype test in TryMyUI test and other five was done in Marvel and had conversation and interview in person.

The result in TryMyUI showed the lowest task usability in difficulty of navigating to YouTube share page from customization mode. While when I did in person to person interview, it was not the most difficult task to do. Which I found out the difference in result was the problem of a question, how it was asked in TryMyUI. From TMUI and personal interview result from 100% of the positive feedback on theme Sharing pages. Testers liked how the information was given with design and the idea of requesting themes. In taking prototype test, 50% of the users wanted to try all the options, functions, and click to see what is allowed to them to try. Therefore the complaint was said in TMUI since I could not provide all the little details functions in prototype, while I could explain and told the users what I can't provide in a prototype. Although results in the personal interview had the variety of different ideas and answers to reflect on improvement. 60% of the tester explained why the function felt overwhelming, one of the great answers was that too many options were given to the users that it may become inefficient in time usage. The following task in TMUI measured the time spending in each task. Asking users to find the "Share your YouTube design" took the most time that it felt the most difficult task to the users. Also, personal feedback could measure the body posture and face expression while tester trying out the prototype. Which I had to personally measure in my own perspective, to be honest only 40% showed eyebrow raising up high expressing highly interested in the test and 60 % found the board face expression, but in 60% of the result 80% of the tester was the users with least activities in YouTube.

51

Data Analysis & Future Improvement Data Analysis Difficulty in task

Easy

This is two different graph showing the task usability and task duration. Looking at the task usability, number 5,6,11, and 2 is showing the lowest score in difficulties which irritated the tester when a task was given through wrong navigating interaction buttons. The lowest score number 5 is "navigating to Share YouTube design" the interaction button was not provided in the customizing section that tester had complaints on giving wrong navigation system in prototype test. Although this result was done in second high fidelity that problem is now fixed in improvements. In task duration graph, the longest time was take in number 3 and 11 which asked to look and play around with the new brand extension customizing section and in "Share YouTube Design" page, which is a fair amount of spending time trying different functions and options that are given. Although task number 4 show the lowest time on the task which was to find the "Share YouTube Design" icon. This is ironic result in this graph because most of rated that it is a hard to follow the navigating system, but was easy to find the way to use a navigating system.

7

6

5

4

3

2

Difficult

1 1

2

3

4

5

6

7

8

9

10

11

Task

Future Improvement

Time taken per task (in Seconds)

120

Through prototype test, many problems were found to improve the better quality of high fidelity. Most of the user from the test had complication using all the given opportunities.

The tester is divided into two different group with high activity on YouTube and logs in to use many different options and other group is that show least activities in YouTube and have no desire to log in and does not use all the opportunities that are given in YouTube system. A feedback reflection group with least activity result improvement in clarifying the introduction and function of new brand extension to eliminate confusions and feeling of overwhelmed opportunities. Feedback from the users who have high activities in YouTube answered it is a great opportunity for the users to change the view, and layout to edit and increase the efficiency of their task in YouTube, although negative feedback was found in a customizing background is unnecessary for them to use and may distract watching videos.

90

60

30

0 1

2

3

4

5

6 Task

52

7

8

9

10

11

Link to Prototype (Marvel)

MARVEL

https://marvelapp.com/8d4ad4g/screen/16288445

Try My UI

http://www.trymyui.com/sta/M8S887eOdATSqJrl

53

Project Retrospective

1. In completing this project, what were the top 5 things learned about the Human-centered design process?

1. Enough amount of interaction- finding how much UI is not overwhelmed to users.

2. Trying to keep the brand guideline while breaking enough to create the new brand extension.

3. Figuring if it is the right brand extension for YouTube.

4. Navigating system- providing right direction to users to follow in right directions.

5. Researching and Iteratively producing prototype

2. What parts of this project did you personally find challenging? This can be directly related to the subject material itself or can be about project management, logistics, technology, etc.

Finding right customizable options in extension was challenging personally. The ideas of what I came up with in the beginning did reflect on my final high fidelity, but some of the feedback from the user answered it is a little bit overwhelmed options were given.

Now when I look at the high fidelity it does look a bit overwhelmed that there is possibilities create tedious to users.

3. What are three design-specific strengths you developed during this project? Be specific.

Navigation system, producing the prototype, and interaction. From learning and being challenged with the navigation system, the navigating design became better in the final product by eliminating unnecessary navigation. Producing prototype helped look more finished product when a test was handed to users. The interaction was probably the worst design I had in the beginning, but at the end, it became the most strong design by improving and that helped navigation system also.

4. What are three areas of improvements you identified during this project?

Be specific.

Navigation system - comparing wire frame and high fidelity show that navigation system has improved in details to eliminate the wrong path where users don't end up in the wrong place where it wasn't meant to be. Prototype - I had to change prototype so many times to provide better quality and more detailed functions of the extension that it helped a lot in creating high fidelity. An amount of interactions - The amount of interaction had to eliminate a bit to reduce the wrong path on the navigating system.

54

5. How will you address these areas of improvement throughout this course?

For next project or any upcoming product will need to start with great planning to eliminate too much interaction, wrong navigation system and help me to not forget what the ending users will face. Also, I am not sure if this is a great idea or not, but I want to experiment counting the interaction numbers in wire frame before creating high fidelity to see if it is overwhelming to use or not.

6. In hindsight, what would you have done differently?

I would change or experiment in giving minimum option tools to users to customize the theme. Which can be done in short time that user can eliminate the spending time on creating themes as a different option.

7. What aspect of the project is you most proud of?

The idea of this brand extension is what I am most proud of, I thought this idea is mostly affecting in a customer who has high activities on YouTube. Although it reduces targets of this project by this time when everything is done, which was found in prototype testing.