Explain Your Family

Front End Development
Back End Development
Responsive Web Design
UX Design
Product Design

I built Explain Your Family to scratch my own itch - my girlfriend and I have 24 aunts and uncles between the two of us (and who knows how many cousins...) and as we were each meeting the other's family, we struggled to keep track of who's who.

Explain Your Family sets out to be one thing: an easy place to document your family tree so you can show it to someone else.

I started by laying out a simple user story (my own). From there, I added features that might help with each step of the user journey, then added details about what those features might entail. I then took those features and plotted them on an impact vs. effort plot and used that to decide what I would include in an MVP version of Explain Your Family.

I realized that the major value prop for my user story would be in creating and plotting people's basic details and mapping their relationships, so I designed how I thought that could be done as simply as possible (conclusion: by sequentially adding people and managing their relationships) and built it.

One key aspect of Explain Your Family is it doesn't require signing up or logging in, as this would be a significant barrier to entry, but you can edit your tree and share it with others (without fear of them editing it).

The site is comprised of a Rails 5 API and an SPA built with Vue.js, Webpack and Bulma/Buefy.

I decided to roll my own vanilla JS tree-rendering algorithm after exploring some existing choices and not finding anything that quite fit the needs of the project.

Check it out at explainyourfamily.com.