Case Study 02 · Remember — A Personal Project

Remember

A private, invite-only space where AI turns everyone’s memories of one person into a single, living portrait.

ROLE

UX Designer

PROGRAM

PM Accelerator · 11-Week Cohort

TEAM

1 PM · 3 Designers · 4 Engineers

TIMELINE

April – June 2026

TOOLS

FigmaFigma MakeGemini
01Overview01 / 06

What is Remember?

Someone who’s lost a person they love collects memories from everyone who knew them — AI synthesizes it all into a single portrait.

Context

Built during a PM Accelerator cohort.

My Role

I designed every screen and the logo, and worked closely with engineering on how our AI pipeline’s output needed to be structured for the UI to render it.

Tech Stack

React, Vite, Tailwind, and Framer Motion up front. Node, Express, Prisma, and Supabase Postgres behind it — Supabase also handles auth and storage. Deployed on Vercel.

AI Pipeline

Three models read every contribution in parallel: Claude Sonnet for themes, GPT-4o Vision for photos, Whisper for voice.

Four Outputs

Story, Constellation, Voices, and Archive — one memorial, rendered four different ways for whoever's viewing it.

Landing page

Landing page

Sign In

Sign In

View Profiles

View Profiles

02Research02 / 06

What people actually want from a memorial

“Voice, quirks, relational discoveries, and life chapters — not a photo dump.”

Voice

Hearing them again, in their own words.

Quirks

The habits, sayings, and nicknames only people close to them knew.

Relational discoveries

What one circle knew that another never did.

Life chapters

How their story moved through time.

03Product03 / 06

Three Roles

Organizer

Creates the memorial, invites people, and clicks Generate. Also a contributor themselves — same five steps as everyone else.

Contributor

Opens an invite link, no account needed. Tags a relationship, answers a short questionnaire, uploads photos and voice.

Viewer

Reads the finished memorial, read-only. Designed as fully public — scoped to organizer-only for the MVP demo.

Full Web Flow

CompletedWIPNot started/missing
Full web flow — Organizer, Contributor, and Viewer paths
04The Process04 / 06

From memory to memorial

Contribution, AI processing, and organizer curation aren’t separate features — they’re one continuous pipeline.

01

Contribute

Five short steps, no account needed — text or voice, autosaved as you go.

01Open the link
02Tag the relationship
03Answer the questionnaire
04Upload photos + voice
05Review & confirm
02

AI Pipeline

Three models read every contribution in parallel the moment the organizer clicks Generate.

Claude Sonnet

Reads every questionnaire response

GPT-4o Vision

Reads every photo

Whisper

Transcribes every recording

03

Four Outputs (Lo-Fidelity)

Story, Constellation, Voices, and Archive — one memorial, four ways to experience it.

Story

Story

Constellation

Constellation

Voices

Voices

Collection Archive

Collection Archive

04

Curate & Share (Lo-Fidelity)

The organizer’s side, running the whole time: invite, review, and share.

Create their profile

Create their profile

Invite contributors

Invite contributors

Review contributions

Review contributions

AI trust & safety

Two patterns, not one: inappropriate submissions are screened before an organizer sees them, and anything flagged as a hardship is held back until the organizer explicitly approves it.

05My Role05 / 06

Designing alongside AI

AI in my own workflow

Figma Make and Google Gemini for rapid concepting, refined by hand in Figma.

Working with the model, not the mockup

Close collaboration with the engineers on what Claude, GPT-4o, and Whisper would actually return — so the UI wasn't designed for data that didn't exist.

Shipping on a real clock

Wireframes, a developer pitch, a 14-section PRD, 36 user stories — ending in a live demo day.

Rapid Iteration With Figma Make

[These are the shipped output panels — swap in the Figma Make explorations when you have them.]

Constellation output panel

Constellation

Voices output panel

Voices

Collection Archive output panel

Collection Archive

06UI Foundations06 / 06

Design System

Remember dove mark

Logo — designed independently

A hand-drawn dove cradling a heart — a quiet symbol of peace and remembrance, paired with a serif wordmark to keep the brand personal rather than corporate.

Emotional Moments

Serif Display

Names, dates, AI-extracted quotes, the questionnaire — anywhere the product needed to feel personal.

Everyday UI

Sans UI

Navigation, dashboards, forms — legible and quiet so it never competes with what someone submitted.

Colour Palette — sampled from the product

#F2ECE4

Warm Canvas

#6C7C5B

Olive · Primary

#B7C19A

Sage

#D0BFAA

Warm Tan

#EDCDC2

Dusty Rose

#0A0A0A

Ink

Tan, rose, and sage double as the relationship legend on the Constellation map — family, friend, and colleague.

Recurring Patterns

natural-language searchnode-map data visualizationrelationship-type legenditalic AI-extracted pull-quotesfull-pill buttonsdashed drag-and-drop zonestabbed Archive / Contributions / Outputssingle shared invite link pattern
ClosingCloser

Eleven weeks from a discovery interview to a live demo day — designing the interface for three AI models that had never met each other before this product asked them to.

View Live Site →