bauerhorst
UX UI Designer & Director
CASE STUDY
USAA Button System
Role:
Researcher and UX Designer
Background:
As I was a designer on the Design Language System team, I was tasked with designing a button system for USAA, which included different sizes, states, icons and hierarchy build into it.
USAA adopting my primary-fill button design which has seen a lift in conversion by
12 - 17 %
resulting in
53k - 77k additional yearly clicks
The first thing I did is gather what was currently available. Next I went to the different design teams and listened to their needs. One main concern was that smaller CTAs were needed, as the current ones where 75px in height. Disabled and destruct buttons, as well as tertiary buttons were also needed. With this in mind I started some research on the web about how to build a button system for a ui kit. I took inspiration from other design languages that are out there, such as Carbon Design and Atlassian Design, for example. After that I did some research on what buttons are necessary and how they should be styled to be used most effectively. It's amazing how important every detail is, such as typography, min height to ensure accessibility guidelines for touch target, color and so on.
Once I created my system, which now includes primary, secondary, tertiary, destruct, disabled and icon buttons, as seen in the image below, I was ready for my accessibility meeting. I needed to make sure that these buttons will pass the w3 wai Aria guidelines and contrast requirements. To ensure usability for disabled visual users and for high contrast mode, a invisible border was added.
Objective:
smaller buttons/CTAs were needed
a complete button set was needed
a disabled and destruct button was missing
hollow button as primary button didn't perform well
Process:
talked to designers to find out what they needed
industry research on button sets and hollow CTAs
comparing other design language systems
A/B testing hollow primary button vs. fill primary button
Product teams are designing their own buttons, because they don't like the current ones.” —D. from Digital Optimization
Research:
Ghost buttons drive me crazy. It goes against usability. The concept is a designer’s fantasy trend that should die. The only time I find this tactic useful is when a client insists in having two CTAs on the page, and I basically want one to disappear. Ghosted buttons have ghost conversions.”—Angie Schottmuller
A/B test results:
Primary fill buttons outperformed the primary hollow call-to-action buttons by
12 - 17%
Solution:
change hollow primary buttons to primary fill buttons
hollow buttons become secondary buttons
tertiary text buttons added
disabled and destruct buttons added
normal CTA size reduced to 54px height, reduced from 78px
small buttons added with a height of 32px with extra padding to meet accessibility requirements for touch target
icons can be added to CTAs
complete button set was created
Buttons / CTAs rationale
Buttons let users take an action
Links take a user to a different page
3 button types
Primary Fill button
Fill buttons are heavy on purpose. They are supposed to create a stark contrast, to easily and quickly direct the user to the primary action. Primary CTAs/buttons should always be used as the most important CTA on the page. Primary buttons can be used in conjunction with a secondary button or tertiary button to create a clear visual hierarchy of importance of actions to be taken.
Secondary Hollow button
Hollow buttons are lighter in weight and create less of a contrast on the page. They indicate a secondary action and can be used in conjunction with a Primary CTA to create a clear hierarchy of importance of actions to be taken.
Tertiary Flat button
Tertiary buttons work great for “Learn More” buttons and in areas where there is limited room, such as mobile screens and in card components.
A11y
To meet accessibility standards, try avoiding the usage of the disabled button. If it is needed, a screen reader message will have to be added that explains what steps the users must perform to continue the working flow.
To make all buttons accessible we have to add a 2px transparent outline around Flat buttons and our red buttons on the dark background
Button Colors
To achieve maximum contrast buttons are available for light and dark UI.
Placement
• Standard Body Copy: align button on the left side of the screen
• Affirmative button on the right and dismissive button on the left
• use the Z-reading pattern for Modals and Wizards by placing the buttons on the right
• use the F-reading pattern for Forms and Cards by placing the buttons on the left
Typography
• Maximum Character count is 26 characters,
• Button content is set in Title Case
• Font always Gotham Medium at 16px
• Don’t use generic language for button content, use words that create a call to action (ex: “Would you like to upload the document?” Button content: Okay vs Add. Add is a call to Action and explains what the user is about to do when clicking on the button.
Visual Style
Border Radius
2px
Size
Two sizes are available, Small and Standard.
Normal CTA height of 48px
Small CTA height of 32px has 8px extra padding added to ensure A11y touch target area is met
Mobile CTA
Mobile buttons stretch all the way across the device to ensure touch target is always met. If multiple CTAs are used, such as a Primary and Secondary CTA, they will stack on top of each other or if room permits, they can sit next to each other.
Padding
22px padding is added all the way around.
Spacing between two buttons is 22px.
Action-based Color
Red buttons are only used for destructive actions, such as Delete, Remove, Disable…
Hollow & Active Style Color
Always the same color
