September 10, 2023

Make it accessible and inclusive, make it great!

Learn more about how Exygy is actively integrating the valuable lessons and insights gained from attending Figma's Config Conference.

SERVICE:

App Design

SERVICE:

Design Strategy

IMPACT:

Thought Leadership

Vanessa Guilloteau and Nahema Soussin are from Canal+, a French media company. They faced the challenge of making their software platform accessible across multiple channels and languages. They prioritized inclusiveness by assessing pain points, leveling up the team across UX methodologies, replacing design tools, creating a new design system, and hiring new roles.

They also created squads dedicated to accessibility and tested with blind users to improve the product experience. The iterative process involved collecting insights, collaborating on solutions, and validating iterations. The challenge now is to convince more entities to do the same.

Across our own product teams, we’ve also realized the need to include the whole team, including design. product and engineering to standardize how we deliver products that are accessible.

Here are some key takeaways:

Step 1: Assess the situation

‍They connected with the team and identified four major pain points from product design, management, tech, and artistic teams.

The product design team is UI-centric, not user-centric.
The design team lacks maturity in UX methodologies.
Product experiences are disparate across devices and platforms.
Collaboration between design and tech is limited and complicated.

Step 2: Prioritize Next Steps

‍To tackle multiple issues, a four-phase approach was taken:

Methodology: The team was trained in UX methodologies, integrating user research and testing to make designers aware of user interaction with the product.
Tools: Due to lockdown and remote work, design tools were replaced with more inclusive and efficient ones, such as Figma and Figjam, to facilitate collaboration.
Design System: A new design system was created to unify the product and improve user experience across devices and countries. All design and technical components were centralized in a single repository, but this was a complex challenge that required a lot of evangelizing across the company to convince key decision-makers to invest in it.
People: New profiles and roles were needed to activate this change. This included Design Ops creating new processes and facilitating collaboration, UX Writers creating an inclusive editorial strategy, UX Engineers bridging the gap between design and tech, and Accessibility Specialists guaranteeing the accessibility of all components.

Step 3: Make it Accessible

Measure success with accessibility: There were no KPIs for disabled users, so the team couldn't promote the work's value. To protect privacy, you can’t track someone's disability. They needed to find a way to track the impact of the changes they were making.
Help product designers understand accessibility: It is important to socialize and prioritize the value of accessibility in the product roadmap. Squads dedicated to accessibility were created to help teams grow in their understanding of accessibility.
Establish usability testing with people with disabilities: They tested with blind users to ensure that anyone could use the platform. All in all, they spent two days testing with 10 blind users.
Create a new shared process: They created an iterative process to integrate findings without disturbing the product roadmap. Key steps were:
Assign feedback to appropriate members of the product squads
Hold workshops to find solutions to integrate accessibility improvements into project sprints
Validate iterations with new user testing after implementation

The talk ended by calling out how there was more work to do to standardize their learnings across their wider team in order to drive adoption. Standardization is something that we value at Exygy and our own team has been driving towards a new shared process for delivering on Accessibility and Inclusive Design. We’re excited to announce more as we continue to iterate, so stay tuned for updates.

In the meantime, please take a moment to read up on our team's path to provide more accessible and inclusive experiences - exygy.com/accessibility

Resources

Stream the full session

‍

What’s a Rich Text element?

H1 example

H3 example

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.