Making the shopping experience feel effortless for Adidas

A conversion-focused redesign that turns a dense product journey into a clear, confident shopping experience across desktop and mobile.

Desktop Prototype Mobile Prototype
  • UI/UX Design
  • Web Design
  • Design System
  • Wireframing
  • Prototyping

Key design decisions

Clarity, designed into every layer.

  1. Lo-Fi Wireframes

    Low-fidelity wireframes simplify the product journey, establishing a clear shopping flow across desktop and mobile.

  2. Final design

    A clear visual hierarchy and focused product details help shoppers make confident purchase decisions on desktop and mobile.

  3. Prototyping

    Interactive prototypes bring the shopping journey to life, clarifying key interactions across desktop and mobile.

Approach & process

Evidence first. Expression second.

I mapped the Adidas shopping journey and identified three areas to improve: orientation, product confidence, and checkout momentum. They guided the wireframes, the visual design, the design system, and the interactive prototypes for desktop and mobile.

Grayscale wireframes of the Adidas home page, listing page and product page on desktop and mobile
Final Adidas designs on desktop and mobile: home page with featured shoes, category page and product listing

Design system

Consistency rules for a great design

Typography and color foundations: AdineuePRO and AdihausDIN type styles in regular and bold, and the color palette from black to white, purple, turquoise, green, yellow, orange and red
Component specimens: shoe thumbnail selector, headline styles, price options, feature and filter dropdowns, sort, price slider, sports and color filters, and a review card
Logo, icons and buttons: the Adidas logo, arrow, chevron, rating and heart icons, and primary, secondary and checkbox button states
Product card component: a row of shoe images and a Shop All grid of product cards with ratings, name, category, price and Shop Now button

Prototyping

Interactive flows for every screen

Prototype connections over the component sheet: headlines, price options, filters and thumbnails linked by interaction flows
Prototype connections over the navigation: Men and Women mega menus with Shoes and Sport columns and promo tiles linked by interaction flows
Prototype connections over product image galleries: multiple shoe views linked by interaction flows
Prototype connections over the product grid: shoe cards with ratings, prices and Add to Cart buttons linked by interaction flows

Responsive by design

The same shopping flow, on every screen.

Every screen was designed for desktop and mobile together, from the home page and the Men and Women navigation to product galleries and the product grid. The interactive prototypes connect these flows end to end, so each interaction can be tested on both devices.

Figma prototype canvas of the Adidas Men PLP flow: desktop and mobile screens connected by blue interaction arrows on a black background
The Adidas home page design: Runfalcon 3 hero, customer review strip, New Arrivals product row and the Through Sport, We Have the Power, To Change Lives banner

The solution

A system built for conversion rate optimization (CRO)

I removed friction in the product journey, tested key flows, and refined calls to action to create a smoother path to purchase.

Other projects

Let’s build something remarkable.

Open to remote Senior UI/UX Designer and Design Lead positions.

GET IN TOUCH

Fields marked with are required.