Role: Product Designer — UI & Researcher (freelance)

Timeline: May 2022 — 2 weeks

Jerry's Artarama is an art supply retailer celebrating 54 years in business, but their online checkout was costing them customers: 75% of online shoppers abandoned an order in the past quarter, and feedback called the process "too long and complicated."

Competitive Analysis Personas Wireframing Usability Testing
Jerry's Artarama — homepage preview

Research & Competitive Analysis

The number that framed the whole project: 3 out of every 4 online shoppers left without finishing their order.

75% of online shoppers abandoned an order, 25% completed it

I compared Jerry's Artarama against three competitors — BLICK, Utrecht and Cheap Joe's — and read through real user reviews to find the recurring usability pain points behind that number.

Competitor logos: BLICK, Utrecht, Cheap Joe's
Real user reviews complaining about a slow, confusing checkout process

A close look at BLICK's own checkout and homepage showed what a more guided, step-by-step flow could look like.

BLICK checkout screen with a clear numbered step and order summary
BLICK homepage

Other retailers also handled bulk quantity selection better than Jerry's did at the time — a pattern that fed directly into the quantity-control fix below.

Reference example of a purchase-items table with per-item quantity controls

Personas

Two personas came out of the research, representing the two main types of shoppers the redesign needed to serve: someone buying for themselves on a budget, and someone buying supplies for a group.

Persona: Montse, 28, Designer — wants good quality supplies and to save money
Persona: John, 63, Painter and Art Instructor — wants a trustworthy wholesale source

Design Process

I mapped the primary purchase flow first — search, add quantity, cart, authenticate, checkout, place order — to see exactly where the friction was piling up.

Flow diagram: Home, Search a Product, Add Quantity, Add to Cart, Authenticate, Checkout, Place your Order

Low-fidelity wireframes came next, focused on the homepage layout and a clearer purchase-items table with inline quantity controls.

Low-fidelity wireframes: homepage skeleton and purchase items table with quantity controls

Then the high-fidelity product page — built around a simpler, more guided purchase path.

High-fidelity product page with add to cart, wishlist and compare actions

Key Findings & Solutions

The research pointed to three concrete fixes:

Simplified Navigation Quantity Controls Checkout: 5 Steps → 2

Navigation was simplified to cut through a cluttered interface, inventory control buttons made quantity selection direct instead of buried in a form, and checkout itself was streamlined from five steps down to two.

Refined purchase items table with inline plus/minus quantity controls

Validation

The high-fidelity prototype was tested with 8 users over Zoom. Testing confirmed users could complete purchase tasks efficiently with the redesigned flow.

Zoom call with usability testing participants
← Back to UX/UI Design