G HUB NFI
Create a consistent and scalable device lighting configuration experience for Logitech G HUB
Duration
3 Months, 2021
My Role
Product Design
Team
PMs, Design Leads, Devs.
Status
Shipped (MVP)
Problem
Millions of users are using G HUB — a configuration software for 50+ Logitech gaming devices.
Freestyle Lighting Configuration feature enables users to freely create various advanced lighting effect profiles for personal use or sharing in the G HUB community. However, it was hard-to-use, and the interaction model was not consistent across Logitech devices.
Freestyle Lighting Configuration feature enables users to freely create various advanced lighting effect profiles for personal use or sharing in the G HUB community. However, it was hard-to-use, and the interaction model was not consistent across Logitech devices.
Solution
I delivered an intuitive and unified cross-device interaction model for freestyle lighting configuration for all Logitech devices. And I designed a custom key group creation feature to boost lighting configuration efficiency.
My Final Design Deliverable
An intuitive, unified, and scalable toolbar for all Logitech devices. User can select a tool from the toolbar to decide how they interact with the LEDs on the device.
Select tool. If the user selects the Select Tool, they can freely select keys and configure the color of the selected key by adjusting the color picker.
Create a custom LED group. The user can press and hold “SHIFT” to multi-select keys, and then Click “+” button to add the selected keys to a new group.
Select a custom LED group. The user can click on a custom LED group to quickly configure it.
Quick select - Color group. After select this tool, the user can select the LEDs with the same color on device as a whole.
Quick select - default group. After select this tool, when the cursor is hovering on an LED that is grouped into one of default groups by Logitech, all other LEDs in this default group will be highlighted. They will be all selected if user clicks on this LED.
Brush tool. The user can select a color and then brush the color on the LEDs. The hovered LED will have a overlay with the BRUSH COLOR the user will apply on the target key. And the cursor will change to “Brush” style to increase the affordance.
Research
1. Requirement Gathering. We reviewed the target persona and identified 5 desired features related to freestyle lighting configuration.
2. Contextual Inquiry. I conducted contextual inquiries with 5 G Hub users to observe how they created lighting profiles and their opinions on the previous UI.
3. Pain Points Definition. As a recap of the insights from contextual inquiries, we defined 3 pain points.
It's very inconvenient for users to create consistent lighting effects across devices. The lighting configuration interaction model varies in different types of devices. User needs to familiarize with the configuration UI change when they are configuring different devices.
Users can't efficiently configure the frequently configured LEDs. As a result, users need to select each LED again and again manually. For example, QWERDF is the ability casting key set in League of Legends. Many G HUB users who are LOL players want to design keyboard lighting effects based on these keys to optimize their gaming experience.
Poor affordance and bad error prevention. There’s no hover state to indicate if the LED spots are clickable. And it doesn't support any redo function or "Recent Color" function.
4. Design Opportunities. As a recap of the analysis phase, we defined 3 design opportunities to improve Freestyle Lighting Configuration UX.
Design
Design concepts. I explored 2 different concepts. The first one is a dual-mode design. The Magic Brush mode is the unit-level configuration mode which combines the previous select model and the previous color brush model. The Group Fill Mode is the group-level configuration mode which provides the quick LED configuration shortcut.
The second concept is an interaction model based on tools. The user can select a tool from the toolbar to decide how they interact with the LEDs on the device to color them.
Evaluation and Implementation
We evaluated these two concepts using our design principles from technical, user, and business perspectives. Although the dual mode proposal is better in terms of the minimal technical efforts, the toolbar proposal is a stronger concept because it is much more intuitive, consistent, and scalable for any legacy, current, and future devices integration. As a result, we started to implement toward the toolbar concept direction progressively.
