1. Overview

Taste choice, cart, discount code, orders and their status, and recipient details are saved in the browser. They stay in place after a refresh or a return visit.

Connected at rollout: payments and subscription billing, inventory management, an admin screen, sign-up and login (remembered recipient details used instead), and server storage to see the same order on several devices.

2. Challenges

1. Bean names alone don't tell customers if they'll like the taste.

First-time visitors should be asked "what flavor do you like" instead of technical terms, and the answer should pick the beans for them.

2. Customers leave while working out discounts and shipping.

How much the code takes off, and from what amount shipping is free, should be shown as numbers before ordering.

3. Returning customers get asked the same things again.

A chosen taste, beans in the cart and recipient details should still be there on the next visit, so the second order is easy.

3. Structure

Visitors scroll one page, from the bean introduction down to the subscription section. On a first visit the taste question opens first, and the answer sets the filter on the bean list. Bean details, cart, checkout and order history open over the page without leaving it.

4. Key Features

First-visit taste recommendation

On a first visit the site asks "What kind of coffee are you looking for?" and offers four answers: light and bright, balanced, dark and bitter, or not sure. It then shows matching beans and a first-order discount code, which can be copied with a tap.

Remembered taste

The chosen taste is saved, so the question does not appear again on later visits. The bean list opens with that taste's filter, with a "My taste" label and an option to choose again.

Cart and discount code

Customers change the quantity of beans added by size, or remove them. Entering a discount code shows the price with 10% off right away, and the cart and code stay after a refresh.

Checkout and order number

Checkout collects recipient, contact, address and delivery notes, and shows items, discount, shipping and total separately. Shipping is free from ₩30,000 (₩ = Korean won). Saving issues an order number (CB + date + sequence), and recipient details are filled in on the next order.

• Order history and cancellationOrder number, date, beans, amount and delivery address are listed newest first. A cancelled order changes to "Cancelled" and keeps that status after a refresh.
• Bean details — choosing size and grindTapping a coffee opens its details with tasting notes and roast level. Choosing a size (200g, 500g, 1kg) and a grind (whole bean, pour-over, espresso) updates the price and adds that option to the cart.
• Bestseller slider and roast filterBestsellers move with arrows on PC and with a swipe on phones. The list below filters by roast level: all, light, medium or dark.
• Menu drawerA side menu jumps straight to the shop, what makes us different, our story and subscription sections, and to order history.

6. QA

These results come from running the site on PC 1440 and phone 390 screens and tapping through in the order a real person would. We also checked that a saved order can be looked up again after a refresh. (2026-09-23)

The 12 function tests: first-visit question opens · dark roast recommendation · copy discount code · no question after refresh and taste remembered · move the slider (PC arrows, phone swipe) · add 500g from details · keep cart and code after refresh · block orders with missing details · save an order · view order history after refresh · cancel an order and keep the status · light roast filter

Speed and quality scores (out of 100; phone measured on a slow connection, PC on PC settings, three runs each with the same result, first-visit question closed)

Phone: first content 1.2s · largest content 2.5s · layout shift 0.003 · input blocking 0ms PC: first content 0.3s · largest content 0.6s · layout shift 0.003 · input blocking 0ms

7. Result