loading

Wedding invitation template

Project overview

This project was our entry in the SlideShare '13 hackday, it's a quick content creation app that uses data imported from Facebook to present the user with a well designed wedding invitation that can be downloaded as a pdf or uploaded to SlideShare. The main objective of this project was to champion a quick & easy content creation experience that allows for inline edits and improves user confidence on online content creation.

Let's further define the project through a set of 3 key questions -

What is this product?

It's a quick content creation tool.

What is this product for?

To help users with little to no content creation experience create high quality content.

Give some context on the user & their story.

The user wants to start publishing content but due to his/her limited expertise with tools for design is unable to get started.

Project flow

Once I had a good understanding of the problem we were solving and objectives we were trying to achieve, my next step was to define the user flow of the application so that we could start off with a solid foundation.

I like to sketch flows and ideas usually by hand at this stage, the following sketches/rough mockups were done using the Paper app from FiftyThree.

User Flow

Here's a tl;dr; of the flowchart above -

Simplified User Flow

The flow in it's simplest form starts with Facebook data import about the user and their to-be spouse following with presenting them with a choice of templates. As they choose a template we fill it with imported data as best possible to generate the wedding invitation. They are also given the choice to edit data in-line on the template.

Next step is giving the users a choice to either download the invitation as a PDf or upload it to SlideShare, at this point the flow comes to it's completion.

Wireframing

This is the part where I started defining structure of the template, with some idea on the kind of interaction and data involved in this project I worked on the base UI structure and started figuring out the visual cues for content editable data. I also started to think about the interaction that will take place between the user and the template & ways to make the user feel confident and in control.

Template wireframe

A little bit of the final structure shows in these wireframes, I was trying to figure out the optimal layout that was the best fit for our wedding invite and it's story.

Template structure wireframe

Final template design

Following is the final design for the template, I created another variation in the small amount of time we had which has a different header image but mostly the same structure.

Wedding Template Final

Results

We won the hackday! My team secured the first place and our idea was incorporated as an official quick content creation project at SlideShare which later launched as Professional Journey where I led the design efforts for overall flow and a new template.

Quick content creator - SlideShare Hackday Project

Role

UX, Visual Design, HTML, CSS

Category

Web