AUDE

Turning a personal watchmaking hobby into a custom-built e-commerce business.

AUDE started as a way to turn my passion for assembling mechanical watches into a real side business. I designed and built the full experience, from storefront and customer area to the admin CMS up to the final product.

The goal was to keep full control of the product, avoid dependency on external platforms, and learn backend-heavy workflows with AI-assisted implementation support.

View Live

Impact

1

Owned DTC channel launched

6

Launch-ready watch models

1

End-to-end commerce workflow

3

Creative collaborations validated

Snapshot

Client

AUDE

Work Type

Independent Project

Industry

Fashion e-commerce

Role

Founder / Product Designer / Front-End Developer / Photographer

Scope

UX/UI Design / Customer + Admin flows / Product architecture

Core Stack

Nuxt 3 / Vue.js / Tailwind CSS / Firebase / Firestore / Stripe / Resend

Tools

Figma / GSAP / FloatingUI / Chart.js

AI Support

Back-End / Debugging + QA iteration

Duration

2025 (4 months)

The Outcome

AUDE balances premium product storytelling with the tooling needed to manage catalog updates, order states, returns, and customer communication.

One custom platform across storefront, checkout, account, and admin operations.

What shipped

  • Customer journey: browse → product → cart → Stripe checkout
  • Customer account: order history, order status, refund visibility
  • Admin CMS: product management, inventory control, operational workflows
  • Integrated notifications and email communication (post‑purchase)
AUDE responsive homepage with hero headline and collections CTA on desktop and mobile
AUDE responsive product page with image gallery, specifications, price, and add-to-cart controls
AUDE responsive cart page with order summary, promo code field, and guest checkout options
Stripe hosted checkout used for AUDE watch purchases, with shipping details and payment methods

Admin Dashboard

A single operational overview for sales, order statuses, refunds, top products, top collections, and the returns pipeline.

AUDE admin dashboard with sales KPIs, order-status charts, product performance, collection performance, and returns analytics

Product Management

These screens cover the full catalog workflow: adding a new watch, reviewing the full product table, and editing visibility, copy, price, stock, and collection metadata.

AUDE admin add-product form with publishing state, image uploads, structured fields, and live product preview
AUDE admin product catalog table with stock status, visibility controls, search, filters, and item actions
AUDE admin edit-product modal with fields for collection, stock, status, pricing, and product copy

Orders & Returns

Operational after-sales tasks are handled from the same back office, with order cards for fulfilment progress and tracking, plus a dedicated queue for approving, rejecting, and refunding return requests.

AUDE admin orders screen with fulfilment progress, tracking details, print-address action, and order status cards
AUDE admin return requests queue with approve, reject, and refund actions for customer cases

Problem

The challenge wasn’t only the storefront - it was delivering the operational backbone behind real orders: payments, order states, refunds, inventory, and fulfillment. The goal was to reduce operational risk and increase customer trust across checkout and post‑purchase.

Ship a full commerce platform from scratch (storefront + admin ops) without prior backend experience.

Constraints

  1. 01Backend-heavy requirements (order states, data integrity, automation)
  2. 02High risk of stock, fulfillment, and refund errors without a structured lifecycle
  3. 03Need for clarity and trust across checkout and post‑purchase

Research & Insights

Competitor reviews and early wireframes showed that many micro-brand stores looked interesting but weak on clarity. The direction shifted toward honest imagery, plain specifications, and a calmer path to purchase.

The strongest insight was simple: for micro-brand buyers, trust matters as much as taste.

Design Decisions

The research pointed to two priorities: make the buying journey feel more credible, and make the order lifecycle harder to break. That led to system-level decisions before visual polish.

A few trust-first decisions shaped the product from storefront to operations.

Decision Trail

  1. 01Design trust through real imagery, plain specs, and clearer product detail
  2. 02Map payment and post-purchase states before styling the storefront
  3. 03Treat storefront and admin as one connected product system
  4. 04Use reusable states and components to reduce operational errors

Workflow Before Screens

The order lifecycle was mapped before UI work, covering checkout, payment outcomes, account creation, fulfilment, and post-purchase states.

AUDE end-to-end purchase flow diagram from store browsing to checkout, payment outcomes, account creation, and post-purchase states

Trust-First Product Page

The product page evolved around the information buyers needed most: strong imagery, visible specs, pricing clarity, and a simpler route to purchase.

AUDE Figma board showing early wireframes for storefront, cart, contact, and admin flows
AUDE low-fidelity desktop wireframe for the product detail page
AUDE high-fidelity desktop wireframe for the product detail page
AUDE high-fidelity desktop mockup for the product page with gallery, specifications, and add-to-cart

Admin Features

The screens below support the real business tasks behind the storefront: publishing new watches, managing catalog visibility, tracking fulfilment, and handling returns without leaving the system.

Operational tooling was designed as part of the product, not as an afterthought.

AUDE admin add-product form with publishing controls, media uploads, and live preview

Draft / Public State

Controls whether a product stays internal or is ready to appear on the storefront.

Live Product Preview

Lets the team validate the full product page before publishing or updating the item.

Auto-generated Alt Text

Speeds up media publishing while keeping product imagery accessible and structured.

AUDE admin product catalog table used to manage stock, visibility, and homepage placement

Homepage Visibility Toggle

Makes it easy to control which products are surfaced on the homepage without editing templates.

AUDE admin order-management screen with internal notes, status tracking, and shipping actions

Internal Fulfilment Notes

Internal notes keep fulfilment updates and customer communication visible in one place.

Order Status

Structured statuses make payment, fulfilment, and refund progress easy to track.

Quick Address Print

Reduces fulfilment friction by making shipping details printable directly from the order view.