G HUB NPI
Integrate new gaming devices and their configuration features into Logitech G HUB
Duration
3 Months, 2020
My Role
Product Design
Team
PMs, Design Leads, Devs.
Status
Shipped
Context
Millions of users are using G HUB — a configuration software for 50+ Logitech gaming devices. A recent gaming product line needed to integrate into G HUB so that users can customize device settings.
Solution
I delivered the new onboarding UI with interactive quick feature trials, new gradient lighting configuration UI, and new audio mixing feature UI for this gaming product line, including a headset, a mouse, and a keyboard.
My Final Design Deliverable
New onboarding UI with interactive quick feature trials. Users can quickly try setting features to learn what G HUB can do when they first-time connect the device to G HUB.
Headset
Keyboard
Mouse
Gradient Lighting Configuration UI. The new consistent gradient lighting interaction model enables the user to intuitively create new signature gradient lighting effects.
Headset
Keyboard
Mouse
Audio Mixing Feature UI. Enable the user to adjust the mixing balance when the device are connected to two or two more devices. Users can find it both on the device setting page and on the system tray for quick access.
Audio Mixing on Device Setting
Audio Mixing on System Tray
Process Highlight: Gradient Lighting Configuration
Design Concepts. This gaming product line features its gradient lighting effects, especially the unique gradient ring design on the keyboard. I was tasked to design design an interaction model for ring lighting configuration that is intuitive for users, consistent across the headset and the mouse, and scalable for future devices with more complex lighting design. Given this design task, I explore 4 gradient lighting configuration UI concepts.
Proposal A
Callout style, Callout dots are on the real LED location.
Proposal B
No Callout. Use a dual-view toggle on the keyboard page to make UI more organized.
Proposal C
Gradient Lighting strips.
Proposal D
On real LED locations.
Evaluation & Conclusion. Through a comprehensive concept evaluation based on intuitiveness, consistency, and scalability, we decided to move forward with the concept A - the callout style for gradient lighting configuration spots.
A - Callout
PROS
1) Intuitive: Users can intuitively learn where is each LED.
2) Consistent: Fit across devices.
3) Scalable: Fit for future more complex lighting patterns.
CON
Callout dash lines will overlay on the lighting area, which might influence the preview effect.
1) Intuitive: Users can intuitively learn where is each LED.
2) Consistent: Fit across devices.
3) Scalable: Fit for future more complex lighting patterns.
CON
Callout dash lines will overlay on the lighting area, which might influence the preview effect.
B - No Callout
PRO
1) Scalable: Multiple views will work for future potentially more complex lighting cases.
CONS
1) Not Intuitive: Users need to switch between two modes frequently if they configure ring light colors based on key colors.
2) Not Intuitive: Users don't know the precise real LED locations.
1) Scalable: Multiple views will work for future potentially more complex lighting cases.
CONS
1) Not Intuitive: Users need to switch between two modes frequently if they configure ring light colors based on key colors.
2) Not Intuitive: Users don't know the precise real LED locations.
C - Gradient
PRO
1) Intuitive: Users can intuitively see the holistic gradient lighting effects.
CONS
1) Not Scalable: If there are more than 20 LEDs in the future as the lighting points will be too crowded.
2) Not Intuitive: In the keyboard page, users won't know which side of ring lighting they are customizing.
1) Intuitive: Users can intuitively see the holistic gradient lighting effects.
CONS
1) Not Scalable: If there are more than 20 LEDs in the future as the lighting points will be too crowded.
2) Not Intuitive: In the keyboard page, users won't know which side of ring lighting they are customizing.
D - Real Location
PRO
1) Intuitive: Users can intuitively learn where is each LED.
CON
1) Not Scalable: It is not fit for more complex situation like curved or irregular lighting shapes.
1) Intuitive: Users can intuitively learn where is each LED.
CON
1) Not Scalable: It is not fit for more complex situation like curved or irregular lighting shapes.
Process Highlight: Audio Mixing UI
Use Cases. Audio Mixing function is a cool function that enables gamers to connect and hear two audio sources at the same time. We want users to not only control audio mixing on the device physically but also control it on G HUB software. The task is to design an AM UI component on G HUB to enable the user to switch audio sources and adjust the mixing level. I mapped out 3 use cases about the different audio source connectivity status.
Find a place for it. I identified where is the ideal location for the audio mixing UI component from the G HUB information architecture. Due to the limitation of the profile-based G HUB IA, we couldn't put this feature directly on the homepage for quick access. Finally, this audio mixing UI is put on the device global setting page.
Interaction Design. Based on the use cases I made, I designed the detailed different states of this new component. Basically this is a component combining the slider and the mode switch. I also designed the tooltips to help users understand the current connection states and how it works.
Design for Quick Feature Access. We leveraged the system tray to provide quick access to this feature. If the user’s headset has connected to more than two audio sources, they can quickly adjust the audio mixing balance on the system tray without entering the G HUB main view.
