Get in touch!

Overview

Client:

Cyboard

Product:

Custom Keyboard Configurator Website

Role:

UX/UI designer

“Cyboard is a fictional e-commerce website that wants to make buying custom keyboards as easy as buying pre-built ones, via their custom keyboard builder”

Problem

Cyboard wants to run as little risk as possible of users dropping off mid-task, even if they are new to the hobby

Aims

“The main goal is crafting an intuitive experience that reduces the users’ need for other information sources, and therefore minimises the builder’s drop-off rates”

📚 Information

Provide enough detail to make the builder accessible to keyboard newbies

👍 Confirmation

With its many moving parts, the builder should confirm steps and reassure users

🙋 Help

Provide details and suggestions to avoid a back-and-forth between Cyboard and Google search

Competitive Analysis

Six competitors were assessed via heurisitc analysis, in order to understand their pros & cons and common features of keyboard builders. After synthesising the data, here are the findings that stand out:

Information

Sites that went the extra mile, adding descriptions for switches made for a better experience

Information

Sites that went the extra mile, adding descriptions for switches made for a better experience

Confirmation

Some sites lacked a confirmation function for destructive actions (e.g. closing the builder)

Confirmation

Some sites lacked a confirmation function for destructive actions (e.g. closing the builder)

Help

The more polished sites had plenty of helpful additions that assist new users

Help

The more polished sites had plenty of helpful additions that assist new users

Initial Concepts

Categorised Builder

Mid-Fi wireframes were made to explore the builder's direction. Version A has the parts grouped in dropdown menus.

Categorised Builder

Mid-Fi wireframes were made to explore the builder's direction. Version A has the parts grouped in dropdown menus.

Categorised Builder

Mid-Fi wireframes were made to explore the builder's direction. Version A has the parts grouped in dropdown menus.

Categorised Builder

Mid-Fi wireframes were made to explore the builder's direction. Version A has the parts grouped in dropdown menus.

Open Builder

Version B uses an open builder concept, needing less clicks but sacrificing tidiness

Open Builder

Version B uses an open builder concept, needing less clicks but sacrificing tidiness

Open Builder

Version B uses an open builder concept, needing less clicks but sacrificing tidiness

Open Builder

Version B uses an open builder concept, needing less clicks but sacrificing tidiness

Usability Test Findings

A usability test in an A/B format was used to validate one of the two versions. Users tried both while talking aloud, and were also asked a series of question after trying each prototype, and after trying both.

🗂️ Categorisation

Most users preferred the neat organisation of Version A

🏷️ Descriptions

All users appreciated the thorough information available, especially for switches

😬 Mistakes

Many users struggled to keep up with what they picked and if they missed any required parts

HiFi Design Building Blocks

Variables

Variables were used to detect the users' item choices and adjust the keyboard preview, total price and category subheader accordingly

Variables

Variables were used to detect the users' item choices and adjust the keyboard preview, total price and category subheader accordingly

Variables

Variables were used to detect the users' item choices and adjust the keyboard preview, total price and category subheader accordingly

Variables

Variables were used to detect the users' item choices and adjust the keyboard preview, total price and category subheader accordingly

Dark Mode

Since custom keyboards are prevalent in the gaming sector, dark mode has been added for that gaming aesthetic

Dark Mode

Since custom keyboards are prevalent in the gaming sector, dark mode has been added for that gaming aesthetic

Dark Mode

Since custom keyboards are prevalent in the gaming sector, dark mode has been added for that gaming aesthetic

Dark Mode

Since custom keyboards are prevalent in the gaming sector, dark mode has been added for that gaming aesthetic

Responsiveness

Auto layout, a 12 column grid, and constraints were manipulated to achieve a fully responsive desktop experience

Responsiveness

Auto layout, a 12 column grid, and constraints were manipulated to achieve a fully responsive desktop experience

Responsiveness

Auto layout, a 12 column grid, and constraints were manipulated to achieve a fully responsive desktop experience

Responsiveness

Auto layout, a 12 column grid, and constraints were manipulated to achieve a fully responsive desktop experience

Fully Interactive

The variables make for a fully interactive prototype, allowing users to create any combination

Fully Interactive

The variables make for a fully interactive prototype, allowing users to create any combination

Fully Interactive

The variables make for a fully interactive prototype, allowing users to create any combination

Fully Interactive

The variables make for a fully interactive prototype, allowing users to create any combination

Final design highlights

Switches Descriptions

Switches got individual descriptions and sound previews, as well as descriptions for each tactility type.

Switches were the most confusing keyboard part, so these additions were necessary. The ample information is neatly hidden behind info buttons.

Switches Descriptions

Switches got individual descriptions and sound previews, as well as descriptions for each tactility type.

Switches were the most confusing keyboard part, so these additions were necessary. The ample information is neatly hidden behind info buttons.

Help Me Choose Modal

For indecisive users, the HMC modal allows them to first complete a quiz about their keyboard usage.

It will then recommend up to 3 switches based on their answers, with the ability to pick right then and there.

Help Me Choose Modal

For indecisive users, the HMC modal allows them to first complete a quiz about their keyboard usage.

It will then recommend up to 3 switches based on their answers, with the ability to pick right then and there.

Help Me Choose Modal

For indecisive users, the HMC modal allows them to first complete a quiz about their keyboard usage.

It will then recommend up to 3 switches based on their answers, with the ability to pick right then and there.

Confirmation Modal

Upon adding to cart, users are met with a confirmation that overviews their selections and indicates any missing parts.

It goes a step further by allowing users to freely reconfigure their keyboard in the confirmation modal itself

Final Testing

A second round of usability testing was used to assess the impact of the added features.

👶 Beginner Friendly

All users mentioned how useful the features would be for someone new to the hobby

🌊 Smooth Sailing

Areas that previously caused confusion have not hindered the users' navigation this time

⚖️ Comparison Feature

The 'Save' function can be used to compare builds, but a dedicated feature would be better

Conclusion

“The main goal was crafting an intuitive experience that reduces the users’ need for other information sources, and therefore minimises the builder’s drop-off rates”

📚 Information

Through the generous use of descriptions, users have no need to abandon the page

👍 Confirmation

Users' choices are always visible, and they can even change them in the confirmation modal

🙋 Help

A 'Help Me Choose' modal gives users assistance when picking the trickiest part: switches

Possible Future Explorations

Comparison feature

Mobile interface

Custom parts

Designer's thoughts

"Cyboard was naturally a more complex product, which proved to be great fun to tackle. The required problem solving was unique and the use of variables gave me different kinds of limitations to work around. Making a beginner-friendly rendition of a product with this many moving parts was very satisfying overall."

hello@alexradu.co.uk

Get in touch!

hello@alexradu.co.uk

Get in touch!

hello@alexradu.co.uk

Get in touch!