Rocco Coffee Machine
E-Commerce Purchase Flow
Figma Training Project: This project is complete: a persona-driven task flow, low-fidelity wireframes, and a full high-fidelity visual design system for the purchase flow, including an animated confirmation screen.
Overview
This project is a self-directed UX/UI training exercise. I used a randomly generated project brief and persona as a creative constraint, then designed a task flow and low-fidelity wireframes for a single-product e-commerce purchase experience — a fictional coffee machine brand called Rocco.
The goal was to practice mapping a full purchase journey (marketing, product detail, checkout, confirmation) for a specific, well-defined user, including a confirmation screen with an on-load animation.
The Brief
Obreanna — the target customer
A woman in her 70s. Married with children, a high school graduate, and the head of a large company. She lives in Mays Landing, NJ, is already familiar with the product, and is status-conscious.
Obreanna isn't a first-time shopper who needs to be educated on what the product is — she already knows it and has likely decided she wants it. That reframes the design problem:
-
The homepage doesn't need to sell hard on "what is this product"; it can lean into brand tone and premium positioning instead of basic feature education.
-
As a status-conscious buyer, visual polish, quality signals, and a frictionless checkout matter more than persuasion copy.
-
Designing for a user in her 70s means keeping legibility, tap targets, and form clarity front and center in the checkout flow — nothing clever that trades clarity for style.
Task Flow
I mapped the purchase journey as four linear steps:
1. Homepage / Marketing Page
2. Product Features
3. Checkout
4. Confirmation
A simple, linear flow was a deliberate choice: since Obreanna is already familiar with the product, the flow should get out of her way rather than introduce extra decision points.
Wireframes
On the confirmation screen, the "Congratulations" message, social share prompt, and directional arrow animate in when the page loads, drawing the customer's attention toward sharing the product after purchase.
Low-fidelity wireframes for the full flow. The confirmation screen uses an on-load animation, built on the backend — the frames shown here reflect its before/after states.
High-Fidelity Visual Design
With the low-fidelity structure validated, I applied a complete high-fidelity design system to the flow. To match Obreanna's status-conscious expectations, the UI leans into a premium, editorial aesthetic rather than a standard e-commerce layout. I selected a warm neutral palette (tan, cream, deep charcoal) anchored by a teal accent for key calls to action, and replaced placeholder blocks with real product photography to elevate visual polish.
High-fidelity screens for the full purchase flow: homepage/marketing hero, product details with feature callouts, checkout, and an animated confirmation screen.