<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=120091&amp;fmt=gif">
Let's Talk

Jan

10

2018

How I Planned My Wedding Like I Plan a Website

Website Design

Or, as Java’s Husband likes to say, How Java Drove Everyone Insane Over the Perfect Ombre and other stories...

Hello, my name is Javariah Khan (but you can call me Java), and I will be the first to admit that when it comes to anything design related, the most accurate word to describe me is insane. Here at Mojo, I handle all things website related, so naturally, I had to use the same detail-oriented, experience-focused process when it came to planning my wedding this past December.

Before I dive into detailing all the similarities between the two processes, I should give you a bit of background. My parents are Pakistani, I have 25+ cousins (think My Big Fat Greek Wedding, but with samosas), and this post isn’t actually about my wedding (clickbait, amirite?). It’s actually about my Mehndi, which is a cultural ceremony the night before the actual wedding reception. The focus of a Mehndi is henna, dancing and color, color, color. Now that we’ve got that out of the way, let’s get to two of the three biggest W’s in my life – websites and weddings.

Step 1: Conduct an Audit of Existing Elements

First thing you want to do is take a look at what you already have to work with. Is there existing content that you can rework? Are there any barriers (digital or otherwise) you’ll have to overcome? Any mandatory images or design elements you’ll have to work into the website that are important to consider?

I knew my Mehndi would be at Southfork Ranch in the Atrium, which has white walls, string lights, black street lamps and a DALLAS sign in gold.

Step 2: Create an Educated, Purposeful Design Strategy

After you’ve analyzed your audit results, you’ll want to come up with a realistic strategy of how to continue practices that are performing well (i.e. lots of fresh, relevant content that allows you to rank high in search) and improve on any current issues (i.e. site isn’t getting any clicks because it’s too wordy, so you choose to incorporate more visual elements and brand colors to break up the text). It’s important to keep website goals in mind, otherwise you’re pretty much trying to organize your grandparents’ attic without boxes or labels.   

When brainstorming potential design elements and strategies, we compiled all of our known information (project goals, audit research of existing elements and general best practices):

  • The hall is black, white and gold, which makes a great blank canvas for bright colors.
  • Mehndis are all about color, but we didn’t want to have color for the sake of having color – we wanted them to work together.
  • We wanted our selected design elements to work harmoniously with the Mehndi brand colors we selected and the existing hall design.
Color_Wheel.jpg

With all of this, we set out to first select our colors (this first step may differ from your website; you’ll want to start with what you deem most important in order to move forward, which may very well end up being a sitemap or a content audit).

We used the color wheel to create a harmonious color hierarchy set blue and red as our primary colors and green and yellow gold as our secondary colors, since they were somewhat analogous.

Next up was to select design elements that tied in to our brand personality – colorful and celebratory – and worked well with the existing elements. We chose gold chiavari chairs to work hand-in-hand with the gold DALLAS sign in the hall and paper cranes because they were a meaningful element to both of us.

Here’s a picture of Java’s Fiancé picking out paper to create the perfect ombre for our strings of cranes. This is purely to backup my secondary header and my claim to insanity, but also to show how thankful I am that someone else understands my need for attention to detail.

Picking_Paper-1.jpg

Step 3: Mockup EVERYTHING

I cannot stress this next point enough – you never want to start developing a site until you have a mockup. Trying to cut down time by jumping into development without a clear-cut visual can lead to so many time-consuming issues down the line. You very well could end up spending MORE time trying to fix issues that could’ve been avoided had you used a mockup to plan how you want your final product to look.

The mockup doesn’t have to be perfect. You can create a wireframe with placeholder text and images. You can use imagery that isn’t necessarily finalized. You can use Photoshop or Illustrator (my personal favorite) or Invision. This is entirely up to you.

I used cranes that were too perfectly aligned and furniture that we ended up not going with, but at least I was able to plan how many cranes we needed (resulting in us having to make 300 fewer cranes than we originally planned) and figure out what color background would look best (we almost went with white until we chose navy because of the mockup).

Java's-Wedding-Mockup.png


Step 4: Execution

Cranes.jpg

The execution step of a website is the easiest to understand but takes the longest. This is when you get down and dirty and start developing all the crucial elements that bring your vision to life. Be prepared to work and rework a lot of elements until you’re satisfied and make small tweaks along the way.

Phase out your website into sets of pages or sets of templates so that the project doesn’t feel overwhelming. That way you can pass over a few pages at a time to your QA team so they can start testing the larger elements and your UX lead can make design decisions based off of a working site rather than a mockup.  

Cranes-and-cats.jpgThe execution process is when we made and strung up paper cranes (cats are not mandatory, but they are a great addition to the process, though they may slow it down). We phased it out into crane creation by color, then stringing them up. That way we were able to create groups of people who were responsible for different portions of the process, similar to how a website is created by many people.


Step 5: Testing, testing, testing!

Do a quick dance because your entire site is developed and ready for an internal review. This is a HUGE accomplishment.

Celebration-dancing.gif

Giphy: https://gph.is/2bcGfQj

Now it’s time to QA everything. Check that all images load, all links go to the right place (and open in a new tab if you choose to have them do so), all content is the latest and greatest and all additional functionality works properly (think sliders, image galleries, tabbed content, hidden content that should display on click, videos, parallax features, etc).

It’s good to have multiple sets of eyes on this – I like to ask our brand journalists to help because they’re closely tied to the content (so they’ll catch any errors) but not necessarily the design (so it’ll be a fresh set of eyes on a portion that I’ve looked at way too much).

Pre Go-Live QA

Crane-Water.jpg

You’ll want to do a full site review pre go-live to make sure there aren’t any major issues that you’ll need to fix before the site goes out to the world. Keep in mind that not everything can be tested before your site is pushed live. There will be some items, such as URLs and page load time, that you’ll want to re-check afterward. Make a list of those items so you don’t forget them afterward.

Our wedding version of a pre go-live test was to see if the mini paper cranes we were using in centerpieces floated alongside the floating candles, and good thing we checked. We were using a flammable sealant to make the cranes waterproof without thinking about the fact that they’d be right next to candles… Add that to my ever growing list of “Thank God That Didn’t Happen” events.

Post Go-Live QA

Post-go-live-QA.pngSo your website has been tested by everyone in the company and your team lead gave the green light to push it out into the expansive world wide web. Time to eat some celebratory pie and kick back, right?

Nah, you knew there was another step because of the title. Once your site is live, it’s time for a post go-live test. Revisit that list we talked about in the pre go-live section and do a final once-over because now you’ve got all elements in place that may not have necessarily been there before. Make sure links haven’t broken, and if they have, to set up redirects. Check page load time and make enhancements to improve it. This entire process is ongoing because a website is never finished.

We had no idea how everything would turn out until we put the cranes up on the stage the day of, so last minute fixes (like space between cranes, color of lighting, etc) had to be implemented.

There you have it! Weddings and websites both take a village, but the results are pretty exciting.

Interested
In
Joining
Mojo?

Learn More