This design was created for Power Digital Marketing. All rights reserved.

Rebuilding the ReserveOne website on a design system, ready to publish on Framer

A conversion-focused website redesign that turns a complex product journey into a clear, intuitive shopping experience across desktop and mobile. Built on design-system best practices for a seamless handoff to Framer development.

View website
  • UI/UX Design
  • Web Design
  • Design System
  • Wireframing
  • Prototyping

Key design decisions

Clarity, designed into every layer.

  1. Lo-Fi Wireframes

    A simplified hierarchy makes size selection, delivery, and checkout feel sequential rather than simultaneous.

  2. Final design

    A consistent design system clarifies the shopping experience across desktop and mobile and is ready for development in Framer.

  3. Prototyping

    Reusable commerce patterns align desktop and mobile while preserving space for campaign expression.

Approach & process

Evidence first. Expression second.

We started with ideation and brainstorming to understand what the client wanted and what their brand needed. Wireframing came first in the design phase, so we could agree on structure and priorities before any visual decisions. Once the client’s needs were clear, we built the website from scratch on a design system, ready for Framer.

Grayscale wireframes of the ReserveOne pages on desktop and mobile
Overview of the final ReserveOne designs on desktop and mobile in Figma

Design system

Consistency across the brand

Typography and color foundations: GT America and IBM Plex Sans type styles, brand and application color palettes
Grid, spacing, buttons and icons foundations
Figma variables collection with breakpoints and light and dark mode color tokens
Side-by-side comparison of the live ReserveOne website and its Figma design

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.