But with so much input, it's easy to lose sight of what's important. Fuzzy expectations lead to frustration and can slow down the process. That's why you need a clear sense of your project’s goals early on. And why everyone needs to share the same vision for it to be a success.

Know the website’s purpose

Sure, a brand-new, eye-catching website is always a positive. But committing the time and money to build one can turn into a short-term investment if there aren't deeper reasons for doing so.

Whether you’re starting from scratch, or you’re doing a complete redesign, you need to know what you want a user to take away from your new site. What do you want to communicate with the content? What calls to action need to be woven in? Understand what these focal points are so  you create a design that magnifies them.

A website shouldn’t be a lone outpost on the digital frontier, but should fit into a brand’s broader strategy. It needs to complement this strategy as well as add value of its own. It’s fine if the website just provides a slice of fluffy entertainment — if that was your intent. But ultimately, a website should help fill the gap between what customers know, and what your client wishes their customers knew.

Identify the problems and find the right solutions

To identify the problems to be solved, and find the right solutions to those problems, you first need to communicate with your client and the other stakeholders.

You must have an open dialog to find out what works on their current website, what doesn’t, and what they think doesn't. Is the content solid but usability a nightmare? Is the checkout process so painful that the client’s losing sales? You need to learn what your clients consider the site’s major problems to be, as well as gather feedback they've gotten from people who've used it.

You also need to do your own investigation. Dig deep into their current website and note everything that needs an upgrade. And don’t just fixate on what’s wrong — consider what works too. You may be able to incorporate positive aspects of the current site into your new design.

It's easy to get sidetracked by tiny details. But this isn't the time for details. Both you and the client need to focus your attention on what the website is going to accomplish and how you're going to make this happen. 

Often a client will think they fully understand the problem and have a sure-fire solution. Sometimes, they'll have no direction, but just a gut feeling that what they have needs to be improved. As the design experts, it’s our job to explore the options and recommend an optimal solution (and failing that, a decent solution).

When I worked in the retail corporate sphere, I was part of a team tasked with putting together the company’s environmental sustainability report. What they had been doing was printing a comprehensive 50-page report that resulted in a pile of paper that was anything but green.

Our solution? Trim that 50-page report into a pamphlet covering the highlights, printed on recycled paper with a soy-based ink, with links to the site for more info. Thereby solving a problem they didn’t even know they had.

As designers, we have the expertise to come up with the solutions for both the known and unknown issues involved with a project.

Know your audience

Knowing your target audience will guide you throughout the design process, simplifying decision making by forcing you to answer one simple question: 

Is this useful for our audience? 

Your client should have demographic information such as income, gender, and age (in their Facebook page analytics, if nowhere else). You’ll also need to know their consumer habits: 

1. What other goods and services do they buy? 
2. What websites do they visit? 
3. What forms of media do they indulge in? 

Knowing all this will help you create a design consistent with their other consumer experiences.

If there’s one goal all websites share, it’s to connect with its audience. By knowing more about who you’re speaking to, you’ll be better able to effectively reach them.

Write a creative brief

However long-winded yours is, it's vital to assemble a creative brief so that you, the client, and everyone else involved with the project understands its specifics. A creative brief needs to define the who, what, and where of the project, laying out the the scope and what needs to be done to accomplish each goal.

Define success

Without defining what success looks like, you’ll never know if you’ve achieved it. 

Some measures of success are more obvious than others. People understand numbers. When they see traffic and sales go up, they know they’ve achieve a kind of success.

Some clients already know how they’re going to determine success. I once had a client who helped run a nonprofit and wanted a complete website redesign. Her criteria for success: 

1. Improved rankings in search
2. Increased sales of their handmade goods

Knowing these two goals up-front made my job a lot easier. I spent a huge amount of time on researching and writing SEO-optimized content. I also found a better ecommerce platform and had them take new, high-resolution photos of their inventory.

Sales increased and her organization made the first page for a number of high-volume search terms. She was happy and so was I. The project was a success.

When you’re defining project success, don't make unrealistic promises. For this nonprofit effort, I explained how what was on their current website wasn't effective. I never oversold what I was going to do, but I did explain how it would be better than what they had. And it was.

Of course, “success” can also be a bit less concrete. Improving a brand’s reputation and differentiating them from their competition can be hard to measure. But if you set your client’s expectations properly, they’ll be able to see this in the finished product. (And failing that, you can always run an NPS survey with current customers to gauge response to the new design.)

Everyone involved with the project needs to know how they'll determine its success. When everyone has a shared understanding of success, you’ll all be able to assess and recognize the effects of all of your hard work.

Set your goals

You can define any project in terms of deliverables and the people tasked to create them. But without well-defined goals informed by the target audience, no one will know why they’re building these deliverables.

When people understand the why, they also better understand how to achieve their goals. Find these goals at the beginning of a project so you can find success at the end. 

Suddenly, the client has a better idea of what you can do to make the project a success, which, yes, will involve some additional work you didn’t talk about earlier. You've worked hard, but the client now wants to change direction, making everything you’ve done a waste. What you thought was a straight shot to launch has turned into a meandering journey through the backroads of indecision.

Welcome to the wonderful world of scope creep.

What is scope creep?

You’ve probably heard the term somewhere. But what is it?

When a project grows beyond what was agreed upon in the beginning, you've got scope creep on your hands. It’s okay for a project to evolve, but if it puts you in the position of doing more work for the same money, then it’s a problem.

Here’s a few ways to handle it — before it turns this project into a living nightmare.

Define project scope in your contract

We know — you’re a freelancer. You enjoy the freedom of living every day as if it’s casual Friday. You’re working outside the lines of the traditional 9 to 5. You like to keep things “chill.”

Unfortunately, being too informal can mean setting yourself up for disappointed, frustrated clients. Which is so very unchill.

After a couple meetings with a client and other stakeholders, you should have a very clear idea of the project and its objectives. This is the moment to put all the important details you’ve discussed about the project in writing.

Detail the work you will and won’t do

Define what services you’ll be providing. Be direct and detailed in your language and make it clear how you’ll bill your client, whether it’s an hourly fee or a set price for the entire project.

For example, you could define scope like this:

I’ll build and launch five web pages, including:

• Home
• About
• Services
• Contact
• Blog

Content for these pages will be provided by the client by XX/XX/XXXX. If content isn’t provided by that date, the project timeline will need to be extended.

Each page is subject to up to 3 design revisions. Additional revisions will be charged at a rate of $X.

You’ll also need to detail types of work that will fall outside the contract, like excessive revisions, and how you’ll bill the client for these “extra” services.

To continue the above example, you could add the following:

Any pages added to the list above will add 1 week to the project timeline. Content can be produced for any of the above pages, or any additional pages, at a rate of $500 per page.

Ask for portfolio usage rights

If you want, you should also ask if you can use examples of the work you’ve done for your own portfolio, and if they agree, note this in the contract. It’s important to be flexible on this point, assuming you want the project, as some clients might be okay with you using work samples as long as their company name is omitted, or as long as the portfolio page is password protected.

It’s a bummer to create something great for a client, only to discover later that you can’t use it for your portfolio.

Include a kill fee or down payment

Sometimes a client will decide to cancel a project you’ve already started. Maybe decide to dedicate time and money to something else.

To protect yourself from losing out on what you’ve worked on, especially if you agreed upon a flat fee for the project, you need to include a kill fee, or ask for a down payment.

This will protect you from walking away without a dime in your pocket for the time you’ve put in. A kill fee can be a percentage of the total fee, or be based on all the work you’ve done up to the point of cancellation.

It can be a daunting task to write up a contract. But keep in mind it doesn’t have to be full of legal language. Keep it simple and straightforward. Make sure your client understands it completely before you both put your signatures on it.

If you have no clue where to start with a freelance contract, read our article "How a design contract can help you manage clients," check out AIGA’s (very detailed) Standard Form of Agreement for Design Services or adapt this free graphic design contract from Rocket Lawyer.

Be prepared for scope creep

What starts out as an update to a single landing page turns into a few more tweaks on a couple other pages. Then it turns into a complete design overhaul — of the entire website.

If you're charging an hourly rate, this can be great — as long as it's not eating into time you've already committed to other clients. Otherwise, you'll be doing extra work, without extra pay.

Agreeing to do extra, unpaid work isn’t “nice”

We all want to be accommodating and keep our clients happy. But when we start agreeing to do things that aren’t covered in the contract, we’re just encouraging bad habits — like the client thinking that extra tasks are just par for the course. Part of our job as freelancers is ensuring they don’t think that.

A contract saves you from doing additional work without getting additional pay. If a client needs something more, like an email campaign or a revamp of their social media content, you can add a change request clause to your contract. For anything that falls outside of the contract, such a clause can ensure you’re paid for your hard work.

Create deadlines for deliverables — and payment

This is why having a timeline of deliverables matters. If you’ve agreed on a timeline and a set fee, you need to be ready if the timeline gets extended. Every timeline should include a bit of wiggle room, but as a freelancer, you have to protect your time carefully — especially when you’ve got other clients in line.

Along with the timeline for the project, there also needs to be a payment deadline, and instructions on how to submit payment. This helps decrease confusion and ensures that you’ll be get what you earned in time.

Schedule time for feedback and edits

The feedback cycle needs to have limits, even if just to preserve your sanity.

Many clients don’t realize the overall implications of changes to a design. What seems like a small edit, such as repositioning an image or changing a font, can easily cause an avalanche of changes.

This ties back to the importance of a timeline. Allocate periods of time for revisions and specify what types of changes you’ll work on. For example, if the client tries to sneak a rebrand into a site design project, you’ll be well within your rights to say no — as long as your contract is clear.

Plus, keep in mind that, as a project progresses, certain changes become more difficult. It might be easy to reorganize content early on, but when the entire sitemap changes just before QA stage — well, that’s a whole other story. That’s why your contract should make provisions for late changes that may affect the entire project. Charging extra for changes that go beyond the timeline will protect you from doing excessive edits for free and keep your client in check if they tend to be nitpicky.

And, of course, you need to figure out who all of this feedback will be filtered through. Identifying a single person to communicate edits to you will streamline the process, and force stakeholders to get on the same page. Having multiple people giving you feedback can result in conflicting ideas and muddy the project’s objectives.

Stop the creep

It's easy for a project to grow beyond what you've planned and take on a life of its own, like a monster breaking free from a mad scientist's lab. To avoid cursing the creation you've unwittingly created, set boundaries with your client — communication is the key to avoiding scope creep. When both you and your client have a mutual understanding of the work involved, the process will be easier.

Start with a sitemap

Have you ever looked out of an airplane window and seen the outline of a brand-new subdivision taking shape below? It’s kind of like a sitemap: a footprint signaling where structures need to be built, as seen from 30,000 feet.

A sitemap provides a diagram of the site’s hierarchy and shows where each page fits into this hierarchy.

(Note: in this post, we’re discussing the sitemap as a website planning and communication tool, not the literal XML sitemap you’ll create to aid search engine spiders in crawling your site — though the planning tool should essentially define what that XML sitemap will contain.)

As you’re building out your hierarchy, it’s vital that you continually reference your project’s goals. That’s because the site’s hierarchy needs to reflect and contribute to the fulfillment of that goal.

For example, if you’re building an ecommerce site, one of your goals will undoubtedly be to sell products. Thus, your sitemap should place product indices and pages at or near the top of the hierarchy, so visitors can immediately see where they need to go to fulfill your goal and theirs: buying stuff.

Creating your sitemap

You can approach the design of your sitemap in several different ways. You’ll want to choose your method based on two qualities:

1. Ability to capture the information you need to capture
2. Ability to convey the information you need to convey

In other words, it needs to be capable of conveying the info you want to convey in a manner that’s clear to your audience.

For example, here are 3 common ways of creating a sitemap, along with the information each is best at conveying:

1. The list

The list format is a simple ordered or unordered list that uses nesting to convey hierarchy. Here’s an example based on part of the core Webflow site:

Index

- Designer

- CMS

- Editor

- Hosting

• Customers
• Groupon
• New Story
• Possible
• Salt
• Freelancers

This is great for communicating page topics and relative hierarchy. You can immediately see that the pages for the Designer, CMS, Editor, Hosting, and Customers all receive the same level of prominence, with specific customer stories coming in one level lower.

What it’s not so good at communicating is user paths between those pages. There’s no indication, for instance, that Designer, CMS, Editor, and Hosting all appear under a dropdown labeled Features in the site’s main navigation. Or that each of those pages are linked to from the site’s homepage.

That makes a list format handy for, say, a page inventory, but you wouldn’t want to hand it to a client and say, “This is how people will navigate around the site.”

2. Horizontal diagram

Hillary Pitts’ sitemap (at the top of this section) is a horizontal diagram, probably the most familiar form of sitemap out there.

Like the list, it captures a high-level view of the site. Unlike the list format, it more clearly indicates paths between pages/experiences, as you can see in the checkout flow that runs across the center of the map.

That makes it a far better tool for communicating the hierarchy and how people will navigate the site to clients and other non-technical folks. Though it works beautifully for the technically inclined too!

It’s worth noting that, as Pitts’ site is an ecommerce store, it doesn’t provide a comprehensive inventory of site pages. There could be one or one thousand different product pages — it doesn’t matter for this map, as product pages will almost certainly be handled via dynamic templates or UI kits, and the flow from product index to product detail is unlikely to vary from product to product. However, if there are product types that require distinct content models, you'd want to note those.

3. Vertical diagram

The vertical diagram is basically just a horizontal diagram tipped over on its side. Because the left-to-right flow connotes progress (in cultures where reading flows left to right), vertical diagrams are most useful for mapping a more contained experience, such as a specific user flow, or the structure of a more specific area of the site.

The purchase flow section of Pitts’ horizontal diagram would be a good candidate for a vertical diagram (and in fact, kind of is a vertical diagram, embedded in the horizontal one).

Running into trouble with your sitemap? Try a card sort!

If you and your client have clearly defined your project’s goals, there’s a good chance that building your sitemap will come pretty naturally. But on larger projects, and those with detailed content, you might need to break out a tried and true tool: the card sort.

To run a card sort, just gather yourself, your client, and any other stakeholders together (in person or digitally). Then write down all your page names on index cards and collaboratively sort them into categories that make sense for you all. Once that’s done, create a sitemap based on the sorted cards and (ideally) run it by a few members of your target audience to make sure it makes sense to them too.

Once you’ve nailed down the sitemap, you can dig into your wireframes, where this outline becomes far more specific and detailed.

Sitemap tools

Any design tool that boasts boxes, arrows, and text editing capabilities can help you get the job done when mindmapping. But it helps (a lot) to use a tool that has those boxes and arrows as pre-existing elements (often called stencils).

Here are few tools that come with sitemap elements preloaded:

• Balsamiq
• Moqups
• Axure
• Slickplan
• Writemaps
• MindNode

Why you need to wireframe

If a sitemap provides the blueprint for your whole website, a wireframe represents the blueprint for a single page (or group of pages). It’s what you’d see if you could take your sitemap, then zoom in and enhance a single page in that high-level map.

Like the sitemap, a wireframe captures hierarchy. But this time, that hierarchy is limited to a single page, and thus defines the relative importance of content as it flows down the page.

Similar to prototypes, wireframes can come in a variety of levels of fidelity. Some wireframes basically are the final design, complete with the final fonts and sizing, sample photos, and even production-ready copy. Others are much more schematic, sticking with a collection of monochrome boxes and blobs where content will one day appear.

Because of that wide range of fidelities, it’s important to clearly explain to your stakeholders just how final-final your wireframe is.

Take a moment to review this wireframe from a content perspective. It actually has a lot of implications that will either need to be turned into content standards, or revised with content standards in mind!

For example:

• The large headline type means articles won’t be able to have more than 6 or 7 words
• Article teasers can be comparatively long, which could help mitigate the above limit
• Every article will need to highlight an image
• Slider headlines will need to be extremely short due to the type size
• There’s a “country switcher” in the top right, which could imply a need for translating site content. That can have significant design impact, as a 6 or 7 word title in German is likely to be much longer than one written in English

And that’s just for starters.

Give stakeholders just enough to get the right idea

Don't mistake a wireframe for a prototype. Wireframes provide a schematic representation, with graphics and content (usually) stripped away, showing the basic structure. Prototypes, on the other hand, should present a working version of the final site (although level of fidelity can, again, range widely).

Wireframes allow stakeholders to see how individual pages within a website will flow and function. And since nothing in a wireframe has been set down in code, stakeholders have the freedom to request drastic changes before you even start designing.

Wireframes communicate the structure of a website in a visual way that everyone can understand. Something like a state change can be complex to describe to someone unfamiliar with design, but a wireframe can clarify that with a simple visual or two.

One thing that needs to be made clear before you show anyone your wireframes is what exactly they represent.

It should be obvious to any viewer that these wireframes don’t represent how the end product is going to look and function. Keep things simple and clear so everyone can visualize what the project is going to entail. Simple grayscale shapes should do the trick.

If in doubt, annotate

Because your wireframe is a schematic of a web page, you'll probably want to include any extra notes/annotations that can bring clarity to the experience.

Look at the wireframes below. As a designer, you no doubt immediately recognized the grey circle and four dashes as a logo and navigation links. But most clients wouldn’t know what they’re looking at without the “Navigation” callout!

Personally, I like to label wireframe sections in the wireframe, as long as I can come up with a clear, simple name. I’ve just seen too many stakeholders misunderstand a section’s purpose, and have that misunderstanding skew their feedback, to skimp on this simple addition.

Sitemaps and wireframes help you get a head start on content

What came first: the chicken or the egg? Who cares — what matters is the yolk. A design is like the shell that holds the content together.

No matter how great a design looks, it won’t make up for the fact that its contents may be rotten.

How do wireframes help? By showing us what content we need, and roughly how much space to devote to each section. Wireframes should thus flow directly from your site’s content strategy, showing the hierarchy of content on each page and how each page fits into the overall strategy. When writers are working from such a map, reaching their goals becomes that much easier.

That’s not to say you need to start with the homepage. In fact, many believe that your homepage should be the last thing you create.

So where else do you start? With the content that matters most — i.e., that which contributes most to your project’s core goals.

Does this website hope to boost online sales? Then you’ll need to make sure each product gets a well-written, on-brand description, plus all the specs a potential buyer would want to know. Which goes a long way toward structuring the CMS fields you’ll need for your products Collection!

Is your site part of a bigger rebranding? Make sure you know how your project fits into the rebranding, and that you have all the assets you need to communicate this new company identity.

You don’t have to do all of the writing at once. Instead, focus on making sure your UI is understandable at a glance, if only in terms of what will go there.

For example, you can just have a few headlines to orient people to page content, then fill out the rest with placeholder fonts like BLOKK or the Flow typeface. Make sure each section is labelled to show where content will go so that a client doesn’t get distracted by the filler content.

Content shapes design

Content encompasses everything of substance on a website. Whether it’s a video explaining a product, animations showing how an app works, or the about page for a nonprofit, each element is there to communicate a message or tell a story. You don’t need to have all of this content on hand before you design, but it certainly helps.

We’ve already discussed how a wireframe can shape content. But this can also work in the other direction. Once again, you don’t have to have all content completed. But if you have an outline of everything you want to include, you can create a sitemap and wireframe based on that outline.

Even knowing the types of content the website will require will help you come up with a sitemap and wireframe. This content doesn't need to be fleshed out, but knowing that there'll be a blog, a contact page for customers seeking quotes, and a page about the company’s history will help you figure out how everything needs to be structured. A sitemap breaks a website down to its most basic components and a wireframe gives more detail of what each page will contain.

But if you do have fleshed-out content ready, bring that content into your wireframes to see how it fits. If the content on hand exceeds the dedicated space, you may need to further divide it. You can then add this additional page to the wireframe and tweak the content organization. This is way easier on a designer than doing it after the fact.

Know your SEO

Search engine optimization shouldn’t be an afterthought. So before you sit down to start sitemapping and wireframing, arm yourself with a list of the keywords a client wants to target, and shape the structure and organization of the website and its content accordingly.

The wireframing stage can be a great place to start your SEO work because you can do it without all the distractions that come from fully developed content. Without all those words on the page, you can focus on key SEO elements like headlines, meta tags, and navigational elements. These SEO-ified wireframes can then serve as a great outline for the creators of the final content.

When you put in the work beforehand, the process gets easier

A sitemap and wireframes lay the foundation for a website. When you’ve prepared and put thought into the site's goals, architecture, and UX, you'll have a purpose-driven process. When the path to success has been cleared of obstructions, it makes for a quicker journey.

Why is content important?

What helps people, helps business.

–Leo Burnett, advertising legend

Content is what gives a website meaning. It draws people in and allows them to understand a site’s purpose and take action. It answers the potential customers’ questions.

Content is like an engine — without it, all you’ve got is an empty, useless shell.

Content is the words that tell the brand’s story, videos that show how a product works, and blog posts that explore ideas. Content shouldn’t be an afterthought or a jumble of slick sales speak. Our sites perform better when we’re thoughtful and measured about what our content needs to communicate and how it works with the design.

Content and SEO are mutually beneficial

Organizations who can't match up in content creation and promotion may find themselves losing out to content marketers who learn the basics of SEO.

–Rand Fishkin, founder of Moz

Content acts like a lighthouse for web crawlers — it signals a site’s relevance and provides the information web crawlers need to sort and rank a website. A content-first approach that prioritizes SEO leads to better search rankings and a better user experience.

SEO should not be heavy handed. Mashing phrases and keywords together can result in writing that’s forced and confusing. Content needs to be useful and authentic while still providing what web crawlers need to rank a site.

Research is the key to writing content that’s search engine optimized. Spend some time checking out related websites and journals. Talk to the client and other subject matter experts. Find out what words and phrases are commonly used.

An online keyword tool can generate words and terms that won’t immediately spring to mind. Google AdWords Keyword Planner and WordStream are great resources to research relevant keywords and phrases.

If I were writing about something I know little about, like fly fishing, the Google Adwords Keyword Planner would be a huge help. Some terms are no-brainers, like “fishing rods” and “fishing reels.” Others, like “fly tying supplies” and “fly tying materials,” aren’t ones I’d think of on my own.

Pay attention to the “Avg. monthly searches” and “Competition” columns. Keywords with low competition, but high search volume, like “fish flies” in the above list, can do a lot to boost your organic search ranking if properly targeted in your site content. And just because there’s a lot of competition with paid advertisers doesn’t mean you should ignore these phrases. Weaving them into your content will boost its relevance.

Just remember to be picky about what phrases and words you pull from these tools. Make sure your content remains useful and clear. Have the client or subject-matter experts review the search-optimized content before placing it in the design. Be sure what you’ve written is accurate and in a voice that suits the site.

Content should be the foundation of design

When we know a website’s end goals, we get a picture of the content that’s needed to meet those goals. Take a look at existing content and see if there’s anything missing or unclear.

Organizing this content will inform what goes on each page and makes creating a sitemap a lot easier. Working with a well-defined sitemap can save your team from useless designs and wasted time. Starting with must-have content and a sitemap will help your team see how the different types of content fit together and how users will interact with and navigate the site.

A content-first approach brings together designers and writers. Requirements and limitations in either area will affect the work for each of these roles. Content creators and designers are empowered to produce stronger work when they share a common goal and understand how all the pieces work together.

Model your content before you write it

“But I’ve already made a sitemap and wireframes. Why do I need a content map?”

Because so far, you’ve done everything right! Why stop now?

The same way a sitemap helps us visualize the flow of navigation, a content map gives us a guide for the flow of content, especially in a CMS. Content maps show us the specific content that goes on each page and how these ideas relate to the larger whole. The information architecture will have a more solid foundation when the content has already been organized.

If your design has any sort of web-app–like functionality, or if you have jumble of unorganized content, a content model can help make sense of it. It can help you refine your information before you craft a single headline.

A content model should start with a macro version that shows the main types of content without any related details. Let’s say that we have website to sell books and there’s going to be a page dedicated to new releases:

This macro view shows us how each of these components is going to fit together. When clicking on a title of a new release, we’ll get a page with the specific book, as well as the genre, author and publisher. Let’s say that we want to take a closer look at each of these blocks of content and the types of information and elements they would contain. We’d expand upon each of these in a micro content model.

Now we can see the further types of content needed on each page, like the author biography on the Author block and the background information for a given genre. Creating a micro content model also shows us other opportunities for content, like book recommendations for each genre.

How content modeling supports your CMS design work

Now, I know what you might be thinking: yet another disposable artifact from the design process! But I'm here to assure you, your model is anything but disposable.

In fact, doing the work to model your content will pay off big when you start building your CMS Collections. That's because the details you add in your macro model translate directly into fields and/or Collections in Webflow CMS.

For example: Let's say you're building out the site modeled in the above diagrams. You create a Collection called Books, and start assigning it Fields. "Hero image" obviously maps to an image field. Title will be captured by the name field. Genre, author, and publisher all show up as macro-level content items, so they'll each require a Collection of their own, which the Book Collection can reference via reference and/or multi-reference fields.

Handy, right? For more on this, check out our article, "Why your design process should start with content." 

The who and what of creating content

We’ve emphasized how important it is to have some idea of the content before moving any pixels around in the design. But who will create this content?

In the best-case scenario, your client has a team of writers. These word nerds knows what needs to be communicated and how to connect with the audience in a language they understand. They’re topic experts and masters in the craft of writing. But this dream of having a team of writers is often just that — a dream.

Not all clients have the resources for an in-house content team. A small business owner may take this responsibility on themselves, or delegate it to a family member who’s taken a creative writing class or two. Unfortunately, this can mean content falls short in the quality department, causing an entire project to suffer. Start your projects with an audit of existing content (if any) and assess its quality.

However content is created, don’t push a single pixel without at least a rough framework of the content. Without a clear idea of the substance and goals of the website, everyone will be unhappy with the process and its outcome.

Expectations for the quality of content need to be clear. If your client isn’t a writer and doesn’t have one available, you have a couple of options. Either leave room in the budget to create the content yourself (if this is a skill you have), or hire a professional writer that you trust.

But what about that client who doesn’t recognize good writing? What if they fancy themselves a writer and they won’t budge?

My trick has been to show them content that works. Find a well-written competitor site and point out the concision of the copy and the strength of its calls to action. Show your client the keywords and phrases woven throughout the site making its SEO game strong.

Someone can be a savvy business owner and not know what quality writing looks like. Help your clients understand — with kindness and respect — the value of good copy and its potential impact on their revenue and brand awareness.

Include the client in the writing process

If you’re a confident writer and editor, include your client in the content creation process.

Discussions about the type of content needed for the project is a good starting point. Start at the macro level: What information are users looking for? What do they need to know about the company or product that’s not obvious? What are the misconceptions an audience has? A bulleted list of these topics will help inform the categories of content you’ll need to work with and/or create.

Interview the client about the specifics needed to answer these questions — and take notes or record the session! A client will likely explain things better when they’re talking versus feeling the pressure to explain something in writing. Their phrasing can be very useful to the final content, so pay attention. If a client is eager to contribute their own copy, have them send you short paragraphs or sentences that explain the main sections for each block of content. You or the writer can assemble the fragments into strong content packed with search-optimized and attention-grabbing headlines.

Some clients will have adequate writing skills. If there’s time, workshop what they’ve written. If they tend to be wordy, work with them to be more concise. Or maybe they’re hung up on marketing cliches? This is also manageable!

Any writer can become better under the guidance of a skilled editor. If you’re comfortable in this role, go for it. Just make sure you’re being compensated for your time.

Content keeps people engaged

Content is why people visit a website. The design exists to present this information in an organized way and to add functionality and style. Having content developed early in the process means the design that can be molded around it. This focus allows the design to highlight the content and leads to an improved user experience.

Brainstorm and build a moodboard

Moodboards are a collage of images, text, and other visuals that help us better understand a brand. This is an informal assemblage — there's no intrinsic need for hierarchy or organization. But when viewed in gestalt, patterns and themes emerge. Putting a moodboard together helps you communicate visually what can otherwise be difficult to describe.

Before you start, have the client put together a list of words or phrases they associate with their brand. This should be a quick exercise focusing on the immediate feelings or emotions the brand stirs up. Think Coca Cola, Apple, and Whole Foods — what words do these brands bring to mind? Your moodboard should start with its own strong list of ideas and emotions.

Imagine you're putting together a moodboard for an organic soap company. What would the emotional identity of a brand like that be? You'd most likely put together elements that evoke nature and a DIY aesthetic. Maybe images of flowers, swatches of pastel colors, and blocks of handwritten text. But depending on the brand’s specific goals, vision, and voice, you might find the visual building blocks need to be very different — it all depends on what you and your client work out together.

Having these different visuals in one place lets you see larger themes and generate ideas. Themes can be tough to communicate, given their abstraction — moodboards help the client and the designer visualize a brand’s essence and how the design will communicate it.

Create a style tile

Let's say you wander into a fast food franchise in a country where you didn't speak the language. Whether it was Burger King, McDonald's, or Kentucky Fried Chicken, you’d know immediately where you were.

Even if you couldn't read the logos, you’d recognize typography, graphic design, and colors. The interior design of the restaurant would also be a tell. Countertop tiles, furniture, and wall colors are all part of the brand’s visual identity. A website’s design should conjure this same brand recognition.

A style tile is a collection of visual components used for constructing a design. They take the broad strokes of the moodboard and transform them into actual building blocks.

A style tile provides a visual guide for the website’s various design components including:

• Logos
• Headers
• Body copy
• Buttons
• Color palettes
• Patterns
• Other brand-related visuals

Optional: words and phrases that evoke the emotional aspects of the brand

In collaboration with the client, refer back to the words that inspired the moodboard and any other thematic ideas it may have generated. Words like “elegant,” “trusted,” and “quirky” all bring to mind very different things. Consider how to visually manifest those concepts using the tools of your trade: color, space, type, etc.

Then create (at least one) style tile using the moodboard and the list of words to inform a collection of colors, typography, buttons, and other navigational elements that could potentially become part of the design.

You might even find it valuable to build out multiple iterations of the style tile, both for your own iteration and, potentially, to give the client options. Sometimes showing a couple ideas you don’t want can lead clients in the right direction. Just know that you should be ready to work from any style tile you present!

Clients want to be a part of the process. It's tempting for designers to put on the captain's hat and plow full speed ahead. After all, you're the expert, right? When it comes to design, yes. But your client is the brand expert, so build in time and space to hear their ideas.

When clients know their input matters, they'll be happier with the final product. Style tiles and moodboards create an opportunity for clients to be heard and watch their feedback shape the final website.

Check out our free responsive style tile if you need some help getting started.

Build an element collage

Do you have cool ideas for interactive elements or other dynamic wizardry? Element collages are a good way to collect these in one place and have them look and function as they would in the final design. Whether it's a button with a fancy hover state, or a creative way of revealing different types of content, element collages show the client how things will work when the site is live.

Element collages present various slices of a website's functionality in semi-isolated states, which can make it difficult to imagine how they'll look in a more fleshed-out layout with actual content. Element collages are helpful, but don't get too focused and spend too much time on features that may not make the final cut. Ultimately, element collages are probably best suited for use as a sort of personal scratchpad, where you can add interactivity and animation to flesh out elements from your style tiles and/or moodboards, rather than as a communication tool with clients or coworkers.

Start designing

The look, feel, and visual elements have all been approved. Now it's time to start laying out the pages and integrating content.

A style tile gives you a head start. You’ll save time and have a more focused design rather than working things out as you go. There won’t be any surprises for the client because they’ll already be familiar with the graphic elements.

Style tiles are a good starting point, but you can always make changes if something isn’t working in the actual layout. That bright color scheme that looked so amazing may actually be overpowering. And that overly stylized logo may be distracting in a more minimalist layout. The only way you’ll be able to tell if these styles work is to apply them to the actual design.

During the visual design stage you’ll be:

• Laying out images, text, and other content
• Creating menus and other navigations components
• Making sure the content and design are working together to achieve the site's goals
• Refining design and content, and making changes as needed
• Integrating client feedback

But before you get to all that, you’ll want to translate your style tile work into real HTML/CSS for use on the site. I.e., to …

Create a living style guide

Most brands have a style guide. Any designer who’s been doing it for awhile has taken a deep dive into Dropbox and Google Drive in hopes of finding the most current version. Even if you do manage to find the latest version, things have likely changed since the guidelines were chiseled into the PDF (ugh).

The best way to make an easily updatable and findable style guide is to create a living style guide. A living style guide exists on the web, in conjunction with the site it serves to provide guidelines for. It’s usually a password protected page on a live website. Here, all of the styles live in one place, where they can be immediately changed and applied.

That’s the key here: when you alter your Webflow style guide, every element that shares the modified class will automatically update. For those of us used to defining a style change, then implementing it, then updating the guide, it’s a sea change.

Editing styles from the living style guide lets you make changes across the site. Feedback from a client can be quickly integrated and a living style guide shows the different visual elements in a design globally applied across the site. How to build a living style guide in Webflow will show you how easy it is to create one.

From a kaleidoscope of ideas comes a clear vision

Improve the web design process. Communicate ideas early and more clearly. Do the prep work — map the content, construct wireframes, and build the visual elements. It's tempting to skip steps, but this will only create complications later in the project.

Be meticulous in your work and in communicating your process. Vagueness leaves room for unmet expectations. When everyone understands the project’s vision and goals, they’re more likely to be happy with the final product.

Starting from a mockup?

If you started mocking up your site in a desktop design app like Photoshop or Sketch, check out our article "From Photoshop to Webflow: how to turn static mocks into live websites" for detailed guidance and handy tips on that process.

Inspect the design

Before you get into testing the functionality, take a look at the visual elements of the design. Are you using the right final-final-final logo? Are there new photos to swap in? And did you increase the font size on the calls to action?

The design process almost always involves a wealth of feedback and suggested edits. It's easy to miss something. But it's these small details that will either delight or frustrate your audience when when the site goes live. So keep a running list of edits and changes — and make sure they get resolved before launch.

Check for inconsistencies. Font styles and sizes should be the same from one page to the next. It’s easy to overlook an incorrect font or body text that’s a point too big. After all, you’ve been staring at this design for a long time.

Have someone else look the site over for inconsistencies and details you may have missed.

At this stage, decision makers should be happy with how the design looks. It’s normal for there to be minor tweaks and edits, but if there’s been good communication and collaboration, there shouldn't be any major changes at this point.

If you’re getting more time-consuming edit suggestions, evaluate their potential value before you tackle them.

Will these changes improve the user experience? Will they delay the website's launch?

It's okay to push back if what's being recommended won’t enhance usability or improve a site’s visual aesthetic. Stay professional, but be clear about why some edits aren't necessary — especially in the final stages of the design process.

Pay attention to the details

There are so many details to think about and check when it comes to web design. Especially for a business or ecommerce site. It’s important to verify things like hours of operation, nutritional information on a menu, addresses, and phone numbers.

Ecommerce sites need to have accurate photos and descriptions for each product. It’s always a bummer to open a box of something you ordered, only to find it doesn’t look at all like what's on the site.

Make sure a stakeholder who’s a brand expert for the company and its products has a look before a site goes live. Ask your client who should do this review, and make sure that reviewer is well-aware of the timeline.

Test the functionality of integrations

Integrations can include shopping carts, newsletter sign ups, and quote request forms — and so, so much more.

Test any part of the site that requires data collection (and make sure you’ve set up SSL!). If a form submits to an email address, make sure it’s the right one. And double-check email addresses with the client.

Forms should have clear instructions and fields. It’s a good idea to have someone who’s not involved with the company or the project fill out a test form and give feedback on their experience.

Same thing with the checkout process — have a couple people go through looking for glitches and ambiguity. How many of us have abandoned a shopping cart because the process was too complicated? Everything from shipping options to payment choices should be checked. Make sure everything is clearly defined and easy to navigate.

Before launch, find out what kinds of electronic payment your client plans to accept. Do they have PayPal or Stripe set up already? If not, make sure they tackle that — gathering last-minute info to get an account set up can be an annoying delay.

Check your links

Links are a major chunk of functionality, and you need to check them all. And don’t forget to create that 404 error page — make this part of your standard protocol. This one can be easy to overlook.

Manually checking every link can be overwhelming. Good news — you don’t have to! Use a link crawler tool like W3C Checker or Screaming Frog. Both will quickly scan for broken links and make sure the content is accessible.

Ensure your design is cross-browser compatible

Your design needs to function, look, and offer a similar user experience in every browser. Each browser has its own advantages and limitations. If your design only works well on one, visitors who use others will be frustrated.

You could download all the popular browsers and test your design in each, but that would be time consuming. There are cross-browser compatibility tools that make this step quick and easy, like Browsershots, Browser Sandbox, and Browsera.

Check design functionality on different devices

People use different devices throughout the day to access content. Someone’s out shopping and checks for nearby coffee places on their cell. Later, they order shoes on their laptop while catching up on Netflix. Your design should be seamless on every screen. The practical applications of responsive design result in websites that offer a more uniform experience.

Check that navigation, buttons, and other interactive elements remain functional on different screen sizes. Test the design on different devices and network speeds. If it’s slow to load, see if your high-resolution images and animations are affecting the site’s performance. Excessive dynamic elements could also hinder usability.

It’s not likely you can get your hands on every major device for testing. Surprise — there’s several apps for that! Browserstack, Google Mobilizer, and other tools let you see how your site will function on different mobile devices. And, once again, Webflow lets you preview your site on different screens as you build.

Just note that no emulator perfectly reproduces every on-device experience, so be sure to actually test on as many real devices as possible. You can’t have every device on hand, but your friends, colleagues, and clients can lend a hand here too!

Take a look at the content

The more you leave out, the more you highlight what you leave in.

—Henry Green, novelist

Rewriting a paragraph here or a sentence there (probably) won’t have a major impact on the final design. Hopefully you had — at the very least — a rough draft of the site’s copy before you began the design process, and iterated on it throughout your process. Designing with the content in mind allows you to make thoughtful decisions. Tweaks to the copy can always be made later, even after the site goes live.

But that doesn’t mean you should skip a thorough content review right before launch. A simple typo or grammatically mangled sentence can seriously impact audience perception, so make sure your words are as polished as your design.

Make sure your content is useful and easy to scan

As sad as content creators might be about this, people don’t come to a site to read it like a book. They wanna get in, get the information they’re looking for, and get out. Delight them by making this possible.

Here’s how:

• Use descriptive headers
• Write sentences with simple structures and limit paragraphs to three or four sentences
• Group related ideas or items together in bulleted lists
• Get rid of copy that doesn’t add meaning
• Check that your copy is concise, engaging, and consistent with the brand’s voice
• Proofread for grammar and spelling errors
• Get help from a second and third set of eyes to help catch possibly embarrassing mistakes
• Ask a skilled editor to look over your copy

Great news: more tools! Hemingway, Grammarly and Ginger can help you with the editing process. They’ll also teach you some writing skills along the way.

Practice good SEO habits

Hopefully some well-researched SEO keywords and phrases have been carefully woven into the content. You should also make sure the code has proper heading and paragraph tags throughout. Meta titles and meta descriptions should be included for each page.

A meta title should define the focus of the page. Only use relevant keywords, especially at the beginning of the description, and keep things under 70 characters. A meta description should be a bit longer, but keep it under 160 characters and write in a voice that connects with your intended audience.

When your website appears in search results, it’s the meta title and description that (usually) appear. This helps your audience know they’ve found a site that matches their needs. Google uses the meta title to rank your content properly, so it should reflect the essence of your page. H1 tags also help with ranking and make it easier for web crawlers to determine your content’s purpose. Make sure those tags are specific.

Meta descriptions don’t really matter to web crawlers, but they’re still important. A good meta description tells someone they’ve found what they’re looking for. Use the same primary keywords from the title somewhere in the description. Google will bold words used in the search query that show up in your description. This also helps your audience see that your site matches their search.

Ready for liftoff

When everything has been tested and reviewed, it’s time to reveal your hard work.

With a bit of patience and a lot of preparation, your design is ready to go live. Making time to review and test your site is an important step in your design process. Don’t let impatience — yours or your clients’ — push you to launch before it’s ready.

Be sure that your work reflects the thought and dedication you’ve put into it. Use the lessons learned to make the next project you tackle even better.

If you’re a freelancer, you might typically leave this step to your clients. Totally fair if that’s the nature of your contract. But by guiding and supporting your clients on their website launch, you’ll not only deepen your value to those you serve, but also give them a great reason to keep you on retainer. Which is an excellent way of creating recurring income.

If you’re an in-house designer, on the other hand, chances are your marketing team has these bases covered. But I can personally attest that marketers are pretty much always open to new launch ideas. Plus, they’ll almost certainly be coming to you when they identify opportunities for iterations, tests, and refinements, so you might as well be prepared.

With all that in mind, here are a few tips to help you get the most bang for your upcoming launch.

Consider the “soft” launch

This is the way the [website launches]. Not with a bang but a [whisper].

–Me, paraphrasing T.S. Eliot because it amuses me

Back in 2016, a wine salesman friend of mine invited me to dinner at an San Francisco restaurant called The Progress, sister to the Michelin-starred State Bird Provisions. I knew it was going to be a great experience for numerous reasons, not the least of which is that it’s just how my buddy rolls — but I had no idea what I was in for.

When we walked into the place, it was dead empty. Not a great sign for an SF restaurant, typically.

But then my friend casually tossed over his shoulder: “They’re in soft launch. Friends and family only tonight.”

And suddenly I felt like such a special little snowflake.

Next thing I know, we’re being seated around a long, beautiful, reclaimed wood table. (I know, I know; my eyes are rolling too.) Right beside the restaurateur himself. Who then proceeds to inform us what we’ll be eating. And drinking.

I had such a stupid grin on.

I write this not to humble-brag, but to highlight the power of a “soft” or “beta” or “quiet” launch.

The power of beta

That night at The Progress, I felt in. Like I was suddenly one of the cognoscenti. Rubbing elbows with restaurateurs, food critics, the movers and the shakers.

All an illusion, of course — but a seductive and immersive illusion nonetheless. So powerful that I’m still (obviously) talking about this restaurant. Not only because of the experience itself, but also how epically good the food was. I’ve not darkened their door since, but I know I’ve sent them dozens of customers in my place.

I’m just little ole me. But they turned me into a powerful little marketing machine.

And the good news for those who build for the web is: you can harness this power too.

Create scarcity

The reason that soft/beta launches work so well is that they create a sense of scarcity, turning a typically mundane experience into a rare, sought-after one.

This has 3 mutually reinforcing effects:

1. The haves (those with access) feel acknowledged and/or uplifted — i.e., delighted
2. The haves thus want to communicate about this rarefied experience, complementing your other marketing efforts with organic word of mouth
3. The have-nots (those without access) suddenly want access even more than before, or for the first time

This is all perhaps best illustrated by the launch of Gmail years ago. I mean, when you think about it, a new email app isn’t exactly what you’d call exciting, right? It’s a utility — a must-have, like electricity.

To make a thing like that exciting, well … you’d need a truly revolutionary design. And/or some artificial scarcity …

Now you may be thinking, “Wait, John. I’m just building a brochure site here. All we’re doing is presenting information. How can we create scarcity for that?”

The answer to that lies beyond the site itself, in the information that you’re presenting. Few sites exist just to present information. And even if that’s all your site does, you’ve got opportunities for the creation of scarcity — so long as the information is new, unique, or even just really high-quality.

Writing an ebook? Give select people early access and ask for blurbs. Presenting study findings? Second verse, same as the first.

And then there’s something you can do for any site type:

Seek feedback

Whether you want to refine your visual or interaction design, clean up your content, or just get user input on your overall UX, you can make good use of your pre-launch planning time by soliciting feedback.

In many ways, this provides the same benefits as creating scarcity. You’re still honoring a few select people and giving them the chance to share their experience with others. And if those people are experts in a field related to your website’s purpose, their sharing can help drum up a little hype for your launch. And if they’re really impressed, you might even get a shining testimonial or two for the site!

But that’s not your purpose for seeking pre-launch feedback. It’s just icing on the cake. The real benefit comes from actually making use of their feedback to improve your website.

And if you do make good use of their input, they’ll likely be even more inclined to give you a supportive shout-out when the real launch begins.

Invite responsibly

One thing to keep in mind for soft launches: don’t just invite anybody. Your Uncle Steve, fun as he’s always been, probably won’t help make your new portfolio launch a splash — unless he’s big in the design world, of course.

Instead, stay focused on your niche. And aim high. Prioritize the people who are most likely to have a big impact, should they choose to comment on or share your new site.

Just don’t be sleazy about it. Steer clear of cold emails, and instead build connections via the various social networks. Of course, a terse “hey @influenceyguy check out [your website here]” will likely get you nowhere. Ditto for jumping on a related thread with a link to your site — unless it truly adds to the conversation.

Build networks first. With a solid network in place, chances are the right people will naturally notice what you’re sharing and choose to share it of their own accord. And even if they don’t, when you later share the site directly, they’ll at least have some context for why.

The web runs on a reputation economy. Ignore that at your own peril.

Skipping the soft launch? Try some teasers!

Even if you’re not going all-in on a soft launch or closed beta, you can start building hype around a (re)launch simply by teasing what’s coming.

You can easily share screenshots of in-progress UI work, offer glimpses of that amazing homepage animation with GIFs, and write positioning statements explaining what you’re working on — and more importantly, why — on Medium. Or any third-party publication in your space.

Launching a new restaurant and its site? Hit up local food writers and magazines. A new web app for editors? Make sure the various Facebook groups for editors know it’s coming.

You get the picture: share enticing content with those likely to enjoy it, and you’ll build hype.  

Going public: the official launch

Launch day is, of course, when it’s time to start firing your marketing machine on all cylinders.

If you’re in the tech space, your launch day activities might include, but shouldn’t be limited to:

• Announcement email to all current users — and leads
• Posts on all your various social platforms (Twitter, Facebook, Dribbble, Reddit, etc.) — and seriously consider promoting these to broaden your audience! Also be sure to mention influential individuals and brands who helped out, whether directly or indirectly, such as by providing a testimonial, feedback, etc.
• Posts on aggregator sites like Designer News, Web Designer News, etc.
• Longform publication on your dedicated blog
• Longform publication on Medium (and/or any relevant 3rd-party publications)
• A post on Product Hunt — check out their guide to posting on Product Hunt for detailed info

If you’re not in the tech space, several of the platforms mentioned in the above list may be irrelevant to you. But the web is so sprawling just about any niche community will have its blogs, forums, aggregators, etc., so just plug in the right names and places for you.

Either way, the basic principle still holds: communicate to your audience where they are, in as many ways and places as you can afford to.

But spreading the word isn’t the only thing to worry about on launch day. A few other things to consider:

Fear the crash

All too often, a new product, service, or website will launch to massive fanfare — only to crash in the face of unexpected traffic.

In larger organizations, you can typically count on engineering to cover this concern. With a smaller organization, there’s usually less concern for a crash, but you can always contact your hosting provider for tips and help.

If you’re involved with marketing, you can help defend against crashes by carefully considering announcement timing, and by batching your announcement emails. Tools like MailChimp will automatically give you the option to batch your sends, cutting down the likelihood of millions of visits coming in at once.

Of course, nothing’s perfect, so you’ll want to also have plans in place for dealing with a crash, should it come.

Keep a close eye on performance

Beyond the basic performance metric of uptime, you’ll also want to monitor what people do when they get to your site.

Google Analytics and a host of other tools can provide real-time and after-the-fact data on pages people visited, multi-page flows they explored, even conversion rates — all of which can do a ton to inform all kinds of decisions, from how well your site presents and organizes content, to how well it appeals to your various audiences.

Just keep in mind that the sample data you’ll receive on launch day may be skewed. A massive amount of visits can bring a lot of people who aren’t good fits for your offering, which would negatively impact conversion rates, retention, etc.

So while you may notice things you need to fix ASAP — like that typo on the homepage — other data may need more time to normalize before you make a change.

Keep an even closer eye on public response

Not all data comes through Google Analytics. Some of the most important and telling feedback you’ll receive will come from public tweets, comments on Product Hunt, Facebook conversations, etc.

So take note of what the people are saying — positive and negative — to understand which parts of your messaging, product/service, and design work, and which don’t.

If people seem confused about feature X, revisit the way you message it. If folks seem particularly excited by something you didn’t really highlight in launch content, maybe that aspect needs more limelight.

People may even literally hand you amazing content. I can happily confess that more than one of my best-performing lines of copy came directly from customer’s mouths.

Don’t forget to celebrate

With all of the above said, don’t forget to leave some time for celebration. Those bottles of bubbly aren’t going to drink themselves!

After the launch: on the web, your job is never done

Flash forward to the day after launch: Your champagne hangover — which you can now attest is the worst kind — has faded, and you’re reviewing yesterday’s numbers.

Hopefully, you’re wowed by the response and the effectiveness of all your marketing. You might also be sorely disappointed.

But however you’re reacting to analytics, the important thing is to focus on your next play.

Review your most important metrics

You’ve known since long before launch what metrics you wanted to move. So look all the way back to your project’s goals, defined as the first step in the design process, and take a cold, hard look at how the relaunch affected those numbers.

If you did meet or exceed a goal for a particular metric, congrats! You achieved your goal. Now look for ways to do even better — or alternative goals to consider.

If you didn’t meet or exceed a goal, it’s time to double-down on that goal. Perhaps your hypothesis for how to move the key metric was faulty. Or perhaps it worked, but not as much as you thought it would.

Consider the following hypothetical scenario, where your key metric was conversion rate:

Goal: Increase conversion rate to 15%

Hypothesis: Current email-only signup flow discourages people who don’t want to take the time to complete our onboarding process.

Proposed solution: Add an option to sign up via Facebook. Then use profile info to pre-fill several fields in the onboarding process.

Result: Partial success. Signups improved to 12.5%.

Partial success isn’t the worst thing, but obviously you’ve got room to grow. So start hypothesizing why the addition of Facebook signup didn’t work as expected. At this stage, it’s okay to make some gut checks for possible reasons.

Hypotheses: Facebook signup option not visually obvious enough. Facebook signup seems too invasive. Too many permissions required for Facebook signup. Users want more social signup options. Our biggest audience is actually on Twitter.

Hopefully some of those hypotheses can be dismissed out of hand. For example, if your biggest audience is actually on Twitter, building a Facebook signup option probably didn’t make a lot of sense, right?

Your other hypotheses will probably take some review of available data. Heatmaps should be able to tell you if the Facebook signup option wasn’t obvious enough. An analysis of drop-off points in the signup flow might tell you whether the option itself is unattractive — for instance, if people clicked the “via Facebook” button, but didn’t complete, then maybe you were asking for too much data. If they saw it and didn’t click it, maybe it’s the wrong platform entirely!

In this case, adding the Facebook signup option seems to have worked, at least somewhat. So adding more social signup options might help.

But the data may show that signups increased without significant help from that option. In which case, it’s time to go back to the drawing board to figure out what really helped.

Once you’ve isolated the causes behind changes in key metrics, you can start coming up with design and content tests to address the issues.

If you redesigned, analyze cautiously

Incremental change is better than ambitious failure

–Tony Schwartz

The last point of the previous section highlights a significant issue to keep in mind when reviewing post-launch analytics for redesigns, rebrands, and relaunches.

When you’re starting from scratch, all your data is clean and new. There’s nothing to compare it to — it instead provides the baseline for future testing.

But if your latest launch was triggered by a reinvention of any kind — rebrand, relaunch, redesign — you’ve got some messy data on your hands.

You’ve changed so many things that it’ll basically be impossible to attribute any upticks or downticks to any one element, other than the overhaul itself. It could be that new or revised headline. It could be the revamped signup form. Or it could be all the new elements, working together, in exactly the kind of synergistic harmony you dreamt of.   

Thus, choosing to redesign is functionally equivalent to starting from scratch. At least from a data analysis perspective. It either worked or didn’t work, and you won’t really be able to draw any conclusions about why, relative to the previous design.

Iterate, iterate, iterate

Measure twice, cut once

–Your grandpa, probably

Of course, analysis is meaningless without action.

So once you’ve identified the metrics you need to affect, and the changes you think will address those metrics, it’s time to start iterating.

Note: I did not say redesigning.

Because you don’t want to just throw the baby out with the bathwater. Your current design provides a baseline. To understand what will work better or worse than that baseline, you need to create an alternative approach and test the alternative in comparison to that baseline. To do that, create a simple this-or-that test: split your traffic between the two pages, and see if your proposed fix actually does better.

But whyyyyyy, you might be thinking.

And I get it. We’re wired to see problems, then fix them, based on what our gut tells us is “right.”

But let’s say you go ahead and launch your redesigned signup flow and retire the old one. Everything down to your gut tells you the new solution is the way it “should” be.

And the redesign does worse. Gut 0, World 1. Lots ventured, nothing gained.

The stakes aren’t so high on your average landing page, especially if you’re working in Webflow. You can iterate, launch, then revert fairly easy with our version history feature. But if you’re working on a signup flow, chances are that “from the gut” redesign ended up being fairly expensive and brought no return.

So test first, push second. After the results are in.

To explore these two distinct approaches — and the seismic shift in process we’re currently experiencing — I’ll borrow Jen’s own terms, but propose a different view of her #howidoit tag for the second approach. And then I’ll show how Webflow can be used for either approach — but how it truly thrives in an emerging take on the design process.

The “normal” process

In Jen’s view — and I’d venture to say, the rest of ours too — the “normal” web design process looks something like this:

1. Plan.
2. Meet.
3. Wireframe.
4. Email PDFs.
5. Talk.
6. Revise wireframes.
7. Draw PDFs of “mobile”.
8. Photoshop.
9. PDF.
10. Approve.
11. Build.
12. Ship.

Much like Al-Anon, it’s a 12-step process. (And if I didn’t think it wildly inappropriate, I’d make some joke here about analogous numbers of failures along the way. But I won’t.)

Now, we could dig in and unpack each of those 12 arduous steps, but I’ll save us all the flashbacks and abstract a bit. In essence, the “normal” web design process is a circular one, where designers repeatedly:

1. Strategize
2. Mock up 
   Presumably in Photoshop or Sketch, but what matters here is that whatever format it's in, it’s not HTML/CSS/JS.
3. Share
4. Review
5. Revise
6. Repeat

Until the site is approved, built, and shipped.

Noteworthy elements of the normal design process

To understand why there’s a growing dissatisfaction with the standard design process, it is worth exploring a few of the less-than-ideal elements of said process.

The “normal” design process is desktop-first

Whatever a “desktop” even is these days, it’s obvious that this process prioritizes the desktop, relegating “mobile” (aka, all the other devices, which frankly are becoming more widely used) to an afterthought: step 7 of 12.

Which is pretty darn odd — especially for an industry so driven by empathizing with our “users” and how they experience our work — when you consider that mobile is now firmly our primary tool for “consuming” the internet.

The normal design process is disposable, not recyclable

Another striking aspect of this “normal” process is its emphasis on the creation of artifacts that are:

• Disposable
• Abstract
• Static

In other words, we’re spending a lot of time drawing PDFs to act as conceptual models for the websites, apps, and digital products we’re building — rather than deliverables founded in the stuff of the internet: HTML, CSS, and JavaScript.

There’s an irony there. Here we are building for the most dynamic, interactive medium humankind has ever produced … and doing it all via static models grounded in rules that have nothing to do with how the internet works.

Most of which end up enshrined, at best, in our portfolio sites, and at worst, our trash bins.

Yay, fun.

Content is … nowhere to be found in the normal design process?

You might not notice this at first glance, because it’s an absence, not a presence. But where the heck does content — you know, the stuff most websites exist to contain — come into the process?!

It’s a total mystery. Which may help explain why designers (and all the other collaborators in the design process) are growing fed up with this “process.”

And turning to …

The new web design process!

Simmons quickly followed her definition of the “normal” process with a second tweet hashtagged #howidoit. But she might’ve well as tagged it #thenewdesignprocess.

Here’s what it looks like:

1. Plan.
2. Meet.
3. Nail content model.
4. Build on CMS.
5. Add real content.
6. Look.
7. Talk.
8. Pencil & paper.
9. Build.
10. Look.
11. Style visually.
12. Ship.

Still 12 steps — but it’s a whole different ballgame. Let’s take a closer look at how:

The new design process is content-first — or content-modeling first

Instead of leaping to an early visualization of the final website — as the “normal” process does with wireframing in step 3 — the new design process focuses on the content.

Note that it doesn’t start with writing the content, but with modeling it. I detail the content modeling process in Why your design process should start with content, but to summarize: content modeling focuses on identifying three things:

1. Required content types
2. Relationships between content types
3. Structure of the individual content types

As you model the content of your next website, make sure your content types and their structures meet the site users’ needs. So instead of thinking “wouldn’t it be cool if we had X content type?”, consider what would be “cool” from the user’s standpoint.

If, for example, you’re building a recipe website, users need:

• Recipes
• Ingredients
• Instructions

So as “cool” as it might be to have extensive histories for all the world’s major cuisines on your website, it shouldn’t necessarily be a priority since it doesn’t align with audience needs and expectations. It might offer a way to differentiate your recipe site from the stiff competition in that space, but it's not what you'd call table stakes.

The new design process uses real content

Instead of using carefully curated lengths of lorem ipsum to ensure beautiful, three-word headlines that never wrap, the new design process includes fleshing out the site’s database with real content as soon as possible.

This not only helps you identify design issues and edge cases (like overlong headlines) right off the bat, it also encourages greater empathy for the content creators your design should cater to.

The new design process leaves visual styling to the end

Perhaps surprisingly, you don’t get too deep into the visual styling aspect of design until just before shipping.

The benefit of this is that it allows design to be shaped by the content, instead of trying to shoehorn the content into the visual style after the fact. And since the vast majority of websites exist to present content that drives action, this approach places the emphasis where it should be: on the content and how best to present it.  

So … how does Webflow fit into this design process?

When I’m not writing content for Webflow, I run our various social accounts, including Twitter, so I excitedly quoted Jen’s commentary with the note:

Coincidentally, a superb way to work with @webflowapp CMS.

But in retrospect, I should’ve said, “Not coincidentally, a superb way to work with @webflowapp CMS.”

Because in reality, this is the ideal way to build websites with Webflow CMS. And it’s a process we’ve followed with a number of our creations, including Webflow for Prototyping, Webflow vs. WordPress, and even Webflow Experts.

That’s because Webflow CMS gives you a powerful, functional way to model website content that doesn’t (necessarily) involve a lot of spreadsheets and graphs.

Instead, you create the content model right inside Webflow via Collections, so you’re not only modelling the content in the abstract, but actually creating a working database that can drive every element of your website. That means you’re not creating “just another disposable artifact,” but a real deliverable — something that will not only guide the site’s creation, but also its long-term maintenance.

Once you’ve created the content model via Collections, you can start inputting your website’s real content, and start designing around it — at whatever level of fidelity you’d like, from wireframe to high-fidelity — immediately.

Even better, you can start clicking around your website to search for edge cases, opportunities, and to get a sense of the overall user experience. This is super-powerful because it lets you experience the content model in a concrete way, as the eventual end user will, so you have time to make adjustments to the information architecture and overall UX.

You also get a very real sense for the author experience you’re building.

When you’re building a CMS website, you’re not just creating an experience for the website’s visitors, you’re also creating a product for authors — a content management and publishing tool that should be grounded in the particulars of their editorial remit and style. Because you’ll be working directly within the CMS to not only flesh out the site, but also create its content, you’ve got a golden opportunity to build empathy with the website’s audience and its authors — the people who will be doing the real work of constantly creating, recreating, and refining the website.

For more on designing a great author experience, check out our 5 tips on designing for content creators.

Ready to see where Webflow could fit into your process?

Then try it. It's free to get started.