Buttons

Date

March-April 2022

UX/UI

What I Did

Team

Andrew Schwint

Colleen Curtis

Angela Lin

Bernie Smigel

Figma

Tools

Product managers were looking for a new way to get sign-ups via web. They believed this would increase engagement and sign-ups for each client. This was the first project I worked on at Well.

THE PROBLEM

There are accessibility issues with the current design and too many button types. How can we make a reusable set of buttons for the component library?

THE START

The challenge of redesigning components with accessibility issues.

There were clear accessibility issues with the current design. The yes and no buttons were two large squares in the middle of the page and it was difficult to read for people who needed enlarge text or change it into a different language.

My first goal was to see what we could reuse from our current components and designs so developers wouldn't be burdened by another complex project.

Some Requirements

Gather research on button types (tags vs. buttons, multi-select, etc.)
Incorporate accessibility requirements for buttons
Review current button types and reusable elements
Design all selection screens

DESIGN

Knowing when not to save designs, and figuring out the complexities of accessible design.

First Design and Iterations

The old design used a colorful background. I attempted to save the old design. I played with multiple selection styles and button types.

In the second iteration, accessibility again became an issue. There needs to be two things that indicate selection, not only color. I played with different ways indicate selection, but realized the background was inhibiting a lot of my designs.