Case Study
Bespoke Wedding site

The cost of small bespoke sites can vary in price, depending on user requirements. I helped address the clients pain points and created a statically generated site as an alternative to the subscription model prevalant in WYSIWYG builders.

Key features included the ability to gather RSVP responses, provide day information and an integrated image gallery with zero hosting costs.

Built with GatsbyJS, hosted with Netlify.
The need to create a cost effective solution with little to no overhead with customisability to satisfy personal requirements.
poundSign logo
Running costs
With the site going up prior to the wedding, an estimated monthly rolling cost just covering the hosting would accrue in the run up to the event. Beyond that if the site provides a gallery the hosting would need to run indefinitely unless moved to another solution.
customised logo
A lot of the sites that take the hassle away from hosting and provide a platform to create a personal site are typically geared towards blogging and e-commerce. There are services specific to creating websites such as Riley & Grey who offer bespoke site design but at a much higher monthly cost of $35.
world wide web icon
Personalising the site with a custom domain has an initial outlay and every year thereafter. Domain names of combined client names are reasonably priced due to the scarcity of demand.
wysiwyg logo
WYSIWYG builders that handle the hosting typically run a monthly fee, alternative options such as WordPress can require separate hosting if not opting to host with their platform.
Monthly cost logo
Exploring options such as Wix, Squarespace on the surface you would often have to pay a monthly fee for features you don’t necessarily need and can include ads unless you pay more.
WYSIWYG builders can get you up and running with ease but at a varying level of cost and may not offer the level of customisation required by the client.
Wix pricing structure table
Based on findings the proposal is for a statically generated site that can be hosted for free on a service such as Netlify. Negating the issue of monthly billing costs and continued site overhead.
Exploring ideas about the big day and what’s important to the guests and the bridal party.
The initial brief was to adopt the pre-existing styling from the save the date stationary and create a solution where guests could RSVP, read important information about the day and explore the possibility of image uploading.
Printed wedding stationary for Ryan & Christies wedding
I started by exploring what information beyond those specified could elevate the app's usefulness and pre-emptively incorporate features that had yet to be realised. I researched pre-existing solutions provided as a service and looked for examples of actual sites to draw insight into commonly requested and desirable features.
High Fidelity initial mockups

Building the wireframes

I had ideas of how I was going to design the website based around the existing stationary and started with pen and paper sketching before moving to digital mock-ups.

I used Adobe Illustrator to create the wireframes and prototypes. I use it frequently for work, so is easy for me to create the visuals. The mock-ups were a great visual aid for the client, a lot of decisions and improvements were discussed with important information prioritised.

initial wireframes

Mapping the features & interactions

I collated both as the website has only a few elements of interaction and mostly serves as a hub of information. With the ideas generated from previous stages I mapped out a feature flow chart. It served as blueprint for the app structure with each page broken down and going into all the details required for each page.

The interactions are only present on the index and photos page. The goal of the site besides providing information is for guests to easily correspond to the RSVP. The Instagram API is called on every page refresh and highlighted for visibility. Building a diagram helps me keep track of all the components and provides value when communicating the proposals to the client.

Feature flowchart

Visual Design

I set up a Kanban board to provide instant feedback with the design going through several iterations. The board provided granular feedback and reduced time between client inputs.

Below are some of the resulting visuals.

High Fidelity visual designs
Conversation with the client enabled discussion and feedback on the proposed features, redefining and finalising the project deliverables.
Key Feature
Instagram Integration

One of the initial requirements was for the ability to upload images to the site and host them, the proposed solution instead uses the Instagram API to pull images from either a specific hashtag or user account.

Wedding parties are capturing their own images, with 60% of brides using social media on their wedding day, 76% taking a wedding selfie – affectionately coined the ‘welfie’, and an average of 3,400 photos being taken at each wedding by guests alone. 57% now use a wedding hashtag – an increase of over 40% from the year before.

Having all the guests upload their photos to the site; although possible would have created a poor user experience. Using Instagram and adding a hashtag has the images pulled down in real time and the site can be used instead to check the collection of photos.

Instagram iphone feed mockup
Wedding website mockup on a display in a office