Flygen
Let's talk

HeirloomMaking it simple to save a family memory.

A laptop on a wooden chair showing the Heirloom dashboard.

At a glance

Design thinking
If every format uploads the same way and every state is drawn, errors included, nobody has to guess.
Problem
Uploading a keepsake looked and behaved differently for each format, and the dashboard felt outdated.
Approach
Components first, one per format on an 8 and 16 pixel grid, designed for phones and then carried to desktop.
Outcome
A redesigned upload flow and dashboard, delivered as Figma designs for desktop and mobile.
Role
Lucie as design and project lead on the upload flow and the dashboard.
What we designed
  • UX improvements
  • UX/UI design
  • Design system
Platforms
  • Desktop
  • Mobile

Four formats had grown four different upload screens.

Spacing and form fields changed from one format to the next, and again between desktop and mobile. The flow itself was already settled, so our work started at the upload step.

Three rules keep every format’s upload consistent.

  1. 01One component per formatVideo, audio, text and photo each get an upload box built the same way.
  2. 02Draw every stateErrors and loading get the same care as the empty box.
  3. 03Phone first, then desktopSpacing of 8 and 16 pixels carries the layout from one screen size to the other.

Format comes first, so every upload step can share one structure.

People pick video, audio, text or photo first. Each card leads to an upload step with the same structure, so switching format never means learning a new screen.

The “Choose your Keepsake format” step on desktop: cards for Video, Audio, Text and Photo under a progress bar.

One upload box, with every state drawn.

The same box moves from empty to a dashed outline when a file hovers, then to progress and the finished file. Desktop sits on the left, mobile on the right.

Upload box states on desktop and mobile: empty “Upload video”, “Drop your video or browse” on hover and “Error in uploading”.
Empty, hover and errors
Upload box states on desktop and mobile: “Incompatible file”, progress at 19% and 84%, and an uploaded video.
Progress and done

The decision

An error names the problem and offers a way back.

An upload can fail because the connection drops, the file is too large or the format is wrong. Each case gets its own message in plain words and the same Try again link.

An uploaded photo fills the box it was dropped into, with Delete right below it.

A new Photo Keepsake on desktop: title, an empty photo upload box, an image caption editor, topics, date and location.
Empty
The same form after upload: the photo fills the box with a Delete image link below it, and the caption holds a written story.
Uploaded

Add more photos, remove any one of them.

Each photo uploads in its own row and can be deleted on its own. On a phone, Save and Cancel stay pinned to the bottom while the list scrolls.

The Photos panel on desktop: an upload box above four photo rows, one still loading, each with a name field and delete cross.
Desktop
The Photos panel on a phone, scrolled: photo rows pass beneath a Save button and Cancel link that stay fixed at the bottom.
Mobile, scrolled

Every attachment uses the same card.

The last step shows the keepsake as family will see it. Everything added below the preview sits in one repeating card, with the same spacing, title and arrow.

The final step of a demo keepsake: a preview card, privacy options and matching cards for photos, audio, links and documents.

A dashboard that welcomes you and asks you to share.

New members see a short checklist and a reward for finishing it. We put sharing ahead of search for the first phase, because the first goal was getting people to share their profiles.

The Heirloom dashboard close up: a welcome for Pavel, a getting-started checklist with a reward, prompts and a life timeline.

Next project

NorthouseA brand and website built to sell 17 new homes across generations.

Northouse case study cover

More work

All projects