Button System Design for Tech Platform

Introduction:

For this challenge I took inspiration from Booking.com to create a button system that introduced a fresh and modern design approach.

Goals:

• Provide clarity: establish a clear and easy to understand button system that outlines the requirements for each button style and application.
• Uphold accessibility: ensure accessibility is maintained through adhering to WCAG guidelines for colour contrast to a minimum AA level

Button Types:

Primary, secondary and tertiary buttons were created to provide a range of options for use across a tech platform. Each button type was created with its unique role and interface hierarchy in mind.

Primary buttons serve as the most prominent focal point for main actions and CTAs. For this reason these are designed to be the most prominently button, using a blue colour palette inspired from Booking.com.

Secondary buttons provide a complementary option to primary actions, designed in a greyscale that is both distinctive but not obtrusive.

Tertiary buttons act as an alternate button choice that can be used more flexibly across a tech platform, providing a subtle option for less prominent actions while maintaining visual hierarchy.

Button States:

Five button states have been provided in the button system to provide users with visual feedback on interactivity and usability.

• Default: The standard button UI when not in use
• Hover: When users hover over a button, the design provides visual feedback inviting engagement
• Focused: Provided primarily for keyboard navigation, the focused state provides clear visual feedback of a users' selection and location on a UI
• Active: A visual confirmation of a users selection of a button
• Disabled: To be used in place of the default state when a button is unavailable for interaction.

Accessibility Considerations:

Colours selected for the buttons were tested for compliance with WCAG standards, ensuring clarity and accessibility for those with visual differences. This was an important step to consider to provide an inclusive design experience.