Postcards is a weekly photo-sharing app for close friends! Each Monday the group gets one prompt, everyone sends one photo with a caption of 10 words or fewer, and on Sunday the postcards arrive together. Before building anything, I ran the ritual by hand with 6 friend groups for 3 weeks. Then I designed the system in Figma and built a working app in React Native with Claude Code.
try out on expo go →
MY ROLE
Product Designer
Mobile Developer
TEAM MEMBERS
Independent project
TOOLS USED
Figma
Claude Code
React Native
Expo Router
TypeScript
TIMELINE
13 weeks
CONTEXT
Most of what friends share with each other lives scattered across camera rolls, group chats, and social media — captured in the moment but rarely revisited together. I wanted to understand what a more intentional, recurring ritual of sharing could look like for close friend groups.
PROBLEM STATEMENT
People document their lives but don't revisit them together
Across interviews, a consistent tension came up: people take photos to remember moments, but rarely go back and share them meaningfully with the friends who'd care most. Two participants in particular — one talking about physical polaroids, another about photo strips — described physical, shared artifacts as the closest thing they had to real memory-making, which became the creative brief for the whole project.
DESIGN SOLUTION
Capture a moment and share it together
Every Monday, the group gets one shared prompt. Each person sends one photo with a caption of 10 words or fewer. On Sunday, everyone's postcards arrive together to open, flip, and decorate, then they're saved into monthly albums the group can revisit.
SEND A POSTCARD
Pick a photo based on the prompt, write a 10-word max caption, and mail it to your group!
OPEN THE WEEKLY DElivery
On Sunday, everyone's postcards arrive as one delivery.
Flip a card to read the back, and react with a doodle.
revisit the memory
Every delivery is saved by month and week, so the group builds a shared record instead of a camera roll nobody scrolls back through.
NEEDFINDING + USER INTERVIEW
Grounding the concept in behavioral research
Grounded the concept in ritual and nostalgia research before sketching anything. Rituals bond people through repetition, not content. Nostalgia is a social emotion. That shaped the weekly prompt structure and the group-based archive.
[image: literature review notes / citations]
Then I mapped 7 apps by group size (closed to open) and structure (freeform to prompted). Most close-friend apps are freeform. The closest, Retro, shares the weekly rhythm but has no shared prompt or group reveal.
Below are my key takeaways:
Daily is too much. BeReal's daily users dropped by ~half within a year. A weekly rhythm is easier to keep up!
No one keeps the moments. Every app lets photos disappear or keeps recaps individual and none creates a shared record of the group's week.
Prompts exist, but only as extras. Poparazzi's challenges came closest, but it was a side feature.
READ THE full competitive analysis →
competitive matrix
competitive matrix
Interviewed 11 people about how they share and revisit memories with friends. Nine major themes appeared, and I condensed them into 3 main themes (3 insights + needs each). I also put my interview artifacts into AI and compared its themes with mine. I kept my own, because the AI flattened what people actually said.
CHECK OUT MY INTERVIEW QUeSTIONS + FORMAT DETAILS →
[image: INTERVIEW notes / citations]
For example, AI grouped "authenticity feels risky" with "people don't want to share," but participants described it as risk, not lack of interest.
FRAMING THE PROBLEM
Four tensions and one persona
The interview themes told me what people needed. To understand why their current habits break down, I ran a second pass using grounded theory, coding the same interviews line by line.
That gave me four tensions: authenticity feels risky, not undesired; people document without revisiting; rituals collapse from burden, not boredom; and people crave the ordinary, not the curated.
grounded theory boards
Built one persona, Jasmine, anchored in her own words: "I don't want the little moments I could share with my friends to disappear into my camera roll." Her week maps a familiar collapse: excitement fading into guilt by the time she'd consider sharing.
image: persona + journey map
Crafting HMW questions
I then brainstormed 10+ “How Might We” questions per user to explore potential solutions, narrowing it down to three with red pins.
THREE guiding Design questions
LONGITUDINAL DIARY STUDY
Study set-up
Before building anything, I tested the core behavior by running the ritual by hand for 3 weeks with 6 friend groups.
I chose the groups to vary in closeness and proximity:
a group that texts daily
a looser circle
a mix of on campus and off campus friends
roommates
acquaintances
a large tight-knit group
I wanted to see whether the ritual held up for people who aren’t already close, not only for friends who talk every day.
Testing design solution
Ran the ritual by hand for 3 weeks with 6 real friend groups. Released a prompt every Monday, compiled submissions into a postcard spread every Sunday.
weekly prompt + compiled postcard spread
Less sharing, more connection
After 3 weeks with 6 friend groups of different closeness, 27 participants completed the final survey. Most felt more connected and found it easier to keep up than their usual apps.
Final survey, n = 27
Insight -> decision
Each pattern from the study became a design decision in the app.
From findings to features
These decisions shaped three core flows: capture, reveal, and revisit. I then scoped the smallest feature set that could support the full weekly ritual.
MVP: weekly prompt, postcard creation, Sunday reveal, memory albums
V2: doodle reactions, notifications
V3: "one year ago," collaborative albums, printed postcards
Organized around the week, not continuous engagement.
It helped me find the smallest feature set to test the core idea.
Four connected systems: weekly rituaL
and Sunday reveal (the core loop), memory albums
and shared reflection (long-term value).
Redirects users from saving moments to
a camera roll toward sharing one each week.
WIREFRAMING + USER TESTING (Low-fi)
Iterating prototypes
Sketched the information architecture and three main task flows.
I sketched the information architecture and three core flows:
capturing and sending a postcard
opening the Sunday delivery together
revisiting past weeks in the archive
low fidelity wireframing sketches
Tested with 5 participants in person, tracking time, misclicks, and ease of navigation across three tasks (all participants have wished to feel more connected to their friends):
Simple: Send a postcard. Pick a photo, write a caption of 10 words or fewer, and mail it to your group.
Moderate: Open the Sunday delivery. Open this week's postcards, flip one to read the back, and react with a doodle.
Complex: Revisit a past week. Find last month's album in the archive and open a specific week's postcards.
paper prototype and lightweight usability testing
I rebuilt the three flows as a med-fi prototype in Figma
MAIN CHANGES + MED-FI
Round 1 feedbacks
The concept held up. One participant called it "an exchange diary and Setlog, with an archive." Confusing terminology and icons created pain points in the moderate and complex tasks. The complex task was fastest though, because the archive needed only a few taps once found. Therefore the delay came from locating it, not using it.
check out MY FEEDBACK NOTES →
Based on user testing, I made these design changes below:
No send confirmation -> "mailed" state with
background illustration change
Archive hard to find -> moved to main nav
Doodle icon ambiguous -> ADDED A LABEL
refining home screen visual hierarchy
Defining visual direction
Participants kept mentioning polaroids and photo strips, physical things you hold and keep. I wanted Postcards to feel the same way: tactile, warm, and a little slow.
Cream: background, like paper
Tan: surfaces and cards
Red: primary actions and key moments, like the Sunday reveal
Moodboarding : vintage mail, paper textures, and handwritten notes
logo development: A snail carrying a letter to represent slow mail
medium fidelity and updated inspos in Figma
DESIGN SYSTEM & STYLE GUIDE
From moodboard to system
This is to show how every system decision traces back to the moodboard. Paper grain became warm cream surfaces instead of flat white, and collage photos became layered, rotated cards.
Foundations + core components
Base tokens → semantic tokens → components, so every button and card pulls from the same source
Component states
I defined interactive component across default, pressed, disabled, selected, and error states.
Accessibility : contrast checks
I checked every text and UI color pairing against WCAG AA.
Disabled text is exempt from WCAG contrast requirements.
The warning color is always paired with an icon and label, never used alone.
Tone guidelines, edge cases,
and layout
I made sure to phrase the copy to sound like a close friend, not a platform. Applying one of the user testing suggestions, even a warning explains the risk in plain words.
I documented safe areas, text scaling, and empty and loading states, so screens hold up beyond the happy path.
DESIGN TO CODE + HOw i used ai
How Figma Make helped personalizing the postcard
Participants hesitated to draw over a friend's photo, since it felt like altering someone else's memory. I explored three options: drawing directly on the photo, a removable overlay, and drawing only on the postcard border. I kept the photo untouched and gave people a separate space to decorate.
FLOW A
DRAW on the entire CARd
"I don't think I'd be happy if a friend did this to my picture."
FLOW B
REMOVABLE LAYER
"I don't really see the point of a separate layer. I could just erase my doodles."
FLOW C
DRAW ON BORDER ONLY
"It actually felt like I was writing on a postcard."
Testing confirmed the border: version C felt most comfortable to draw on (4.3/5) and most acceptable on your own photo (4.6/5). Version A tied as a favorite, but people liked drawing on a friend's photo more than having theirs drawn on.
RESULTS TABLE: n = 5, ratings out of 5.
Figma Make got three testable versions built in one evening, but I still had to fix the postcard frame, palette placement, and several generic defaults before anyone could test it.
Where Make helped: three testable versions in one evening, with layout and type mostly right.
Where I stepped in: the postcard frame, the palette placement, and generic defaults Make swapped in.
One source of truth for front-end implementation
I built the app myself in React Native, using Claude Code as a collaborator. My job was to keep what shipped true to the design. I grouped ~70 screens into flows and built them one flow at a time, reviewing each against Figma before moving on.
The design tokens live in the codebase as DESIGN_SYSTEM.md, which every prompt reads first.
Color, type, and spacing in the app come from the same values as Figma, so screens don't drift.
FIGMA → DESIGN_SYSTEM.MD → CODE
From prompt to shipped screen
I wrote prompts the way I'd hand off to an engineer, lik what to read first, exactly what to build, and when to stop and ask instead of guessing. Claude Code's first pass was fast but almost always not right. It added UI that wasn't in the design and took shortcuts on craft. Reviewing each screen against Figma and correcting it back was where most of the design work happened.
HOME SCREEN: PROMPT → FIGMA → FIRST AI PASS → FINAL
Small visual values were faster to tune by hand.
HI-FI MOCKUP
Interactive prototype
Carried med-fi feedback into a full high-fidelity pass across onboarding, groups, send, and delivery.
Check out my figma prototype →
Round 2 feedbacks
Tested the med-fi Figma prototype in person with 5 participants across three tasks, followed by a short survey and a 5-minute interview. I measured speed, misclicks, and ease of navigation, and asked whether people felt calm using it and comfortable decorating a friend's postcard.
Check out my INterview guide →
Also ran a heuristic evaluation of 40+ features against Nielsen's 10 usability heuristics. The biggest gap was error handling, since the app only showed happy paths, so I designed error states such as failed send and invalid invite code.
What changed after Round 2
Numbers first. Participants looked for the numbers before anything else, so I moved [the count, such as how many friends have sent a postcard] to the top of the screen.
A different background for send vs. sent. People couldn't tell whether a postcard had gone out, so the background illustration changes once it's mailed.
A border around this week's question. Participants wanted to see the prompt, and it was easy to miss, so I put a border around it.
OTHER MINOR DESIGN CHANGES
LEARNINGS AND FUTURE THINKING
Run the behavior by hand before building
The 3-week diary study showed weekly beats daily before I wrote any code.
Test the part people feel uneasy about
Drawing on a friend's photo felt like altering their memory, and testing three versions changed the design.
Integrating AI effectively
AI gets you a first pass, not a finished screen. Claude Code added UI that wasn't in my design, and checking every screen against Figma was most of my job.
Backend implementation
I left the backend out on purpose. What I needed to test was whether a weekly ritual holds up, not how fast photos upload, so the prototype runs on mock data and every test stayed on the experience. Supabase integration is the next step.