Figma / Figjam / Web content accessibility guidelines (WCAG)
ExperiencePoint
project
This project aims to enhance the user experience for the workshop product of ExperienceInnovation™ | Aware by improving accessibility.
The workshop can be divided into two different user aspects: participants and facilitators. The participants join the workshop on-site or via a video conference application and engage in the design thinking case study simulation through a mobile device or personal computer. On the other end, facilitators share their facilitation slides via a projector or the video conference application and deliver the best learning experience for their participants by utilizing the simulation.
The workshop can be divided into two different user aspects: participants and facilitators. The participants join the workshop on-site or via a video conference application and engage in the design thinking case study simulation through a mobile device or personal computer. On the other end, facilitators share their facilitation slides via a projector or the video conference application and deliver the best learning experience for their participants by utilizing the simulation.
ExperiencePoint
ExperienceInnovation™ | Aware
Position
Primary UX researcher/designer
in the Agile team
Role
Lead UX Research
Design System
UX / UI Development
Usability Testing
Cross-function Communication
Lead UX Research
Design System
UX / UI Development
Usability Testing
Cross-function Communication
Challenges
"How might we enhance the accessibility of the workshop experience for both in-person and remote participants?"
This project required us to carefully consider various factors such as the consistency of company and product branding, the ease of participation regardless of location, and ensuring an equitable learning experience for all participants. To address the challenge, we focused on improving colour contrast based on desirability, feasibility and viability.
The goals of this project:
1. Researching Web Content Accessibility Guidelines (WCAG) level AA requirements for the use of colour section.
2. Research and assess new colours and create a new product colour design system that meets WCAG level AA.
3. Applying new colours to the workshop design.
Illustration representing the perspectives of individuals with different colour perceptions.
Design Process
Defined the baseline to understand the current product's status
At the beginning of this project, I assessed the existing product colour accessibility to understand which colour needs to be improved. I used a Figma plugin and WCAG to assess all existing colours.
After the assessment, I created a table to visualize the results and shared them to align with the stakeholders.
Simulated users' colour experiences
To empathize with the participants, I recreated their experiences using two different approaches.
First, I replicated on-site participants' experience using the projector. This simulation allowed me to understand the impact of workshop space settings, such as lighting, projector quality, angle, and size of the projected screen. I used a colour blindness simulator to experience how participants with different colour recognition perceive the colours.
I researched existing tools for participants with colour recognition challenges. This research aimed to assess if existing tools can improve the workshop colour experience. Unfortunately, I concluded that the existing tools are unlikely to solve the accessibility in colour.
Coblis — Color Blindness Simulator
Ideated solutions / created mock-ups and prototypes
I proposed two potential solutions: introducing dark mode and increasing the colour contrast of the UI design. Further research showed that Dark mode was not the best solution for accessibility (it will reduce eye strains though), so we reached a consensus to increase the contrast of the colours.
I worked closely with the creative team to identify specific criteria that the new colours should meet:
+ Comply with WCAG-level AA contrast standards.
+ Harmonize with the colours in the product families.
+ Align with branding.
+ Harmonize with the colours in the product families.
+ Align with branding.
New colour palette creation with Adobe Illustrator Blend tool
I generated new colours based on the branding colour using the Adobe Illustrator blend tool. This method allowed me to generate new colours within a harmonized range.
Tested and validated the solution and gathered feedback for improvement
We tested our colour options using a projector to observe how colours changed alongside a colour blindness simulator to assess perceptions from different colour spectrums.
I conducted interviews with facilitators, designers, and a few individuals with colour recognition differences to learn their feedback on the options.
I gathered and presented all the data points to the team for final decision-making.
outcomes
For the new ExperienceInnovation™ | Aware, I established a new design system with a colour palette that meets WCAG AA colour contrast standards while harmonizing with the branding. Additionally, I replaced colours with shapes where the colour element was previously used for navigation. This change ensures that participants with varying colour recognition abilities feel more included.
Finally, I delivered the new design system and the new product design to the development team.
Finally, I delivered the new design system and the new product design to the development team.
Facilitated an accessibility study session to raise awareness
The team was at the beginning of accessibility domains so I facilitated a session to introduce the Web Contents Accessibility Guide, explain why it is important, and how can we improve product accessibility.
I had over 10 participants including product owners, developers, designers and key stakeholders for this session. At the end of the session, I provided useful resources and shared them.
