121 lines
3.8 KiB
Markdown
121 lines
3.8 KiB
Markdown
# Closer UI Upgrade
|
|
|
|
This document is the focused visual upgrade plan for making Closer feel more beautiful, polished, and emotionally specific without turning it into a decorative wellness app.
|
|
|
|
The direction: keep the app calm and private, but make important relationship moments feel more intentional.
|
|
|
|
## Upgrade Priorities
|
|
|
|
### 1. Complete the Daily Question Visual Arc
|
|
|
|
The Home screen should visually move through the daily question ritual.
|
|
|
|
- `UNANSWERED`: use `illustration_tonight_partner_prompt`
|
|
- One partner answered: keep the answer-card ritual artwork
|
|
- `BOTH_ANSWERED`: use the new reveal-ready artwork
|
|
- `REVEALED`: use a calmer completed-state treatment, not the same urgency as reveal-ready
|
|
|
|
Why this matters:
|
|
|
|
The daily question is the core habit. The visuals should make the state obvious before the user reads the copy.
|
|
|
|
### 2. Add Subtle Motion to High-Emotion States
|
|
|
|
Use small, restrained motion only where it adds emotional clarity.
|
|
|
|
Best targets:
|
|
|
|
- A soft glow or pulse on the reveal-ready Home card
|
|
- Gentle fade/scale when a daily state changes
|
|
- A quiet success transition after both answers are revealed
|
|
|
|
Avoid:
|
|
|
|
- Constant decorative animation
|
|
- Bouncy motion
|
|
- Motion on dense settings, security, or history screens
|
|
|
|
Why this matters:
|
|
|
|
The app should feel alive, but still intimate and trustworthy.
|
|
|
|
### 3. Polish the Home Screen Hierarchy
|
|
|
|
The Home screen should make the next shared action unmistakable.
|
|
|
|
Improve:
|
|
|
|
- Give the primary card stronger visual priority than secondary cards
|
|
- Reduce competing surfaces around the daily question
|
|
- Make the primary CTA feel more tactile
|
|
- Keep secondary actions quieter and easier to scan
|
|
|
|
Why this matters:
|
|
|
|
Home should answer one question immediately: what should we do together next?
|
|
|
|
### 4. Make Light Theme Feel Equally Designed
|
|
|
|
Dark mode currently carries more of the mood. Light mode should feel intentional too.
|
|
|
|
Improve:
|
|
|
|
- Softer warm backgrounds
|
|
- Better contrast between cards and page surfaces
|
|
- Less clinical white space
|
|
- Light-mode versions of major illustrations where needed
|
|
|
|
Why this matters:
|
|
|
|
The product should feel premium in both themes, not like dark mode is the real design and light mode is the fallback.
|
|
|
|
### 5. Create a More Satisfying Revealed State
|
|
|
|
After both partners reveal answers, the app should not just feel "done." It should invite the next tiny moment of connection.
|
|
|
|
Improve:
|
|
|
|
- Add a softer post-reveal visual state
|
|
- Surface the follow-up prompt more beautifully
|
|
- Make saved reflections feel like a shared memory, not a log entry
|
|
|
|
Why this matters:
|
|
|
|
The reveal is not the end of the interaction. It is the beginning of the conversation.
|
|
|
|
### 6. Keep the Illustration System Strict
|
|
|
|
Illustrations should stay purposeful and surface-specific.
|
|
|
|
Rules:
|
|
|
|
- Do not reuse the same couple image everywhere
|
|
- Do not add characters to every screen
|
|
- Do not add large illustrations to privacy, security, account, or settings screens
|
|
- Use artwork for emotional transitions, empty states, and onboarding moments
|
|
- Keep dense task screens focused on content
|
|
|
|
Why this matters:
|
|
|
|
The app becomes more beautiful by being more intentional, not by adding more decoration.
|
|
|
|
## First Implementation Batch
|
|
|
|
Start with the smallest set of upgrades that visibly improves the app.
|
|
|
|
1. Wire the daily question artwork states on Home.
|
|
2. Add the reveal-ready illustration for `BOTH_ANSWERED`.
|
|
3. Add a restrained visual emphasis to the reveal-ready CTA.
|
|
4. Review Home in dark and light mode.
|
|
5. Capture updated README screenshots after the states are stable.
|
|
|
|
## Quality Bar
|
|
|
|
An upgrade is successful if:
|
|
|
|
- The screen feels calmer and more premium.
|
|
- The next action is clearer.
|
|
- The emotional state is obvious before reading every word.
|
|
- The app still feels private and serious.
|
|
- No screen becomes busier just because new artwork exists.
|