Ilies AllaliA family tree anyone can read without instructions
A scroll of ten sheets, nearly 400 people, and a family that has to read and add to all of it without anyone explaining how.
My mother kept the family tree in pencil on a scroll several metres long. The tree was getting crowded, she was the only one who could still read it, and every new branch meant redrawing everything. I designed Parenthèse so the whole family could read it and add to it, from an 8-year-old cousin to my grandmother, who is far less at ease with computers. I ran all of it, from research to the code in production.
- GitHub stars
- 88
- people opened the demo
- 1,231
- countries
- 47
- views on Reddit
- 15,000
Who it is for
Before drawing anything, I tried the existing tools with my mother. What struck me is that they are built for researchers. The interfaces are dated and hard to read, not easy to share, and people look more like dates in a spreadsheet. My mother wants to keep her grandfather’s photo, her aunt’s voice and the story that goes with them. I set one rule, anyone in the family must understand the screen without being told how.
A map rather than a table
A tree drawn as a table reads well but is not very inviting. I wanted it to be beautiful and easy to understand. I chose a map you can move around in and explore, even if it means losing the overview. To make up for it, the tree frames itself when it opens and draws itself generation by generation, so you understand its structure before zooming in. Detail changes with the zoom, from afar you see families, up close faces, dates and memories.
Portraits, not boxes
I made sure each person gets a frame drawn at random, polaroid, round or rectangle with a slight rotation. Only a clearly horizontal or vertical photo imposes its shape. It makes the portraits feel much more human and gives the tree some movement, as if someone had laid out the photos by hand. Memories, photos, videos and voices, float around the portrait. You can see who has some without opening the card, and they draw the visitor into the portraits.
What got in the way of reading
Several cases made the tree unreadable. Some children ended up far from their parents, when two distant cousins married for instance, and pulled a line across the whole tree. That line is now automatically replaced by two clickable tags, “See the parents” on the portrait and “See” followed by the first name under the couple. A spouse with no parents or children in the tree also took up a full slot, which made the tree much heavier. In my family’s tree that was 56 people, who are now a small portrait next to their partner.
Placing nearly 400 people
My family’s full tree has nearly 400 people, 138 unions and fifteen generations. At that size the layout stopped looking like a family, a child ended up with a median of 394 pixels from their parents. I built a test bench and compared thirteen variants of five models, on the real tree rather than on test data. The chosen model treats a couple and their children as one block, with the parents centred above by construction. The median distance drops to 294 pixels and the computation stays at 9 milliseconds.
A warm art direction rather than an archive
For the art direction, I wanted something human and bright that a family opens together, far from genealogy software that looks like a register. Terracotta was the obvious choice. It never carries text, its deep version is used for links with a 7 to 1 contrast, and everything else sits on an off-white cream. Newsreader for names and memories, a reading serif that gives first names some warmth, DM Sans for the interface. The logo sets the name between two serif brackets, thickened to match the weight of the name. The circle in the middle also serves as the loading indicator, it splits into three breathing dots and then closes again.
Watching the family use it
Once the tree was shared, I watched the session recordings. Everyone opened the cards and the photos, nobody touched the pencil that lets you send a contribution to the tree. I made contributing much easier and spent a lot of time guiding the user through every step, so that even my grandmother can take part.
A whole product
Beyond the app, I wanted Parenthèse to be a real product, so other families could build their tree for free too. I spent time on SEO, the landing page, the sign-up flows and articles to guide users. I opened up all the code on GitHub, so anyone can host their own tree on their own server and stay in control of their data, instead of handing their whole family history to a stranger on the internet.
