Skip to content

ui.md

Latest commit

 

History

History
101 lines (71 loc) · 7.92 KB

ui.md

File metadata and controls

101 lines (71 loc) · 7.92 KB
Raw

GlowUp — UX Design Doc

Designer: Antigravity & User Status: Draft v0.1 Last updated: 2026-05-30

1. The design bet

We are betting that a single-screen, highly focused interactive layout carrying the entire "before/after" visual weight is what makes or breaks this app. By completely omitting settings, account creation, and multi-step onboarding, we keep the user's attention centered on their face and the instant styling transformation. If the before/after slider is not highly engaging and tactile, the app feels like a static filter; if it is, the app feels premium and magical.

2. The defining interaction

The Mirror Wipe Comparison: User uploads a selfie and selects "The Chic Pixie," then clicks "Try It On." After the loading state completes, the transformed image renders with a vertical dividing slider set precisely at the 50% width mark. The slider is represented by a thin, glowing neon-cyan vertical rule and a circular frosted-glass handle with double arrows (← →).

When the user taps and drags the handle left or right, the original photo is revealed on one side, and the transformed photo on the other. The image behind the slider does not scale or move; only the crop boundary shifts. The slide is buttery-smooth (aiming for 60fps), giving the sensory illusion of wiping a foggy mirror to reveal a brand new reflection.

3. Screen inventory

GlowUp is a single-screen application to keep the experience completely focused and tight.

  • Main Workspace Screen — The single, responsive view containing the upload zone, preset selection, styling canvas (comparison view), and the sassy stylist verdict card.

4. Screen-by-screen specs

Main Workspace Screen

Purpose: The central workspace where the user completes the entire loop of uploading, selecting, transforming, comparing, and reading stylist comments.

Layout (top to bottom):

  1. Header Zone: Small, modern typography reading GlowUp in a glowing gradient, with a minimal subtitle: Your AI Stylist awaits.
  2. Main Canvas Area (The Hero):
    • State A (Empty): A dashed-border, frosted-glass drag-and-drop file upload container with a central icon of a camera and an "+ Upload Selfie" button.
    • State B (Transformed): The side-by-side comparison viewport with the interactive slider handle, filling the hero space.
  3. Control Dock:
    • Hairstyle Preset Carousel: Four horizontal circular preview items representing each style:
      1. The Classic Bangs (icon of straight bangs)
      2. The Chic Pixie (icon of sleek short crop)
      3. The Y2K Dream Spikes (icon of playful spiky buns)
      4. The Glam Waves (icon of long beach waves)
    • Action Button: A prominent, high-contrast action button labeled "Try It On" (disabled until a photo is uploaded and a preset is chosen).
  4. The Stylist Drawer: A bottom-docked card that slides up once the output is ready, presenting Sassoon's vibe rating and review.

Key interactions:

  • Upload Photo → Canvas switches instantly from Empty to showing the user's uploaded selfie.
  • Select Preset → Selects the style, highlights the circle with a glowing neon border, and enables the "Try It On" button.
  • Tap "Try It On" → Button goes into a loading state, the canvas shows "Sassoon" pacing and giving tips, and the model request is fired.
  • Drag Handle → Shifts the clipping mask boundary of the transformed image in real time.

States:

  • Default / First-Time: Blank canvas with the dashed upload zone. The preset carousel is visible but the "Try It On" button is disabled.
  • Empty / Uploaded: The original selfie is displayed in the canvas. The presets can be tapped. "Try It On" is enabled once a preset is tapped.
  • Loading: The canvas dims. A playful cartoon animation of "Sassoon" appears. The microcopy cycles through sassy status updates: "Sweeping the studio floor...", "Consulting the hair deities...", "Snipping away the split ends..."
  • Error: If the generation fails (e.g., face not detected, network failure), a warning banner slides in: "Sassoon is unimpressed! We couldn't find a clear face. Try another selfie with good lighting." The UI reverts back to the uploaded selfie state.
  • Edge / "Too Many Generations": If a user tries styles repeatedly, we do not restrict them, but Sassoon's microcopy gets increasingly dramatic: "Still not satisfied? Hair drama is real."

5. The user journey

First Session: The user opens GlowUp. The page loads instantly with a beautiful dark glassmorphism interface. They are met with a friendly drag-and-drop zone. They upload a well-lit photo of themselves. The upload completes in under 500ms, and their photo fills the canvas.

They tap "The Classic Bangs." The "Try It On" button turns vibrant pink and starts to pulse gently. They tap it. The screen dims, and "Sassoon" appears, offering sassy commentary. Seven seconds later, Sassoon gasps: "Oh, it's a look."

The screen brightens, and a vertical slider handle appears in the center of their face. They drag it right and left—seeing themselves seamlessly morph between their normal hair and realistic, perfect bangs. At the bottom, a stylish card slides up: Vibe Rating: 9.5/10 — Bangs or Bust. The comment reads: "Darling, these bangs were made for your cheekbones. Don't walk to the salon—run." Delighted, they take a screenshot to send to their friends and tap "The Chic Pixie" to see what they'd look like with short hair next.

6. Component & visual notes

  • Typography:
    • Headings: Outfit (Google Fonts), geometric and modern.
    • Body: Inter, highly readable, clean sans-serif.
  • Color: A sleek, premium dark-mode theme:
    • Background: Deep void blue/grey (#0B0F19) with abstract, soft radial glowing gradient blobs in the background (purple and cyan).
    • Cards: High-blur glassmorphism (backdrop-filter: blur(20px)) with white borders at low opacity (10%).
    • Accent colors: Vibrant neon pink (#FF2E93) and neon cyan (#00F0FF).
  • Motion: Soft, springy micro-animations. Tapping a preset scales it down by 5% and spring-bounces back. The Stylist Drawer slides in from the bottom with a custom cubic-bezier ease-out.
  • Signature Visual: The custom vertical slider handle with a frosted-glass glassmorphism disc border and glowing arrows, casting a subtle neon shadow on the photo.
  • Microcopy Voice: Exuberant, high-fashion, and sassy. "Sassoon is cutting your hair..." rather than "Processing image..."

7. Accessibility & inclusion

  • Screen Readers: All interactive controls (upload input, preset list items, try-on button, slider handle) will have clear aria-label attributes. The slider will be keyboard-accessible using Arrow keys to adjust clip-width by 5% increments.
  • Tap Targets: Presets and the slider handle will maintain a minimum touch target area of 48px × 48px to accommodate all users.
  • Low Connectivity: If the image-to-image API times out due to bad network, we fail gracefully without crashing the UI, allowing the user to retry.

8. What we are NOT designing

  • No Settings screen: Every parameter is automatic.
  • No gallery / history page: Photos are kept local in memory, not archived.
  • No customization panels: Users cannot fine-tune hair color, length, or prompt text in v1.
  • No login / signup modals: Keep the friction to zero.

9. Open design questions

  • How do we ensure the hair presets match different hair textures (curly, straight, wavy) nicely?
  • Should the slider handle disappear when the user stops interacting with it, or remain permanently as a guide?

10. Handoff to engineering

The slider clip-path execution must run at 60fps on mobile Safari and Chrome. The clip boundary is controlled via a simple CSS clip-path: inset(0 0 0 X%) on the absolute-positioned transformed image. We must ensure no layout shifts or scaling differences exist between the "Before" and "After" images so they align perfectly down to the pixel.