Case study · Docusign Experience Design · 2019–2026

Accessibility across Experience Design

Training, component specs, and hands-on partnership that brought accessibility into the everyday work of Docusign’s product teams.

  • Everyproduct team at Docusign partnered
  • 20+component and pattern specs
  • 14+products tested with Fable testers
  • Allteams welcome in Champions

A sample of the work, from training to shipped patterns.

Role
Accessibility Designer on Experience Design
Partners
Product designers, content designers, engineers, researchers, and the design systems team
Timeline
2019–2026

Overview

Accessibility shouldn’t wait for an audit. I try to show up early, in the files, specs, and prototypes where decisions get made.

The problem

Accessibility know-how lived with a few specialists, and questions often came late, after designs were set and fixes cost more.

The goal

Make accessibility part of how every team already works: give designers what they need in the moment, build it into our components, and test with disabled people early.

My part

  • Made training designers could use right away, like A11y Snacks.
  • Helped open the Accessibility Champions program to everyone.
  • Wrote accessibility specs for components and patterns.
  • Partnered with product teams on annotations, prototypes, and fixes.

Learning together

  • A workshop cover on deep navy: four scuba divers in orange, lilac, blue and pink swim toward an “A11y” tag, beside the words “Workshop: Annotation Deep Dives, 2026.”

    Workshops

    Annotation Deep Dives

    I ran more than 12 workshops that revised every annotation in A11ykit. We reviewed real work from designers and decided what was required, what was optional and what needed improvement or more clarity.

  • A cover graphic on deep blue: a coral arch with a bag of chips spilling out, beside the words “A11y Snack” and “Table Headers.”

    Training

    A11y Snacks

    Bite-size Figma files with everything designers need to make one pattern accessible. The first snack, Table Headers, covers what it takes to build an accessible table.

  • A graphic on deep blue: an orange arch with a neon “Open” sign, beside the words “Champions is now open. Join us on Slack, #accessibility-champions, open to all teams.”

    Community

    Champions, now open to all

    We opened the Accessibility Champions program beyond engineering, so anyone at Docusign can join. I helped create the branding and supported the programming, led by Lamar Jordan.

Workshops and office hours

  • Facilitated a role-play workshop at Docusign’s first accessibility offsite (June 2025). Each accessibility engineer stepped into the shoes of a designer, product manager, program manager or product team engineer. It uncovered our biases and helped us redesign our tools and services.
  • Led live A11ykit 1.5 testing in a sandbox library with the accessibility team, the Design Systems team and XD designers. What we found led to changes before launch.
  • Took part in weekly accessibility office hours for our partner teams.

Patterns with accessibility built in

  • A date picker spec in Figma. Numbered markers on the date field, calendar grid, month picker, and year picker connect to ARIA Details cards, such as: gridcell with the accessible name “Monday, March 3rd, 2025” and aria-current date; a textbox named “Date” described by the date format; and Previous and Next month buttons with aria-live polite.

    Design systems

    Calendar component spec

    An accessibility spec for the date picker, made with A11ykit. Every control has a role, an accessible name, and live updates where they help, from the day grid to the month and year pickers.

  • A header with two skip links in a bright yellow bar, “Skip to first workflow step” and “Skip to zoom controls,” above a black bar with a back arrow, “Untitled,” and an “Unpublished” tag. Below: Skip link 1 text: Skip to first workflow step. Skip link 2 text: Skip to zoom controls.

    1DS

    Skip links header

    A skip links pattern for the 1DS header, so keyboard and screen reader users can jump straight to the first workflow step or the zoom controls.

  • Currency in Web Forms: a required Contract Value field showing $25,000,000 with a USD menu; field menus with a new Currency option; and a Properties panel with Currency Type, Allow editing currency type, and Decimal Separator choices of Period, Comma, or Browser default.

    Web Forms

    Currency fields

    I collaborated on currency patterns for Web Forms, from how the amount and currency type are labeled together to settings like the decimal separator.

Testing the combobox

I led a v0 prototype to test variants of the combobox with Fable testers. What we learned moved the Workflow builder team forward with a new, accessible pattern.

Four studies over one week covered the different ways people use a combobox, so we weren’t designing for one kind of user.

  1. Screen readersModerated
  2. Alternative navigationModerated by me
  3. CognitiveModerated
  4. Mixed assistive techUnmoderated

Side by side with product teams

A chart with a table inside

A chart should never be the only way in. I designed a data table alternative, one menu choice away, and worked with the Principal Engineer to bring it to life.

Every number in the chart is also in a real table, with headers, that a screen reader can move through cell by cell.

Getting there took sticky notes and options with the Navigator team: how people get from a chart card to more detail, and what a keyboard or screen reader user lands on first.

A Figma board with sticky notes beside an “Agreements in effect (53)” bar chart card. A yellow note reads: “Problem: customer wants to see more information about expiring agreements. Goal: how might we show more details?” Blue notes suggest using the header or sub-header to link to a secondary page, placing the words “More details” on the card, adding a button that says you can open the chart, and asking whether a focusable chart region could link onward.
Working through options with the Navigator team.
A bar chart titled “Snowfall in Inches, month over month in Washington State,” with four colored bars for Alpental, Stevens Pass, Mount Baker, and Crystal in each month from January to April, and a more options menu in the corner.
The chart, with a menu in the corner.
The same card as a data table, with columns for Month, Alpental, Stevens Pass, Mount Baker, and Crystal. January: 40, 28, 24, 55. February: 30, 20, 24, 22. March: 20, 29, 24, 22. April: 27, 20, 24, 20. The open menu offers “View as chart” and “Download as png.”
The same data as a table, and a way back to the chart.
  • An ARIA Implementation annotation for two buttons, with accessibility text like “Remove Type Attribute 1” and “Remove Value Attribute 2.” Beside it, a Figma comment from Dott proposes the pattern “Remove attribute Value number” and invites content design to weigh in. A teammate replies, “I like this! Clear and to the point.” Teammates’ names and faces are blurred.

    Annotations

    Recommending accessible names

    I annotate alongside designers and suggest accessible names, then loop in content design to get the nouns and verbs right.

  • A “Downloading your file” dialog annotated with heading markers, H2 on the title and H3 on “Next time, share your file directly,” and numbered focus order: 1 on the close button, 2 on Skip for Now, and 3 on Share.

    Growth

    Annotations for growth

    Headings and focus order for a download dialog, so engineers know what a screen reader announces and where focus goes next.

  • Docusign’s Completed Documents page, with a list of sample agreements and a search field in focus. A screen reader caption at the bottom reads: “Search Search suggestions are available, list box pop up collapsed, combo box, search.”

    Docusign IAM

    Completed, with a screen reader

    Testing the Completed experience with a screen reader turned up issues like a search field announced as “Search Search.” I worked with the team to make it clearer.

  • Two screenshots of Docusign’s Add Fields page. On the left, fields are placed on a VPAT Agreement document. On the right, the end of the document, with a “Return to top of the page” link in focus.

    Signing

    Focus that keeps your place

    Fixing where focus lands while people add fields to a document, with a link to return to the top of the page.

Outcome

Designers, product managers, content designers, engineers, and researchers all helped carry accessibility forward. That shared ownership is what I’m proudest of.