Way back when, I learned the (very) hard way how important a website process is.
See, for a long time, I didn’t have one.
I managed small website projects with long to-do lists, absolutely no expectation setting, and client communication that was entirely reactive.
To make an extremely long story short, I fell on my face and felt the pain for quite some time.
Then, once the hypothetical swelling went down, I recovered with full understanding of how it all went wrong.
I had to build a website process from the ground up.
Pause for reflection.
Since then, I’ve been a part of some absolutely killer teams that have consistently evolved and revolutionized website processes as we know them -- and I couldn’t be prouder of that.
But, at one point or another we’ve all been there.
We’ve either been promised (or it’s been you doing the promising) a project within a certain timeline and within a certain budget, and by week two, every single one of those promises have been broken in a big way.
If you have a couple of website redesigns under your belt, it’s pretty much to be expected, right?
The Dangers of Designing Without a Website Process
A lack of website process, or processes that are underdeveloped, will lead you to three common pain points:
A website that isn’t going to launch on time
A website cost that’s more than originally agreed upon
Writing WAY more content than you ever thought possible, in no time flat
Late, expensive, and exhausted is not what anyone is after.
But again, this doesn’t have to be your reality.
Understanding what a website process should look like can help you avoid disaster on future projects. Knowing the what, and most importantly, the why behind a process will help you move into your next redesign project with total confidence and a complete understanding of the journey you are about to embark upon.
Now, if that header has you thinking “huh?” you’re likely not the only one. We get that all the time.
We ask our clients to commit to a “pre-process” before we can accurately scope a website.
This helps us fully understand the ins and outs of every nook and cranny of your current website and what your goals are for a redesign.
I know that likely goes against almost everything you’ve come to understand up until this point (send the RFP, receive quotes, etc.), but remember, doing things the way you’ve always done them is going to get you the same exact results you’ve always gotten.
In this pre-phase, we aim to discover as much about you as a company and your website as we possibly can.
The goal is to understand what we need to build at a high level -- your goals, the structure that would be most appropriate for your users, and a design direction that reflects that.
While this sounds premature in a lot of ways, it serves a very specific purpose.
Most website redesigns are scoped based on your current website, not necessarily what you want to accomplish in a redesign. This is a mistake because if you’re redesigning, it’s likely because your current website lacks something (or a lot of things.)
With this in mind, the pre-process allows for true alignment on what the scope of a website should be.
At this point, you’re probably thinking, “ok, that makes sense, but how do we reach this alignment nirvana?”
I’m glad you asked.
To truly prepare for a website scope, you’ve got to analyze what your users are currently doing and then determine what you’d like them to do.
We do that using the following steps:
Illustrating Page Flow
Since you are building a website for your users, and not just your own personal preferences, you have to understand how your users have historically used your website.
By dissecting their patterns, you can start to encourage new behaviors that can help your users discover the information they need faster or convert on offers that can better help them in their journey.
During a website redesign, we typically illustrate a user’s patterns using a combination of user flows and sitemaps:
Sitemaps and user flows serve different purposes, but ultimately help a team plan for user behavior.
Sitemaps focus on how a user will navigate the site and the organization of those items that need to be included in the main menu and the footer and user flows visualize the path taken by a user to accomplish a task.
Not to be confused with what we do with wireframes, at this stage, we are focused on the identification of modules (page sections), not necessarily their relationship with other elements on the page. We’re simply determining what a user will need on a page to complete specific tasks.
Strategists, project managers, designers, and developers all contribute to these documents, which eventually, will help the team determine how many module sections need to be built for the user to efficiently navigate through the site and ultimately convert.
The research and brainstorming executed in the user flow exercise also helps us identify a proposed sitemap or navigation structure.
Not only does the sitemap deliverable capture what will be in a header and footer navigation, it also deep dives into the URL structure, primary keyword, and SEO title for each page within the navigation.
Creating Your Moodboard
Let’s be totally honest. The actual visual design is the part of the website process that everyone loves most.
I mean, it’s my favorite part!
But, in all seriousness, just like strategy, we have to have an equally as solid understanding of the visual direction of the project during the pre-process.
Enter the moodboard.
Moodboards are a compilation of colors, fonts, images, icons, etc. pulled together to convey a theme, feeling or style and allows for a lot of visual experimentation. Consider it an “outline” of sorts.
Here, a designer can really pull their thoughts together in terms of color, typography, image style, icons, and any website inspiration that was discussed during initial meetings.
This is a great resource for the entire team as key design elements can be found in one place in addition to the inspiration and reasoning behind them.
This is a designer’s single biggest point of alignment with a client and their own team prior to diving into mockups.
Speaking of mockups, that’s next!
Drawing Abbreviated Mockups
While the moodboard is an incredibly helpful tool to gain alignment and start the design discussion, it’s often not quite enough. You have to be prepared to satisfy the “I’ll know it when I see it!” urges.
So, from the moodboard, we go back to our user flows to create abbreviated mockups.
At IMPACT, we start by choosing two sections of the homepage to design in three different variations.
We only choose two sections at this stage so we can experiment.
We also specifically choose the homepage because in almost all cases it’s designed first because of its impact as the very first impression of your brand.
The homepage will set the standard for all subsequent pages.
In the two sections selected we capture, the header, the hero, and likely a persona selection section (note: this isn’t always the case, but is most likely, it will be dependent on each specific brand).
These sections hold a lot of weight for the user as they capture the user’s attention and really sets the tone and the look and feel for a brand.
Choosing only two sections also allows for the logical design of transitions from one section to the next.
Here, the designer is expected to experiment and really push the boundaries of a brand.
If they nail the design right-off-the-bat, great, but if they don’t, it starts a very valuable discussion on how far a client would prefer their brand to be pushed and what they would expect to see in the following design phases.
Often times, clients have a very difficult time articulating their design desires. This phase of the pre-process really provides invaluable insight to the client’s preferences, while supporting the discussion with strategic research.
Developing a Strategy Deck
This pre-project plan includes a defined strategy that includes extensive keyword research and a review of their current website analytics.
The focus is all about the user. We are looking to understand who is converting, when they are converting, how long it takes them to convert, and what types of hurdles are currently in their way.
Those hurdles may be obvious things like having the right modules in the right order on a page, but sometimes they are a little more elusive, like page-speed.
If it’s available for analysis, we’re going to analyze it and report on the findings.
This research is so incredibly important and valuable as it provides us with all of the information we could ever need to fully understand a client’s needs and determine the direction of the project as a whole.
Note: That is why we don’t actually scope a project until this point right here.
Once we have a full understanding of what the project should include, we include it and we can quote as accurately as possible.
This is the tough part.
Everyone wants a timeline and a price BEFORE you get started.
Whether you work for or with an agency, or you are working in house, timeline and budget are the number one concern and the first question asked.
But, as you can clearly see, quoting timelines and budget for a project in which you don’t understand the proper parameters is simply going to lead to a blown timeline and a blown budget.
Think on that, let it marinate. It’s a big shift in the way you’ve likely always done things.
Lastly in our strategy deck, we discuss a launch plan.
You heard me right. We’re talking launch plans before the project has even reached the very first stage.
If you’ve ever been present for a website launch, you know how incredibly exciting, yet hypertension-inducing it can be.
All of that stress comes from not having the proper process in place, and launches are different every single time.
New players are introduced late in the game (likely your IT squad), email could go down, you may forget a domain you thought you had, or you might not even know what a DNS server is. It’s incredibly stressful.
But, when you are aware of what you’ll need before the project starts, you can gain some major clarity around how it’s all going to go down and what you can do to prevent any issues from popping up.
By establishing this plan up front, launches are smoother and much more successful.
Now that we are in complete alignment and we know exactly what we want out of this project, let’s really get started.
1. Design Strategy
I know, we’ve done a lot of this work already in the pre-process, but we aren’t quite done.
Based on all of that research, the collaborative meetings and the final scope in the pre-process, we need to build out the documentation for each and every module section.
After quite a few trials and errors with our process, here at IMPACT we’ve chosen to build websites modularly.
Instead of focusing on page templates, we typically design section by section (or module), so that we can use them in any order, on any page, any way we or a client pleases.
Building a website this way allows marketers or anyone else on your team with limited development knowledge to create custom pages in minutes without needing to understand code or design.
Instead of going through the endless wireframe/design/develop loop, you have a full understanding of your site’s capabilities and what you can feasibly create on your own.
In order to accomplish this fully flexible website build, module documentation is the ultimate key. It houses everything you could possibly want to know about each individual element on your website.
Every single module on every single page lives in this document.
Each module includes what we call here at IMPACT, a page story.
Page stories are what a module needs to include, why it needs to include it (all of the strategy from the pre-process phase!), and what the module should be able to do from a functional perspective in development.
If there is any specific direction in terms of how the module should look on mobile, that is captured here as well.
Not everyone soaks up visual strategy (in other words, wireframes, which we’ll get into that in a minute).
So, this step really provides the why behind everything we are building in writing. For some clients, that’s a total game changer!
Usually created in Google Docs, our page stories allow many parties to quickly access information that is updated in real time.
Every member of the team can contribute their own expertise, articulate their ideas, and provide data-driven evidence backing up their declarations, all in one document shared with all major contributors.
We have found that this is the easiest and best way to ensure client/strategist/designer/developer alignment.
Based on the page stories within our module documentation, we handoff to design to create wireframes.
Wireframes are simple, visual representations of our module documentation.
Often they are black, white, and gray with no discernable imagery or styles to speak of. The point is to understand how elements on a page will relate to one another.
They help to establish a clear visual hierarchy of information and is our first skeleton of what modules on the page will actually look like.
Let me guess, you were expecting to see design here weren’t you? Slow down! You’re getting too excited.
I know, this seems a little backwards from what you’ve likely done before, but this is super important and entirely non-negotiable.
Often times, content is saved until the very last moment and it’s a mad scramble to get everything together, write some new paragraphs, and then throw it all into a brand new site just to never look at it again for two years.
Just like you don’t want to design without strategic analytical reasoning to back it up, you don’t want to design without utilizing context from finalized copy.
You shouldn’t be writing to fit a design, you should be designing in order to best aid and present the message and value proposition on each and every page.
This requires content to precede design in the website redesign process.
As a designer, I can sit here and confidently tell you that the best design in the world is going to fall flat every single time if it doesn’t not match the final content.
That being said, content isn’t a last minute step. It’s a primary, essential step to a great website that you should absolutely put at the top of your list.
Generally, we see clients tackle content in one of three ways: (1) they choose to do it themselves, (2) they do it themselves, but ask to have access to our content experts to coach them on their content journey, or finally, (3) they throw their hands up and ask that we coordinate the production of content for them.
If that is still too daunting, we have some tools that help get them started.
If a client is having trouble communicating what they do, why they do it, how it can help others, we often recommend a messaging workshop. This establishes a very solid foundation of alignment for either of the three options mentioned above.
If a client is struggling with how they want to sound, we recommend a content style guide workshop which deep dives into a brand’s voice and tone. This helps to establish guidelines for how to write for your brand. Again, very helpful for any of the three options mentioned above.
Once you decide which content-path to take, we utilize a sincerely awesome tool GatherContent, to help keep you out of inboxes and Word documents and in one collaborative platform.
We’re really passionate about this tool. In fact, our Director of Web & Interactive Content, Liz Murphy has sung their praises repeatedly in blogs and podcasts due to its ease of use, ability to bring content creators together, and the ability to provide content coaching right from the platform. It’s pure magic.
Lastly, content coaching may be essential for your project. Find a content coach that isn’t just a word guru, but someone who understands what makes great website content and can push and pull you to get out of the “us” and “we” pitfalls of website copywriting.
Now that we have an understanding about content, let’s head into design.
3. Mockup Feedback & Design
Because the pre-process allowed time for experimentation, at this point, the designer should have a very clear understanding of the project goals and direction to take the project.
Having content available is crucial to great design as is a well-defined strategy, which we executed in the module documentation and wireframing stage.
At this point, you should really see your vision come to life.
In our process, based on the abbreviated designs executed in the pre-planning process, the designer will take the feedback and agreed upon direction and create a full homepage mockup.
Since we are no longer experimenting, it’s crucial that you will provide pointed and candid feedback on this mockup.
This is tough.
Design feedback can be hard to deliver if it’s not part of your regular routine.
However, great designers have a thick skin. They are professionals who are used to receiving both great and harsh feedback on their work.
As long as you aren’t an outright jerk, tell the designer how you feel. They won’t know unless you tell them.
Since the homepage sets the tone for the entire site, I cannot stress enough the importance of candid, constructive feedback. Your project will fail to deliver on your expectations if you do not speak up.
Now, we don’t expect everyone to understand how to articulate how they are feeling. Sometimes, things just aren’t sitting right and you can’t explain why.
A great designer will be able to walk you though discovery questions to get at the root of the problem.
Expect to actively participate through this stage, and be sure that decision makers and stakeholders are in the room.
The hardest thing for a designer to do is execute on feedback that has been filtered through a third party.
Be open, be honest and be active in the process. Your designer will deliver.
Upon agreeing on the direction of the homepage, the designer will apply these styles and direction to the remainder of the modules discussed in the module documentation. Typically, these modules will create four to five complete pages (or more depending on the complexity of your site).
Again, remember these modules can be used in any order to create an endless amount of pages.
The same level of feedback is expected throughout the entirety of the design phase.
Failure to express your thoughts and opinions will lead to blown timelines and the agreed upon budget because the team will be backtracking to implement feedback much later in the process.
Once the designs for all modules are approved, the designs are turned over to development.
4. Development & Testing
Now, that designs are complete, this is where the real magic happens.
Developers are amazing people who bring designs to life.
In order to do this successfully, they follow a strict order of operations.
First, they should tackle your global elements that appear across the entire website -- usually the header and footer.
Since these elements are across every single page of your website, it’s essential to have these in place and approved before further development starts.
Then, we they should get into the core of the execution, module development.
As stated in the module documentation section of the article, development takes every care to make each and every module as flexible as possible.
In order to achieve this result, it is equally as essential in this stage to provide candid feedback to the developer.
Modules contain options like color pickers, heading styles, dividers, border shapes, CTAs, video, etc. can all be implemented in a single module with the ability to choose functionality with each implementation.
You should test every option for every module as you receive them and raise a red flag if something isn’t working or isn’t what you expect. Silence is agreement!
5. Quality Assurance and Launch
Even with a highly-detailed and buttoned-up process, there will be room for human error. So, every single process should have this step. If it doesn’t, run for the hills.
Quality assurance ensures that any mistakes are caught prior to launch so you are launching the best product possible.
This shouldn’t be as simple as check the page, check the box, and move on, however.
You should really be leaning on each team member’s expertise to ensure the quality is the highest and best it can be.
You want to be sure that your website works across all necessary browsers and devices. We typically use a tool called BrowserStack to help with this process.
Strategists should be double checking the page content for best practices, designers should be checking for overall design consistency, developers should be checking for efficiencies in code and page speed, and project managers should make sure everything is working correctly as originally scoped.
After any necessary revisions are taken into account, it’s time to break out that launch plan we spoke about in the pre-process.
Due to that plan, you should know exactly who needs to be on-call and in the room for launch.
No one should be scrambling to figure out passwords, any extra costs for redirects or subdomains should be accounted for and expectations around email and propagation should be clearly set.
6. Ongoing Improvement
Yay! You’re done!!
Well, not quite.
You can’t just launch your new website and forget about it, you should have a plan in place to make continuous improvements.
Over time, your processes, team, services, prices, and even buyers will change and your website needs to change with them.
It’s a living, breathing, hard working member of your sales team and you need to make sure that it is always current and optimized to offer the best experience.
With this in mind, you should regularly check your analytics, especially your conversion rates and user paths to remain nimble and in service to your users.
Plus, even with all the research and strategy in the world, every decision made on your website was just a prediction. You can’t really know how something will perform until it’s live. Every decision is a hypothesis that should be monitored, measured, and reported on.
If the hypothesis did not result in your desired conclusion, you must adjust the experiment.
In this case, you’ll need to be ready to make adjustments to the design of your site and even the copy.
Be sure to carve out the time and the budget for ongoing efforts, specifically user testing.
In addition to your analytics, having regular user tests will provide the insight you need to make tweaks to your website.
Go Forth & Redesign
So, that was a lot, I know. But, it should give you a better understanding of what taking on a website redesign is really going to entail.
Before you start vetting any agencies, or rallying your internal team to take these steps on yourself, be very candid with yourself about how much you and your team can commit.
Have a specific understanding of who needs to be involved and what their level of effort will be. Figure out who is the decision maker and what other items are on their plate.
Don’t just say you need a website in 90 days because you read somewhere that’s a good benchmark.
Website redesign, even with the best process in the world will result in a long, committed relationship. How much your team can dedicate to the project is going to be a much better tell for a timeline and even cost.
While the website design process you use doesn’t have to mirror the steps above, it should follow similar guidelines. Make sure you have ample time for strategy and feedback and stay inquisitive about the timeline and how quotes for time and price were arrived upon. If that takes an exploratory exercise, consider that a good and very honest approach.