Adding an Accessibility
Feature to
YouTube
Project Goals and Overview
YouTube, a major media platform, lacks a central accessibility hub. This project aims to improve user experience by making accessibility features readily available on the homepage.
A new feature will include a color palette for a “contrast mode” and toggles for existing functionalities like dark mode. Existing user preferences for similar settings will be considered during development. The current method of finding accessibility settings requires navigating through various menus, making it inconvenient. This project aims to consolidate accessibility features for a smoother user experience. Including a night mode toggle would benefit users who watch videos late at night.
The Design Process
Above is the ‘Design Process’. This is what UX/UI Designers and teams go through to create the best user experience and interface for the potential or current users for the product, app, or website.
Throughout this case study, I will be referencing this process as a guide for my design decisions and thoughts.
Are you ready? here we go! The first step is Research!
Research
User-centered design requires meticulous primary research to avoid personal bias influencing the project’s direction. This initial leg involves countless hours gathering firsthand data, ensuring factual accuracy over personal assumptions. Secondary research, analyzing competitor features and market trends, complements the primary research and offers valuable insights for future iterations.
Competitive Analysis
To ensure my app thrived within the existing media landscape, a competitive analysis explored features across streaming and entertainment platforms. This research, combined with user feedback, identified user needs for light/dark modes, sharing, multimedia browsing, and accessibility. These insights directly shaped the functionalities and research focus for my app prototype.
Interview Participants
Having completed the primary research phase, the next step involved conducting user interviews to gather secondary data. Recognizing the vast age demographic YouTube caters to from my initial research, I opted against establishing a specific target audience. This decision ensured the user interviews reflected the full spectrum of ages that YouTube has demonstrably captured within its user base.
I promptly set up interviews and the research continued.
Number of participants: 3 people
Ages: Range from 22 years old – 80’s
Marital Status: All single
Meeting Location: 2 over zoom, 1 in person – all recorded over Google Docs, and Zoom meetings were recorded over Zoom
as well
Affinity Mapping
Next are Personas
A highlight of the design process for me is crafting personas. These fictional characters, like “Cameron” and “Brandon” I created here, act as relatable stand-ins for YouTube’s diverse user base. Personas not only keep the project’s purpose at the forefront of design decisions, but also add a layer of excitement by personalizing the users we’re designing for.
Cameron
Brandon
Task Flows
Crafting task flows fueled my design process. These tools visualized user journeys for key features, translating them into actionable prototype screens. Task flows offered a linear path, while user flows explored user choices. I designed flows for core functions and a hybrid flow encompassing sign-in and accessibility options to address user indecisiveness. This project required one flow, but I combined elements from several to create a comprehensive prototype. Looking ahead, I’m eager to delve deeper into crafting more individual task flows to capture the full spectrum of user interactions.
YouTube's UI Kit
As YouTube wasn’t my own platform, I meticulously researched its existing branding elements – colors, icons, and overall interface – to ensure seamless integration within my prototype. Leveraging YouTube’s established dark mode functionality, I incorporated the familiar red, black, and white color scheme throughout. The iconic YouTube play button served as a subtle yet impactful nod to the brand within my prototype’s home screen, capitalizing on users’ existing recognition and positive associations.
YouTube's Current Logo
Over the years, YouTube has had a variety of logos, but never made major changes to the original design. It started out more shaded and 3D, but as time went on, it became more flat and 2D.
Wireframing
Recognizing my tendency to over-detail low-fidelity wireframes, I leveraged a Figma community template to focus on color and contrast variations across different app modes. This approach prioritized conveying the core information architecture by stripping away unnecessary details like user profiles and video thumbnails. Placeholder text like “Header” and “Footer” further maintained the simplicity of these early-stage designs, successfully depicting the visual impact of various color schemes.
Mid-Fidelity Wireframes are generally used throughout the process of UX/UI as a middle step between the original wireframes and the finals. For this project, it was not mandatory, so this step was skipped.
High Fidelity Wireframes: Design Choices
High-fidelity wireframes were the final step, and a fantastic Figma community template saved the day for color matching and sizing. I built upon the existing YouTube design to integrate my accessibility features seamlessly, ensuring consistency with both YouTube and iPhone branding. This experience has me excited to recreate an app in the future, meticulously mirroring the impressive level of detail in the template.
Original Icon: A couple of reasons why I created my own icon originally, stemmed from the industry standard icon being too “heavy” a line weight for YouTube’s branding. In addition, the people I interviewed, didn’t even know what accessibility was before I asked them – hence not knowing what the industry standard icon would be anyway.
User Testing
Usability Testing Results
Things that went right:
- Everything was seamless and smooth throughout the user’s experience in terms of color
Things that went wrong:
- Users had difficulty recognizing the custom accessibility icon.
The clickable area for the accessibility icon was too small. - User testing script may have been unclear, leading to confusion.
Repeated icon presses stemmed from user impatience or lack of feedback upon successful interaction.
How I’d fix these issues:
- Usability testing revealed users struggled to recognize the custom accessibility icon. A standard icon will be implemented to improve recognition.
The target area for the accessibility icon will be increased to make it easier for users to click. - Future user testing will include clearer explanations of the project goals, accessibility features, and the location of accessibility settings after clicking the icon.
My initial accessibility icon design, inspired by the standard symbol but featuring a thinner stroke and simplified figure, was refined based on mentor feedback.
Achieved the desired thin stroke weight for the accessibility icon while adhering to the industry standard for optimal user recognition.
And with that, click below to experience YouTube Accessibility, my way!
Personal Project Overview
1. I absolutely loved being able to make design choices based on a currently existing brand. It was a great challenge, and I think I was able to find what makes iPhone’s and YouTube’s platforms so beautiful and aesthetically pleasing; creating something cohesive for them both.
2. Accustom myself better with the industry’s methods, Figma features, and numerous other ways of doing things so I can know/choose better even when I think I “know best” what the site needs. I am constantly reminding myself that UX/UI Design is not fully about my decisions as a designer, but a culmination of research, industry standard, and critique to make it the best it can be.
3. I am proud of the progress I made in this short amount of time, and look forward to getting better and better as time goes on.
4. When moving forward with the tweaks for the final prototype, I will be changing the icon to the industry standard icon.
Some things that I want to learn how to do:
1. Learn to better my skills to create a more consistent design for my site overall when moving around as a viewer.
2. Learn how to embed PDFs into a button’s links in WordPress’s “Elementor”. I have researched and practiced some things, as well as asked my mentor, but I still feel that that’s somewhere that I can improve and practice more.