SELECTED WORK / 03

XDS Bike

A sharper digital presence for a performance cycling brand. I redesigned XDS’s marketing website across five responsive pages, bringing its manufacturing story, bikes, and rider imagery into one visual system. The work moved through client feedback, a Figma handoff, and production.

Redesigned XDS desktop and mobile website shown together in device mockups — UI/UX DESIGN WEBSITE REDESIGN

ROLE: UI/UX designer
TOOL: Figma
TEAM: Jinjiu Gu
TIME: Oct–Nov 2025 · 3 weeks

01 / VISUAL DIRECTION

Make performance
feel immediate

The site shifted toward a darker, more focused expression: generous space for cycling photography, direct high-contrast typography, and layouts that give each story a clear point of entry.

Explore Our Bicycles page with a large bicycle photograph, headline, short introduction, and button — 01 / ATMOSPHERE A close-up of the bike sets the tone before the visitor explores the range.

XDS home page section with a riders-and-dealers headline above a three-column image and facts layout — 02 / HIERARCHY One headline introduces the story; three aligned facts make its scale easy to scan.

01 / IMAGERY

Lead with the ride.

Cycling photography introduces the brand first. Dark overlays keep the headline readable while the bike remains the focus.

02 / STORY

Make engineering easy to explore.

Each section moves from one clear idea to its supporting detail, giving the manufacturing story room to breathe.

03 / NAVIGATION

Keep the next step visible.

Direct labels connect bikes, brand story, and contact. The same paths carry through to mobile.

02 / RESPONSIVE PAGES

One system,
five stories

The redesign covers Home, Bicycles, Technology, Our Story, and Contact. Choose a page, then scroll inside the desktop and phone frames to explore its full layout.

XDS Home desktop page — DESKTOP SCROLL TO EXPLORE ↓

XDS Home mobile page — MOBILE SCROLL TO EXPLORE ↓

These are the original delivered design screens; the live website has continued to evolve.

03 / COMPONENT LIBRARY

Built to hand off

Reusable navigation, buttons, forms, and footers kept the five pages consistent across screen sizes.

XDS dark component library with buttons, form fields, and contact panels — 01 / INTERACTION COMPONENTS

XDS light component library with navigation and footer layouts — 02 / NAVIGATION & FOOTER SYSTEM

04 / OUTCOME

Designed, handed off,
and shipped

The Figma designs were handed to the development team and shipped to production. The screens on this page document my delivered work; XDS has since changed the live site's design, so it no longer matches this case study exactly.