Our Foolproof Web Design Process

Lee McAlilly
Made in Nashville
Published in
4 min readSep 9, 2016

Before I started Original Fuzz, I was a web designer. I’ve been practicing web design for over a decade now, but I’ve never compiled my approach into any sort of useful framework. Since we just started a redesign of OriginalFuzz.com I figured I’d do that now. Here’s how we’re going to approach the redesign of our website:

  1. Take it one page at a time
  2. Write the copy
  3. Design the mobile version
  4. Apply what we learn from the mobile design to a full-screen layout
  5. Rinse & Repeat — go back and edit as we learn more and refine every page we’ve work on
  6. Edit again
  7. Edit again

Do You Really Need a Redesign?

You’ve gotta ask this question first. It’s an idea I picked up years ago from 37 Signals. Maybe your site doesn’t need a redesign, just a rewrite. Does your entire site need to be rebuilt, or just a few of the most critical pages? Do you just need to refresh the copy on a few pages? It’s a good idea to steer clear of monolithic projects. With an iterative approach you can make small improvements along the way that are based on real feedback and insight.

Write First. Design Second.

Writing is a process of refining your ideas until you land on what’s essential. Design is also a form of communication, but if you don’t know what message you’re trying to communicate when you start developing a design, then you have nothing to work with.

It’s much easier to develop a strong design if you start with a clear message. Plus, you don’t want to design for content that doesn’t need to be there! Start with the copy and move outward.

Keys to a Successful Rewrite

There are some key things that we need to understand before we start any rewrite our site:

  1. Why does our company exist? Why should customers care about us when there are countless ways they could spend their time and money? Watch this Ted talk with Simon Sinek if you need help figuring out why you do what you do.
  2. What are the jobs-to-be done for our products or services? This is a framework for thinking about products that was developed by Clayton Christensen. It helps you understand what your customers are really hiring your products to do. You can learn more about it here.
  3. Who is your audience? Talk to your users and find out who they are and what they think. What do your customers feel and say about your products and company? Build out personas for these people. You should only layer in personas once you understand the “why” behind your company, and you understand the jobs your customers hire your products or services to do.

Now that you’ve done the legwork, it’s time to start writing copy. Here’s a great tool to help you get started. Use the same phrases and language your customers use when talking about your products or company.

Mobile First

It’s essential that you start the visual design process with the mobile view first. By embracing the constraints of the mobile version of your website, it forces you to deal with the trade-offs and problems that you’re going to have to solve in your layout. If you start with a large screen it’s a lot easier to defer the tough choices.

The majority of traffic on our site now comes from mobile devices. This trend is going to continue, so it’s essential that we prioritize the mobile experience moving forward.

If you nail the mobile design, you have a great starting point for building the desktop version.

In Everything, Iteration

We’re planning to take this process one page at a time. We prefer to iterate as quickly as possibly and use what we learn along the way. We’ll be starting with the homepage and going through each step before moving on to any other page.

By the time we get to the second page we’ll have already learned a lot, and we’ll have the first version of the “look-and-feel” figured out. As we learn new things we can always go back and apply that to pages we worked on previously.

Momentum over Deadlines

Good writing and design is a creative process, and I don’t believe a healthy creative process should be artificially rushed by deadlines. I think a project, like a website overhaul, should be finished when it’s finished. But that’s not an excuse to be lazy! It’s essential that we keep the project moving at a good pace.

Creative endeavors have their own inertia. Once you’re moving, you’ve gotta keep up the velocity until the project is done or you’ll ground to a halt. It will take a lot of effort to get rolling again. Don’t be the construction crew that comes to your house to remodel your kitchen, finishes 90% of the work in the first week, and then takes another two months to finish the job.

To Recap

So, this is what our process is going to look like:

1. Take it one page at a time, starting with the most critical pages first

2. Write the copy for our site first

  • Why do we exist as a company? How can we say this in one clear sentence?
  • What are the jobs-to-be done for our products?
  • Who is our audience? Build out their personas

3. Design the mobile version

4. Take what we learn from the mobile design and apply it to the desktop version

5. Rinse & Repeat—apply what we learn to every page

I’ll be sharing more about this process as it unfolds. If you’d like to get a brief email update to let you know when we’ve got a new post, just subscribe here.

Original Fuzz believes it’s not just what you do, but how you do it. We make guitar straps & camera straps in Nashville, TN.

--

--

Lee McAlilly
Made in Nashville

Co-Founder of Original Fuzz. We make guitar straps and camera straps in Nashville, TN. Find out more at originalfuzz.com.