LogitechG.com

e-commerce web experience
Client
Logitech G
Role
Visual Design Lead, UX Design
Project type
B2C, E-commerce and marketing multi locale web experience
Release date
2018
Awards
2019 Gold IHAF Award for the Logitech G website in Digital Marketing / Websites B2C,
2019 Webby Awards Nominee for Best Visual Design - Function (mobile site)

I led the redesign of the Logitech G website, creating a digital experience that truly represents the brand's position as a premium leader in gaming peripherals. The project involved developing a bold new visual language, restructuring the site architecture around user needs and implementing an immersive product showcase that highlights performance features that matter most to gamers.

Project Overview

The Challenge:

Logitech G had established itself as a major player in gaming peripherals but faced increasing competition in a crowded market. The existing website presented several challenges:
  • The visual presentation didn't reflect the premium quality and technological innovation of the products
  • Navigation was complicated with too many entry points and inconsistent paths
  • Product stories focused too heavily on specs without connecting to gaming experiences
  • Content was fragmented between product pages pro player endorsements and technology explanations
  • The mobile experience was compromised with features that didn't translate well from desktop

The Goal:

Our goal was to create a digital destination that resonates with the gaming community while elevating the perception of Logitech G products from mere accessories to essential performance gear. We aimed to design an experience that balanced the technical specifications gamers demand with emotional storytelling that connects to their passion, all while streamlining the path to purchase and showcasing the innovative technology behind each product.

Research & Insights

User Research
We conducted extensive interviews with casual and professional gamers to understand how they research evaluate and purchase gaming gear. We discovered they relied heavily on both technical specifications and peer recommendations with many users cross referencing multiple sources before making decisions.
Competitive Analysis
Examining competitor sites revealed a landscape dominated by dark interfaces aggressive imagery and technical language. We identified an opportunity to differentiate Logitech G through cleaner design more approachable technology explanations and a stronger connection between product features and in game benefits.
Analytics Review
Data from the existing site showed users spent significant time comparing products but often struggled to differentiate between models in the same category. We also found that users who engaged with technology story content had higher conversion rates suggesting an opportunity to better integrate these narratives into the product journey.
Technology Storytelling
Working closely with the product teams we developed a deeper understanding of Logitech G's proprietary technologies. This allowed us to craft more compelling narratives around features like Lightspeed Wireless, HERO sensors and Powerplay charging that explained not just what the technologies do but how they improve gaming performance.

Design process

Visual Language Evolution
I developed a visual system that maintained the brand's gaming credibility while elevating its premium positioning:
  • Bold typography and a refined color palette that extends beyond the typical "gamer aesthetic"
  • Dynamic product photography that showcases both form and function
  • A modular layout system allowing for dramatic hero content while maintaining usability
  • Subtle motion design (game interface inspired) for ui elements
  • Consistent visual hierarchy that guides users through complex product information
Site Architecture Revamp
We completely restructured the site organization to align with how gamers actually shop and research:
  • Technology hubs that explain innovations across product categories
  • Streamlined product categorization focused on user needs rather than technical specifications
  • Clear paths between related products accessories and complementary items
Product Storytelling
Each product received enhanced storytelling that connected features to benefits:
  • Interactive demonstrations of key technologies showing their impact on gameplay
  • Side by side comparisons that clarify differences between product tiers
  • Pro gamer perspectives integrated directly into product pages
  • "In the game" scenarios illustrating how features translate to competitive advantages
Experience Highlights
We created interactive product experiences that highlighted essential features and wove in technology stories throughout the site. We strengthened connections to the gaming community by showcasing user-driven content and integrating social proof. The purchase journey was optimized with clear calls to action and streamlined flows that reduced friction and supported faster decision making.
  • We showcased internal components and technology visualizations
  • We employed visual demonstrations making complex innovations understandable
  • Progressive disclosure allowing users to dive deeper into technical details as desired
  • Featured user generated content showing products in real gaming setups
  • Seamlessly integrated esports team partnerships and pro player endorsements on product level
  • Created a platform for sharing custom profiles and configurations
  • Simplified specification comparison focusing on meaningful differences
  • Introduced intuitive cross sell recommendations based on compatibility and user preferences

Impact and Results

Performance Metrics
  • 32% increase in overall conversion rate
  • 28% reduction in bounce rate on product category pages
  • 41% increase in pages per session
  • 36% growth in average time spent with technology story content
  • 25% improvement in mobile conversion specifically
Business Value
  • Strengthened premium positioning supporting higher price points for flagship products
  • Increased attachment rate of accessories with core products
  • Improved cross category purchases as users explored the broader ecosystem
  • More effective landing platform for campaign traffic from esports partnerships
  • Greater content efficiency with modular system for seasonal promotions and new product launches
Industry recognition
  • 2019 Gold IHAF Award for the Logitech G website in Digital Marketing / Websites B2C
  • 2019 Webby Awards Nominee for Best Visual Design - Function (mobile site)
This content has been optimized for larger screens, please view this page on desktop for best experience.

Product Detail Page

Desktop
Mobile

Homepage

Desktop
Mobile

Product Listing Page

Desktop
Mobile