User Experience (UX) Designer Responsibilities Mapping

This is an in-progress draft. We welcome comments via GitHub or email from the links below.

Role summary

UX Designers can potentially cover numerous related areas, from conceptualizing the user journey to partial front-end development. For the purposes of this resource, UX Design is defined by its core responsibilities, such as information architecture, creating wireframes (low fidelity screen mockups), and creating prototypes that define interactions.

Key deliverable examples:: User journeys, wireframes, prototypes, interaction guidelines, information architecture
Tasks include:: User workflow / process maps, designing user experiences, user task and workflow mapping, creating and maintaining user personas
Example job titles for this role:: User Experience (UX) Designer, Product Designer, Web Designer, Service Designer

Activities Starter List

Below is a list of tasks for UX designers to get started. If these design tasks aren’t met, your design can cause significant barriers to users with disabilities.

@@ This list is taken from the full list of UX Designtasks.

For all role tasks, see the [~~Checkpoint~~Activity Full List].

ID	WCAG SC	Level	Task	Main Role	Primary Ownership	Secondary Ownership	Contributor
SEM-018	2.4.1	A	iFrames displaying content are provided with a clear, informative title attribute value.	Design	UX Design	Content Authoring	none
INP-007	2.1.1	A	Behaviors for hover and focus states are planned and included with the design assets.	Design	UX Design	Visual Design	none
INP-008	2.1.1	A	Keyboard focus states are planned for every active element.	Design	UX Design	Visual Design	none
INP-024	3.2.2	A	Keyboard focus does not move automatically from one form control to the next.	Design	UX Design	Front End Development	none
FRM-020	3.2.2	A	Form interactions are not designed to include automatic changes of context upon input that would otherwise require explicit user action unless previously communicated.	Design	UX Design	Front-End Development	none
FRM-029	3.3.2	A	Form controls are designed to have persistent visual labels.	Design	UX Design	Visual Design	none
FRM-035	3.3.3	AA	Text-based instructions are provided to help users correct errors.	Design	UX Design	Content Authoring Visual Design	none
FRM-036	3.3.4	AA	Users are provided with means to prevent and correct form errors when legal, financial, or data information is involved.	Design	UX Design	Business	none
NAV-003	1.4.1	A	Additional visual and/or textual cues are provided when color is used to convey information.	Design	UX Design	Visual Design Content Authoring	none
NAV-006	2.2.2	A	Users are given means to pause, stop or hide content that automatically updates.	Design	UX Design	none	none
NAV-009	2.4.1	A	Users can bypass blocks of content using skip links or similar mechanisms.	Design	UX Design	none	none
NAV-014	2.4.3	A	A logical and predictable focus order is defined for complex interactions.	Design	UX Design	none	none
NAV-020	2.4.5	AA	Multiple mechanisms are provided for wayfinding, such as navigation menus, breadcrumbs, search features, site map, progress bar, steps, etc.	Design	UX Design	none	none
NAV-024	3.2.1	A	Setting the focus to a new element doesn't automatically trigger a context change, such as content updates or the opening of new windows.	Design	UX Design	Front-End Development	none
NAV-026	3.2.3	AA	Navigation mechanisms are repeated consistently throughout the site or application in the same relative order.	Design	UX Design	Visual Design	none
ANM-022	1.4.2	A	Multimedia player controls are provided to turn sound on and off.	Design	UX Design	none	none
DYN-002	4.1.3	AA	Status messages are announced by assistive technologies without affecting the focus.	Design	UX Design	Front-end Development	none

Case Study: How to use the Starter List

A good way to get familiar with the tasks is to do a short case study. Think about how you might tackle the task in your role.

Then, think of how meeting this task impacts an end user.

Task:

NAV-024: Setting the focus to a new element doesn’t automatically trigger a context change, such as content updates or the opening of new windows.

Primary Role: UX Designer

“As the primary owner of this task, I will add annotations to my design document(s). They will identify which elements on the page receive keyboard focus.

I will include this instruction for Front-end developers: implement the interactive elements in a way that, when the element receives focus, it doesn’t automatically trigger a context change on the page.”

Secondary Role: Visual Designer

The secondary owner of the task is the Visual Designer. They may have designed content to appear on the screen once a button receives focus and is selected.

Explain the behaviour and functionality that you intend as the UX Designer and primary owner. For example, if the button receives focus, it shouldn’t automatically show the content. It should be user-controlled; the user needs to select the button for it to display.

Collaborating on the design together ensures that it’s optimized for multiple end users.

@@update with new User Story}} Ilya is blind and uses a screen reader (speech-to-text software) and keyboard to navigate web pages. She uses websites daily for research and financial transactions. This design task ensures she isn’t confused by an unexpected behaviour, i.e., when her keyboard focus lands on a button for the first time and content is announced automatically or the button automatically opens another page.

The intent of the task is to ensure that functionality is predictable as visitors navigate their way through a document.

This task helps people with visual disabilities, cognitive limitations, and motor impairments by reducing the chance that a change of context will occur unexpectedly.

Read Ilya’s full story@@update with new User Story}} and learn about other design tasks that benefit users like her.

Resources

Use the Tips for Designing to get started
See the WAI Tutorials for common web components and how to make them accessible