MEETING WEB ACCESSIBILITY STANDARDS
CASE STUDY
In the journey of Megogo's expansion to the UK audience, accessibility became paramount. Addressing user complaints, I discovered that the interface lacked usability for screen reader users despite meeting traditional accessibility criteria.
Collaborating with the user, we discovered that while the necessary elements for accessibility were present, the user experience fell short. This experience emphasized the critical link between accessibility and usability.
PROJECT:
ROLE:
As a Product UX/UI Designer at Megogo, I collaborated closely with cross-functional teams to prioritize accessibility and seamless usability for all users.
01 OVERVIEW
NAVIDATION PLACEMENT
02 IDENTIFIED CHALLENGES
SEARCH READER EXPERIENCE
ILLOGICAL KEYBOARD ACCESS
The initial challenge surfaced with the navigation included only 'TV' and 'Bloggers' links, leaving essential sections like 'Categories,' 'Channels,' and 'A to Z' hidden deeper in the page hierarchy. This hindered user navigation and discoverability.
The page being overly verbose for screen reader users. Each program link was announced twice - once for the thumbnail image and again for the program heading. This redundancy not only extended the listening time but also caused confusion as links to the same destination were expressed differently.
In the "Categories" section, a single click on a category revealed only four items in a panel. To access the complete list, users had to click the same link again, leading to a listing page. This convoluted process led the customer to abandon the application altogether, highlighting a critical usability flaw.
Upon uncovering the accessibility issue,
I embarked on a thorough investigation. Partnering with the user, I adopted a user-centered approach, conducting usability tests and analyzing feedback to pinpoint challenges.
By conducting the research, I identified the following challenges:
#3 Complex navigation in 'Movies' led to user abandonment.
Old Megogo home page design
#1 Limited navigation hindered user accessibility.
#2 Duplicated program links increased screen reader verbosity, causing user confusion.
THE NEW STRATEGY WAS BUILT AROUND THE KEY UX PRINCIPLES TO EFFECTIVELY ADDRESS THE BUSINESS CHALLENGES.
03 UX PRINCIPLES
Give a choice to users .
Allow users to control.
Prioritize features that add value.
Design with familiarity in mind.
CONROL
FAMILIARITY
ADD VALUE
CHOICE
NEVER LIMIT USERS IN USING YOUR PLATFORM
3.1 CHOICE
Megogo offers "Audio described" and "Sign language" formats, each with dedicated listing pages under the "Categories" list.
Feedback showed that users desire to be able to search and browse the content freely and not to be trapped inside particular categories.
Thus, "Audio Description" and "Signed" options should be available for all content regardless of a category.
CONTROL
FAMILIARITY
ADD VALUE
CHOICE
A movie card hover state, shown here, indicates what formats are available in.
A Movie page also lists alternative formats, allowing users to choose a preferable format.
A video content card
A video content page
NEVER TAKING CONTROL AWAY FROM A USER IS ESSENTIAL.
3.2 CONTROL
Autoplay for live content was a problem, because the sound of the video could make it difficult for a screen reader user to hear their reader’s output.
However, we know about another group of screen reader users who requested autoplay because it meant they didn't have to navigate to the player, find the play button and activate play.
The solution was to give users control over playback by opting switch on and off the autoplay, by using a popup and saving preferences with cookies.
CONTROL
FAMILIARITY
ADD VALUE
CHOICE
BY INCORPORATING FEATURES FOR USERS WITH DISABILITIES, EVERYONE GAINS A RICHER AND EASIER EXPERIENCE.
3.3 ADD VALUE
A common challenge as locating favorite shows, especially for screen reader users who often lost content due to changing URLs was solved by implementing a feature to save favorites.
Moreover, we added a “More” button to the player, which showed the next episode or programs similar to the current one. As a result, the amount of effort it took for users to find a new content was cut down.
CONTROL
FAMILIARITY
ADD VALUE
CHOICE
The “Favourites” page
The “You may also like” option shows related content and next episodes.
The I Watch page
The player page
A BALANCE BETWEEN THE NEW AND THE FAMILIAR SHOULD BE STRUCK.
3.4 FAMILIARITY
Users understand how to interact with pages and apps with familiar design patterns.
The new designs reinforce a logical heading structure within the code, which in turn facilitates navigation for screen reader users.
Key to this is ensuring that the pattern used for the heading structure is repeated across pages. As a result, users will find main headings at the same places on different pages.
CONTROL
FAMILIARITY
ADD VALUE
CHOICE
04 GUIDELINES
COLOR AND MEANING
CONTENT ORDER
Information conveyed with color must also be identifiable from context or markup.
Content order must be logical.
COLOR CONTRAST
Ensure that text and backgrounds are not less than WCAG Double A 4.5:1 contrast.
CONTEINERS & LANDMARKS
DUPLICATE LINKS
Page containers or landmarks should be used to describe page structure.
Controls, objects and grouped interface elements must be represented as a single component.
STRUCTURE
Pages must provide a logical and hierarchical heading structure.
SPACING
ACTIONABLE ELEMENTS
An inactive space must surround all active elements (unless they are big blocks exceeding 44 pixels).
Links and other actionable elements must be clearly distinguishable.
TOUCH TARGET SIZE
Targets must be big enough to click accurately (44 pixels).
05 THE NEW DESIGN
Keeping in mind above mentioned principles and guidelines, along with the renewed focus on the features that add value and enhance experience for users, here are a some of the changes introduced in the new design.
While the navigation is visually easy to find, it is also easy to discover by screen reader users via a hidden heading and labeled navigation landmark.
The home page carousel is fully keyboard accessible. Each program in the feed is presented as one link.
#3 KEYBOARD ACCSESS
#2 BETTER SEARCH AND DISCOVER TOOLS
Tools for for search have been added, enabling users to carry out a predictive search. This is all keyboard accessible, it makes use of headings, and it has landmarks where appropriate.
#1 PRIMARY INFORMATION AT THE TOP
The new header navigation
The new home page design
HTML semantic elements
06 ANNOTATED UX
All of the design improvements for inclusive design were captured, annotated for accessibility and communicated to developers and engineers. This includes:
#1 HEADINGS
#2 CONTAINERS
#3 CONTENT ORDER
#4 COLOR CONTRAST
#5 ALTERNATIVES TO COLOR & MEANING
#6 VISIBLE FOCUS
#7 KEYBOARD AND INPUT INTERACTIONS
07 RESULTS
+30%
EXPANDED MARKET SHARE STATISTICS
Increase in users accessing content
Growth in audience among previously inaccessible users
Rise in revenue attributed to new users
20%
25%
+40%
ENHANCED BRAND PERCEPTION
Increase in brand loyalty
Positive media feedback improved brand reputation
Media
+25%
CUSTOMER LOYALTY
Increase in loyalty among disabled users
Decrease in abandonment rate
+20%
