Wedding website – an interactive story

I got married last December. My husband and I are a pretty geeky couple – writing poems for Pi day, sending Google maps with our favorite places tagged as a Valentine’s Day gift. Having a wedding website thus seemed a no-brainer. The problem was, everything we saw – website templates, friends’ sites – they all seemed super cheesy and filled with mostly photos of the couple. Not bad, but not necessarily what we wanted.

We both felt that our wedding website, in addition to being informative, should also be fun for our friends.

Looking around for inspiration, I came across a wedding infographic from and thought – how cool would it be to create an interactive infographic of our story!


Being a UX girl, I immediately started listing out the website’s goals and requirements, and do some user research! As I brainstormed with the other stakeholder (my husband!), we tried to answer:

  • What did we want people to take-away from the infographic?
  • What is the most important aspect or thread tying our story together?
  • How much time do people even spend reading such stuff?
  • How do we design this for close friends as well as casual acquaintances?

Some of the answers popped up right away – long distance was probably what defined our relationship until now (it was all 6 years of long distance!).
We wanted people who knew our story to get a few laughs from re-reading it, and those who didn’t to get a fun big-picture overview.

User Research

To answer the other questions, I talked to a bunch of friends and family, asking them to walk me through some of their favorite wedding websites. I realized there were going to be 4 broad categories of people who looked at our website:


Sketching – and more sketching!

Getting down to the most fun part now began – quickly sketching out wild and not-so-wild ideas!

Having a better idea of the audience and the content, I started sketching. The main theme was long distance

Initial sketches

At this point in the sketching process, my other self – the developer self – intervened.

Design-developThe “designer me” had all of these ideas of how the website should work, but the “developer me” had comparatively lesser web development experience and not a lot of time. The compromise was a “can-abort-at-any-stage” method. I focused on getting the basics up and working, and iterated over the design-develop-feedback process.

    I finalized the simple infographic (sketch #2 from above). My goals were stepwise:

  1. Create a simple static timeline with a few events
  2. Add more stories on the timeline itself
  3. Make individual elements within the timeline interactive
  4. Spend more time on the design details – scatter plot and each of the stories
  5. Make the individual elements animated for playfulness and pre-attentive focusing

Refined Sketches

Final Sketches

A few hiccups and lots of learning later, this is what the wedding website looked like.
Given a little more time I would have added some photos and tried to make it as mobile-friendly as possible. Not sure what would be the best way to do that – given that the current visualization is all on a canvas element. Any feedback would be appreciated!

Overall though, I was quite pleased with the outcome given the time-frame. My favorite parts of the infographic are:
– The reference to Friends, each story on the infographic being titled “The one with.. ”
– The twinkling stars on the wedding proposal image
– The idea of him literally “dropping in” on me using a parachute