Buttom System Design - Tech Fitness Desktop Website

Hi everyone! I'm Adolfo Deffit, and I'm excited to present my project. This is a system button designed for a fitness tech platform to find and book a gym subscription in your local area. This system button was specifically created for a desktop website. The reason why this fitness tech platform was chosen is to challenge myself to do something different from what was previously done by the community members here in Uxcel and develop my critical thinking on what is useful and what is not for users on this type of site.

Design choises:

To evoke energy, motivation, and enthusiasm, vibrant orange was selected as the main color. This color, in combination with pink, generates anticipation when hovering over the buttons and invites the user to take action. The system colors, green, yellow, and red, create a rich variety of buttons to guide the user throughout the site. The Switzer typeface was chosen because it's strong, dynamic, and easy to read on any screen.

In developing the system my focus was on:

-Make the user take action: We want the user to find and book a gym subscription. For this reason, all the buttons that lead to this goal have the primary color (vibrant orange) and an orange-pink gradient when hovered over to invite the user to click on them.

-Friendly look: I wanted the buttons to look friendly for those who are just beginning their fitness journey. For this reason, I left behind ideas associated with going to the gym like hard work, commitment, and sacrifice and designed buttons with rounded edges and a friendly look so every user can feel included from the start.

-Clarity: At the beginning of this project, I was inclined to use a neo-brutalism style (which I love), but then I noticed the design style wasn't as clear as I wanted for this product, which led me to switch to a simpler style that is easy to understand for the user and resonates more with the type of person involved in fitness.

-Accessibility standards: While maintaining a pleasing look, the color combination chosen for this project adheres to WCAG guidelines for sufficient color contrast.

Designing button states:

-Button priorities: Primary, secondary, and tertiary. Primary for the most important action to guide the user to the desired action. Secondary for less important actions on the site and to support the primary buttons. Tertiary for less frequent actions and to provide contrast to the primary button.

-Button states: Default, hover, press, focus, and disable. Each one designed for user interaction with the button, enriching user experience and guiding it with subtle cues.

-Success, warning and danger states: Show the user when they have completed an action, when there is an action they need to pay attention to, or if the action they are about to perform is irreversible.

-Sizes: Having three different sizes to ensure usability.

-Simple design and color scheme: To motivate and enthuse the user through color without overwhelming them with a complex design.

-Easy-to-read typography: Using the Switzer typeface not only for its strong and dynamic look, which matches perfectly with a fitness site, but also because it is easy to read on every platform.

UI and Modals examples:

I include two slides where I exemplify with UI wireframes how these buttons will be used and how the user will experience them to demonstrate the practicality and usability of the system.

A final note:

I chose to limit the variety of button sizes, icon buttons, and system success, warning, and danger secondary and tertiary types in my presentation to focus more on the design and usability of the button system to achieve the main goal of the site, which is to make it easy for the user to find and book a subscription to a gym near them. Also, making the presentation more concise for the audience.

Thank you!