top of page
CSD_Masthead.jpg

C L I E N T

YouTube Creator Services

T E A M

Product and Content Teams

Product Marketing Manager
Product Partnerships Manager

Content Strategist

Creative Director

Developer

R O L E

UX/UI Designer

Visual Designer

WHAT I DID

UX and IA strategy

Leading effective discussions

Creating components and a design system

Rapid iterations and prototyping

Defining design principles

Close collaboration with the developer

Design documentation and ENG hand-off

W E B S I T E

Services Directory Refresh

O B J E C T I V E 

A UX/UI refresh to the former YouTube Creator Services Directory website with the goal of a more streamlined user experience using its Search functionality.

A P P R O A C H

A refresh keeping the purpose of the site in mind- Creators looking for service providers or Partners like music labels and media agencies looking to offer their services. Revisiting the users and their needs, the functionality of the current directory stayed the same but their experience is now more intuitive, the design is more flexible and the content is more reliable. The design adheres to YouTube's latest web standards.

Goal_CSD.png

A U D I E N C E    P R O F I L E 

Users.png

S I T E     A R C H I T E C T U R E

Site architecture_CSD.png

CONSIDERATIONS

Considerations_CSD.png

EARLY ITERATIONS

Color coded filters + chips

Card layout

EXPERIENCE  PRINCIPLES 

Screen Shot 2021-05-07 at 8.10.05 PM.png
Macbook air.png
services dropdown.png
CSD_mobile_directory.gif
Samsung Galaxy S8 Arctic Silver.png

D E S I G N   S Y S T E M   +    L I B R A R Y 

Setting up styles

Colors.png

Color styles created using YouTube's core color palette

Type.png

Text styles created using YouTube's web and mobile sizing guide

Creating elements

Elements_Dropdown.png

Elements were grouped based on function which also helped with naming, e.g. icons and selection controls were utilized in the dropdown which was further divided into types or state. A condensed mobile version was also created.

Creating components

Components and variants were created using the elements, e.g. the individual icons, dropdown and input elements made up the menu and filter components across each category

Adding guidance

Where extra guidance was required other than the annotation on the pages, notes were added  in the component description for documentation

USER FLOW 1

Goal: Creator  finds potential partners by applying the Services, Locations and Languages filters

User Flow_Creator_CSD.png

UX/UI  CHANGES

Filters | Services

Old

old services filter.gif

Very concise list of service filters

Tooltips to give

users more information about the service 

New

services_new.png

Filters | Locations

Old location.png

Old

Separate search field

Option to search by Region and Country

New

location_new.png

Filters | Languages

old language.png

Old

Separate search field

New

languages_new.png

Checkboxes to facilitate multiple selections

Languages listed in alphabetical order for an efficient search

Profile cards

old AA.png

Old

Larger titles in YouTube Sans 

Logos masked within a rectangle instead of a circle

Improved leading

CTA Buttons in blue

New

profile card_new.png

Profile page

Old

ss profile old

Subdued previous and next arrows

Easy navigation

Profile introduction with a basic bio

Overall, cleaner and more flexible layout with sections that can be moved around easily

Prominent sections using subtle dividers and titles in YouTube Sans

New

Reordered sections for a more sequential user flow

Better placement of footer on the page

Ability to change profile language

profile_new.png

USER FLOW 2

Goal: Partner signs in to create or edit profile

User Flow_Partner_CSD.png
Macbook air.png

UX/UI CHANGES

Partner application page

Improved form design

Tooltips to help new partners better understand the category

Page layout that mimics the Profile page

Expanded/Active view

Collapsed/Inactive view

04. Partner application_inactive_collapsed.jpg
04a. Partner application_active_expanded.jpg

Limited dropdown options to reduce page length. Scrollbar to view all

Restructured page following the sections from the Profile page

UX/UI PRODUCT DESIGNER

bottom of page