- INTRO -

A redesign of G HUB’s visual style.

*G HUB is the software for Logitech G products.

Role

VUX lead. I’m working with another Visual UX designer and two IxD designers.

Goal

An accessible, inclusive, and well-crafted design system that is the foundation to unify all Logitech G software products.

Insights

Need to push accessibility further.

Not inclusive for broad range of users.

Everyday users are surrounded by beautiful UI.

Opportunities

Meet accessibility standards, to provide equal access and opportunity.

Elevate visual language, so it’s inclusive and exciting to a broader audience.

Craft a design system as the foundation, to unify all Logitech G software products.

UX Principles

Trustworthy, to foster a relationship built on quality, reliability, & integrity.

Inclusive, to facilitate a welcoming, accessible engagement.

Faceted, to accommodate users behavioral modes and activities.

Curated, to empower users with contextualization and personalization.

Bite-sized, to provide an experience with flexible access and digestible tasks.

Integrated, to expand digital touchpoints with an enriched ecosystem.

- CONCEPTS -

FEEL IT MORE

I presented 3 visual directions to the team. And FEEL IT MORE is the one that the team is aligned on. Let’s only focus on the look & feel for now. Not the functions and the usability. We have 2 tracks which are IxD and VUX tracks. The IxD track is dramatically slowed down. We have to separate these 2 tracks a bit.

Design Details

Challenges

Just want to give you a comparison. Here is a screenshot from the Legacy G hub. It’s a bit serious and dull.

Color palette

For the new look & feel, the color palette is more vibrant to elevate the excitement. And I’ve paid attention to the accessibility.

No #000000 and #FFFFFF anymore. The software needs an elevation on its emotional experience. So I chose gradient color for a better vibrancy.

Color Contrast

The contrast ratio is WCAG AA complied.

Screenshots with Sim Daltonism

To empathize with the users with vision limitations, I used a software to simulate their vision so as to make sure that the design is also accessible for them.

Responsive layout grid

12 column layout as the base line: 24px for the gutters and margins; 84px for the columns. All the components sit in the 4x4 grid system. It helps keep the visual cadence. And the UI components will be scaled and responsive when scaling the software window.

Mini sticker sheet.

Before this exercise, we have created a code based design system using Material Design’s framework. The mini sticker sheet is to help us get ready for refreshing the design system.