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 / James Phillips
Developer / Oliver Dooley
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.
A U D I E N C E P R O F I L E
S I T E A R C H I T E C T U R E
CONSIDERATIONS
EARLY ITERATIONS
Color coded filters + chips
Card layout
D E S I G N P R I N C I P L E S
D E S I G N S Y S T E M + L I B R A R Y
Setting up styles
Color styles created using YouTube's core color palette
Text styles created using YouTube's web and mobile sizing guide
Creating elements
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
UX/UI CHANGES
Filters | Services
Old
Very concise list of service filters
Tooltips to give
users more information about the service
New
Filters | Locations
Old
Separate search field
Option to search by Region and Country
New
Filters | Languages
Old
Separate search field
New
Checkboxes to facilitate multiple selections
Languages listed in alphabetical order for an efficient search
Profile cards
Old
Larger titles in YouTube Sans
Logos masked within a rectangle instead of a circle
Improved leading
CTA Buttons in blue
New
Profile page
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
USER FLOW 2
Goal: Partner signs in to create or edit profile
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
Limited dropdown options to reduce page length. Scrollbar to view all
Restructured page following the sections from the Profile page