Skip links

From Mockup to Launch: American Distribution

It’s another Website Launch Day here at Smarter Searches, which means a celebration is in order (including a champagne toast because, well, it’s us); but before we pop the bottle, I wanted to take a moment to reflect on the process that led us here. There’s a lot of work that occurs behind the scenes of every successful website launch; so today, I’m going to dive into what our design process looks like from the initial branding stage all the way up to Launch Day.

The Project

A few months back, one of our dear, sweet clients approached us with a new website design project for American Distribution Services, Inc. We worked with them on a couple of other website design projects in the past and they were lovely to work with so, our team was thrilled when they reached out to us with a new project to tackle.

American Distribution is an all-inclusive warehousing and distribution company that works with some of the country’s largest retailers, including Barnes & Noble, Walmart, Kroger, The Home Depot, and TJMaxx (a personal favorite), just to name a few. They needed a website that better reflected their success in the distribution industry, highlighted the major brands they partner with, and gave potential customers more opportunities to convert.

While there were several nuggets of good content currently on their website, it needed a fresh new look. Here’s a glimpse at what the website looked like before we got our hands on it.

american distribution website

Logo Refresh

One of the points on the client’s list was a little brand refresh. They didn’t want a completely new logo and brand image, so I took what they had and gave it a little facelift. I ditched the outline of the text, the beveling of the arrows, and the drop shadow in favor of an updated design. The changes were subtle enough to provide a more modern look while preserving brand recognition.

The Mood Board

Before I begin designing and building the website, I like to get all my thoughts for the look and feel of the website all in one place. I do this in the form of a mood board: a one-page, collage-like document that features fonts, colors, and image styles of the brand. For this particular client, I added a turquoise accent color to add some more dimension to the website, chose a modern, sans-serif font for the headings and body text, and collected a few stock photos to define the overall image style of the website. I then sent the mood board to the client to ensure we were on the same page, visually, before getting started on the flat mockup of the homepage.

The Mockup

After the client gave us the green light on the mood board, I moved on to the mockup phase of the project. Here, I design a flat PDF mockup of the homepage in Adobe Illustrator and send it off to the client. I do this so that I can take stock of the client’s thoughts on the design, get their feedback, and make edits to the mockup to ensure it’s perfect before we begin building. Let me tell you, it’s much easier to make changes to a PDF than to rebuild entire sections of a website!

Is this a website for a warehousing and distribution company? Yes. Does that mean it can’t be a little fun? NO! I wanted to preserve the company’s simple and professional aesthetic while adding some fun touches here and there; so, I added a slanted row divider, some icons to illustrate their services, and a subtle gradient overlay background.

website mockup

Sidenote: The client loved the design, which is truly so rewarding to me. There’s just something about working hard on a design, going through several revisions and MANY “ugh, I don’t love this” moments to eventually produce a design and get a “you NAILED this” response. We love.

The Build

Here’s the part where dive into the site and try to get it as close to the mockup as possible. This takes loads of trial and error on my part, but when it’s done, it’s magical.

This website includes a homepage, a simple page of each of their five services, a page showing off their impressive client list, and a contact page. Once the homepage was finished, the rest was fairly straightforward and flowed easily.

Next came edits from the client, responsive tests, link testing, search engine optimization, and eventually, THE LAUNCH!

I hope you enjoyed this inside look at our website design process from start to finish. Now if you’ll excuse me, there’s a glass of champagne calling my name in the next room.

Cheers!

Is your website ready for a refresh and update? Let our team help create a site your customers will love to use and one that drives results for your business. Contact us today!