00 problem 01 proof of concept 02 from sketch to code 03 user testing 04 pivot 05 results
hamburger menu
plugin animation

color contrast

A side project with the goal of improving my workflow of adjusting inclusive colors (following WCAG)

challenges

Designing for myself, without an "official deadline" made it much more challenging to keep a reasonable timeframe and narrow down the scope. Also, doing the coding myself was much more work than I originally anticipated.

solution

A fully functioning plugin for Figma that checks the color contrast based on a selection, and lets the user adjust the colors and apply the changes to the design.

key learnings

Since I was designing this feature for myself I took my existing flow as a starting point. Testing it with users made me realize that there was a lot of room for improvement in the existing flow. I remembered that I also struggled at the beginning when using the existing tool. So the learning would be: always question if existing products do the right thing.

my contribution

Design, developement and testing

tools & languages

figma, html, css, javascript, typescript

timeline

3 weeks part time

what is the problem?

While working on new products I check if the color contrast is compliant with WCAG guidelines. When selected elements do not meet the standards, I have to close the plugin, adjust the colors in figma, open the plugin again and repeat this process. Sometimes I have to make a few rounds of adjustments, which makes this workflow inefficient.

sketch existing flow

can I make it? – proof of concept

Since this was my first experience with both developing for Figma and JavaScript, I started with a simple proof of concept. I created a very basic interface to check if the functionality of getting colors from selected rectangles would work.

screenshot first screen & code

take what you have and make it better

As a starting point I looked at the tools I was using and added the feature I needed. I improved my existing user journey to change the colors directly in the tool, which would give me an instant feedback and then I could apply the adjusted colors to the selection.

improved user journey

from sketch to code

work in progress: sketches, wireframes, screenshot, code

user testing had a huge impact

I tested the working plugin with 5 people. 80% of them said they would use it in their work, but I also uncovered 2 large usability issues:

#1 – users were lost when opening the plugin with nothing selected

screenshot error message

What happened?

An error message at the bottom of the screen was hard to notice. Also, users would have to select a layer and open the plugin again.
animation improved flow

Solution

The plugin always opens, regardless of the selection. If nothing is selected, it displays a message on the interface and automatically updates when selection changes. Also, the currently selected elements are listed.

#2 – functionality of adjusting colors wasn't clear enough

screenshot with old layout

What happened?

40% of users didn't realise that you could adjust the colors. 60% didn't notice that you could save the settings and apply them to the layers.
sketch new layout

Solution

I reorganised the layout and grouped the content into chunks that belong together, separated by dividers. I also added labels for clarity, and relabeled the button.

pivot: getting things right

Fixing the two major issues meant that I would have to change the layout completely. At this point, I realized that it would be worth the additional design & front-end effort so I decided to do so.

old version
The version I tested with the users
new version
Optimized after the feedback

results

I published the plugin to Figma Community. You can download it here