Flywheel’s interface is known and recognized for its colorful palette and whimsical experience. It’s just one way we reflect our core value “Design Matters.” We believe that good design is not just aesthetically pleasing, but also utilitarian and delightful for all. 

Accessibility is an area that our Product Design team is putting laser focus on this year, and I’m happy to report that we are making progress with some small but impactful changes to the Flywheel UI that will improve color and text contrast throughout the app in big ways.

TLDR; We have made a handful of color contrast changes to our text, buttons, links, and labels in the Flywheel app, as well as, a cross-department collaboration with Marketing to improve accessibility on the marketing site, getflywheel.com.

Why the change?

While working on a project, I came across a scenario where I was designing labels—I know, super exciting stuff here. Anyways, the labels were conveying a pretty critical piece of information to our customer (Agency owner) on whether or not they were paid by their clients.  

The labels were red, to communicate unpaid and green, to communicate paid. My design spider sense started tingling because I felt uneasy about relying on red and green to communicate a payment status. So, I got curious and checked the color contrast on the text to make sure that even if a user had red/green color-blindness, they would at least be able to read the label. (Shoutout to Stark for creating my favorite color contrast tool inside my design tool, Figma.) 

The contrast failed on both the labels—frick. This sparked a discussion on the design team: Should we create a one-off label to be accessible in this scenario, or should we address the problem at a design system level?

Raising awareness with a hackathon audit

Around the time of these conversations, we had a 2-day hackathon event for the entire product/development teams. My design manager, Bianca Zongrone Jefferson, rallied a group of folks and pitched an idea to do an accessibility audit of the Flywheel app IN JUST TWO DAYS! Using collaboration tools and contrast checkers, the team was able to comb through the app and document their findings on a digital whiteboard. 

Collaboration is key

Following the hackathon audit project, there was more leadership buy-in to make the changes, and it brought awareness to the marketing team to improve the GetFlywheel domain This launched a six-week project where the marketing folks took a deep dive into the buyer’s journey.  

Marketing and product design teams collaborated in feedback sessions. This collaboration was key because it allowed our designers to understand the changes being made to the marketing site and quickly identify what would and would not work in the app interface. Big love to Katie Gleason, Andrea Wofford, and Nicholas Tilley for being such great collaborators to work with.

Turning concepts into validated deliverables

Now that we had clear direction from the marketing team, I was able to take those concepts and ideate on them further. This was a process with a lot of feedback loops from other designers and front end developers.  

A piece of feedback that I received from several designers was some concern about changing our primary buttons to yellow. They said that yellow is often used as a cautionary/warning color in app interfaces. There was also some concern around the new dark blue link color not being perceived as clickable. We were at a place where we needed user validation.  

My fellow product designer, Katie Fennelly, and I collaborated with members of our User Experience Research Team (Bri Landry and Jocelyn Bellas) to quickly generate a clickable prototype and a testing script to upload to Usertesting.com.  

We wanted to validate/challenge a few ideas:
1. Does the user have pause or concern with a yellow primary button?
2. Does the user understand that the dark blue links are clickable?
3. Does the new pastel label treatment read as an informative label

We were able to very quickly validate our concerns and felt confident moving forward after. Sidenote: I’m a bit of a color-theory nerd, and while yellow can be associated with cautionary warnings, it is regularly associated with brightness, happiness, and sunshine as well. If that’s not on-brand for Flywheel’s whimsy, I’m not sure what else is!

After we had our decisions made, we continued our collaboration with front-end developers to get the changes implemented and tested. Big shout out to Tony Prokop for leading all these efforts on the front end and for actively caring about accessibility in the UI.

This is just the beginning

While this is a big step in the right direction, we still have lots to learn and improve upon in the Flywheel app.  We believe in continuous improvement and learning, so to put more changes in motion, Bianca Zongrone Jefferson is leading a “virtual book club.”  online courses available to employees at WP Engine, including the Flywheel team, so we can all collectively learn more. 

We will continue to audit and clean up Flywheel’s design system components for color contrast in the coming months. The next phase will be an audit on the implementation of components and making sure we are considering things like aria labels, alt image text, tab order, focus etc. Then, we’ll create a checklist/workflow for engineers to ensure we are baking accessibility into our design and engineering processes.

What other accessibility changes should we be making based on what you’ve noticed as a Flywheel user? Let us know in the comments—who knows, maybe your idea will show up in our next round of changes!