Boosting the user experience to increase sales for Stumptown

A conversion-focused redesign of the Stumptown shopping experience: clearer orientation, stronger product details and a smoother checkout, designed and prototyped for desktop and mobile.

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

Screen recording of the Stumptown designs in Figma: desktop prototype with home page, brew guides, store locator, product page with subscription option and cart, then the mobile prototype and the design file with pages, layers and styles.

Key design decisions

Clarity, designed into every layer.

  1. Lo-Fi Wireframes

    Low-fidelity wireframes simplify the shopping journey, creating a clear path from product discovery to checkout.

  2. Final design

    A clear hierarchy and focused product details simplify shopping and support confident purchase decisions on desktop and mobile.

  3. Prototyping

    Desktop and mobile prototypes refine the shopping journey, making product selection and checkout clear and intuitive.

Approach & process

Evidence first. Expression second.

I explored how people shop at Stumptown and focused the redesign on three opportunity areas: orientation, product confidence, and checkout momentum. Each one shaped the wireframes, the final design, the design system, and the interactive prototypes for desktop and mobile.

Overview of the Stumptown wireframes: home, story, product listing and product detail screens arranged side by side
The same wireframe overview with blue prototype connections linking every screen

Design system

Consistency across the brand

Live website

The live Stumptown website on desktop and mobile: Into the Wildwood hero, Product Finder, Wildwood merch, El Puente Natural banner, featured products and footer

Figma design

The Figma redesign on desktop and mobile: Trapper Creek Decaf hero, shop by category, Coffee is about pleasure section, subscription perks and featured products
Full set of Figma screens for the Stumptown flow: home, story, product listing and product detail pages
The same set of screens connected by blue prototype flow lines
Hero banner component with three slides, Trapper Creek Decaf, a second Trapper Creek Decaf state after a delay, and Guatemala Bella Vista, connected by prototype transitions
Product card PLP prototype: grids of coffee product cards with size and subscription options linked by purple prototype connections
Strange Magic product card and subscription flow: one-time order and subscribe and save options, quantity selector and Add to cart states
Our story page prototype: a tab list for Tasting, Roasting, Sourcing, Producers, History and Varieties linked to long-form content columns

Let’s build something remarkable.

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

GET IN TOUCH

Fields marked with an asterisk are required.