How we created a design system that prioritizes accessibility for Prime Therapeutics

Digital accessibility is no longer just a nice-to-have feature for your app or website — it's a business necessity. Providing seamless, inclusive user experiences mitigates lawsuit risks ahead of new regulations such as the European Accessibility Act, which goes into effect later this year. It also represents a significant competitive advantage, considering 94.8% of website home pages fail to meet Web Content Accessibility Guidelines 2.0 (WCAG) standards.  

As we explain in our blog post about our accessibility-first approach to apps and websites, it’s not just the right thing to do, it’s the smart thing to do for brands and businesses.

Prime Therapeutics, a leading pharmacy benefits manager (PBM), agreed. They chose ArcTouch to help design a new responsive and accessible company website for their clients, members, and healthcare providers. 

[RELATED: The State of Mobile App Accessibility report offers insights to product leaders on the current state of digital accessibility.]

Designing an inclusive experience

Design systems are one of the best ways for companies to ensure a consistent user experience across digital products. Applying a comprehensive set of standards, documentation, and reusable components helps to efficiently scale app and website development.

Similarly, a design system that prioritizes accessibility makes it easier for development teams to build digital products that consistently deliver inclusive experiences. It allows everyone involved in a project — from UX and UI designers to engineers and QA team members — to have a clear understanding of how to combine the different components of the system, from carefully tested colors to the correct labeling of components, promoting consistency, scale, and usability.

Accessibility documentation, including this example from the Prime Therapeutics website project, offers clear guidelines for developers, designers, and content creators.

This commitment aligns with standards like Section 508, and ensures a better experience for every user to access vital healthcare information and services.

When we started the website design project, we established two main goals: 

• Include accessibility experts during the entire design process, from the information architecture to the final delivery. 

• Provide the Prime Therapeutics marketing and development teams with robust guidelines for all accessibility website components.

We conducted a comprehensive audit of Prime’s existing website flow and created a new sitemap, including an accessibility checklist to ensure we captured the specific requirements for this. 

We established workflows to test and validate the designs’ accessibility, including discussions at every design review meeting with the client team, and multiple rounds of usability testing via Fable with people who rely on assistive technology. We set principles to guide our design and development:

• Visual disabilities: Support people who are blind or have low vision by providing good alternative text and semantic HTML. Don’t rely on color or shape to convey meaning; use accessible color contrast.

• Hearing disabilities: Include people who are deaf, have full or partial hearing loss, or have difficulty processing auditory information by providing information in non-auditory formats.

• Limited mobility: Account for people who have difficulty using a mouse or other navigation peripherals by supporting keyboard navigation, large selectable targets, and correct semantic HTML for speech recognition software.

• Cognitive disabilities: Support people who have memory loss, cognitive overload, difficulty reading or writing, and trauma/mood disorders by using clear wording and designing a user interface that is clear and easy to navigate.

We created the design system using Figma variables and components, adding detailed accessibility specifications. For example, the documentation includes color palettes optimized for contrast, typography enhancing readability, and interactive elements easily navigable via keyboard or screen readers.

As an example of color contrast accessibility. We tested each color for contrast and added specifications to the guidelines.

Using component states helps developers understand what elements are focusable, where the user can tap, and what screen readers should read from the screens.

We created our documentation so developers could implement all accessible components correctly. This included use cases, naming and tags, usage guidelines, and common pitfalls to avoid.

To simplify accessibility annotations for developers, labeling, screen reader guidelines, focus order indicators, and other component states were done at a component level inside the design system documentation.

Validating the accessible design system with disabled users

To validate the accessible design system, we created a website prototype in Figma and tested it with a range of disabled and non-disabled users, including current Prime Therapeutics customers. 

We tested the main navigation, user flow, and key features, including accessing important content, using search, and connecting with customer service. We conducted 20 moderated sessions with users, half of whom relied on assistive technologies, like alternative navigation and screen magnification. 

The feedback from these sessions was validating and actionable. Users highlighted areas where our designs excelled and others where there was room for improvement.

After the tests, we redesigned content pieces. For example, users with visual impairments had difficulty finding a floating contact/chat button and looked for it in the main menu instead. So, we added it to a fixed location in the menu to make it easier to find.

Accessible experiences are better experiences

Through this process, we learned that improving user experience for people with disabilities is a way to enhance the experience for all users. Of course, focusing on accessibility is essential for businesses to meet legal requirements and reduce risk, but most importantly, fostering a more inclusive digital environment will maximize the potential user base and help grow your business.

For other designers and product managers embarking on similar journeys, we recommend starting by building awareness and understanding about accessibility within your teams. Prioritize accessibility from the start and involve users with disabilities in your testing processes. Their insights are critical to creating genuinely inclusive designs that are welcoming and usable for everyone.

Want to build a lovable and accessible website for your company?

ArcTouch digital accessibility specialists have expertise in creating lovable and inclusive websites, apps, and connected experiences for companies of all sizes. Contact us to get started.