Lara Berendt — January 25, 2017 
If you’ve been tasked with managing your company’s website redesign, you probably have an idea of what success looks like: a sleek new website that helps your customers solve their problems and helps your company hit its business goals. But do you have a handle on everything it takes to get from Point A to Point B?
Whether you’re working with your internal design and UX team or with an experienced B2B marketing agency, you’ll be contending with many voices and processes throughout your project. It helps to understand the many tasks that make up a modern website redesign process so you can budget effectively and set realistic expectations with stakeholders.
Let’s take a look at seven key phases and milestones that the best designed websites rely on to take them from concept to completion on a new website and how you can prepare for each one.
Discovery
Before developing a strategy for your new website, your design team needs a thorough understanding of the current state of your existing site, business needs and marketing metrics. The initial discovery phase helps suss out crucial details that will determine your objectives for the redesign.
Designers often begin with persona development through a series of stakeholder interviews. Speaking to key internal experts within your company helps the design team come up to speed on your products, industry and business objectives.
A competitor snapshot helps designers identify spots where your web strategy is strong, areas for improvement and opportunities to catch up with or outperform your peers with differentiated web content or functionality.
The team also reviews your current site design to take stock of features, styles and layouts that need to be refreshed. This could include your brand color palette and logo if they’re due for an update, along with page structures or forms that need to be more mobile-friendly, or design treatments that are outdated or slow-loading.
With a performance assessment and SEO snapshot, designers examine website metrics for traffic, engagement, leads, conversions and, if you have e-commerce, web sales. These barometers for a website’s health help designers identify areas where updates can make the greatest business impact.
How to prep for discovery:
- Identify stakeholders for your designers to interview
- Generate a list of top competitors’ websites designers should analyze
- Familiarize yourself with modern design trends and website metrics before discussions
- Connect designers with team members who can share website analytics
Kickoff
The kickoff meeting is often the first time project stakeholders, both internal and external, introduce themselves and share their goals for the redesign. Your design team reviews everything learned in discovery and shares a detailed creative brief that lays out how all of these findings will inform your redesign plans.
HubSpot’s Jami Oetting says a strong creative brief should answer key questions of who, what, when, where, why and how related to solving a creative problem: Who is our competition? What solution is being presented? How will we know the problem has been solved? An ideal website brief will be concise but thorough, with your design team offering a framework and reference for the scope and strategy of the project.
How to prep for the kickoff:
- Identify key stakeholders who make up your core project team and make sure they’re invited to the meeting
- Understand your budget so you can confidently answer questions on project scope and timeline
User development
The next phase is a deeper dive into your website users’ needs, goals and pain points. First, the details discovered in customer interviews are built out into user profiles, snapshots of users that the team can refer to throughout the project as a reminder of what real people want and need from your site. Next, designers add your site data into the mix to create user journeys that visually represent a user’s typical path, expectations and possible points of derailment en route to their goals on your website.
Finally, designers map out user flow charts that help tie your website content to the user journey, identifying holes in site content or functionality that could prevent users from achieving their goals.
“Whether you’re mapping out a brand new website or looking to optimize an existing user experience, flow design will keep you out of the trap of designing individual pages and interactions and instead focus you on fulfilling users’ needs,” writes Morgan Brown for Smashing Magazine.
How to prep for user development:
- Supply your design team with any additional recent qualitative or quantitative user research, like website surveys, usability testing or customer conversations
- Push your stakeholders to embrace a user-focused mindset, bringing every suggested website requirement back to how it helps users meet their needs
Information architecture
Usability.gov defines information architecture, IA for short, as the process of organizing, structuring and labeling website content in a way that helps users find information and complete tasks. This is where designers examine and optimize the labeling, navigation and search systems that organize your website.
In this phase, your design team creates a sitemap—an outline or flowchart of your site pages. “It’s a centralized planning tool that can help organize and clarify the content that needs to be on your site, as well as help you eliminate unnecessary pages,” writes Cameron Chapman for Kissmetrics. The map helps designers firm up your site’s goals, avoid duplicate content, streamline conversion funnels and gets everyone on the same page, says Chapman.
The IA process also shines a light on the cross-device user experience, so it’s an ideal time to address your site’s mobile strategy. According to a 2015 KoMarketing study, 41 percent of tablet and smartphone owners search for B2B products on those devices, so your redesign must prioritize mobile users’ needs. Designers explore how your sitemap components perform and integrate on a variety of devices, developing a plan to optimize your content and interactive functionality on the greatest possible number of screen sizes and browser types.
It’s still too early to jump into full-fledged page mockups. Instead, designers first create 2D wireframes of your site pages. These pared-down illustrations convey the basic allocation of space, web functionality and prioritization of content. At this stage, designers purposefully omit colors, imagery and typography to force a focus on content and structure.
How to prep for IA:
- Give designers mobile website traffic metrics to inform your mobile strategy
- Help project stakeholders understand the purpose of wireframes so they don’t get hung up on design details at this stage
Visual design
All of the research and planning up to this point begins to pay off in this phase, when your designers create the actual page layouts and design elements that go into your final website. Using a tool like Adobe Photoshop or Illustrator, designers turn your approved wireframes into rich visual page mockups, incorporating your logo, color palette, typography, navigational elements and imagery.
Because these layouts should reflect what your actual site will look like, it’s crucial for your designers to have real (preferably final) content to use in the designs. In a “content-first” design process, placeholder text is a no-no, as it can lead to big issues in the final design.
“You are very likely to find out that things simply don’t fit once the final content needs to be included,” Karol K writes for the Adobe blog. “For that reason, you need to integrate that real content as soon as possible, and not speed up the design process artificially by using lorem ipsum everywhere.”
How to prep for visual design:
- Provide your site content to the design team before they begin this phase
- Make sure all key decision makers review and sign off on the designs before moving to development
Assets and Coding
Blueprints are finalized and construction can begin. Your design team hands final designs over to web developers who complete the development of your new site, using coding languages like HTML, CSS and Javascript to turn the static designs into interactive web pages.
Finally, developers test the site across a variety of mobile and tablet devices to identify and correct any issues in display or functionality across different operating systems, browsers and device manufacturers—all of which is no small feat.
“Before responsive web design, we had to test five web browsers on a desktop computer,” writes Tom Maslen in Smashing Magazine. “Now with responsive web design, we have at least 15 browsers working on myriad different-sized devices, with many different input types, multiple pixel resolutions and hugely varying connection speeds.”
When testing and validation conclude, your site is ready for launch.
How to prep for asset development and site coding:
- If you haven’t already provided final content to your design team, do so before development begins
- Set realistic expectations with stakeholders on the development timeline, and stay flexible as testing and validation can surface unforeseen tech issues
Measure and optimize
Unlike in years past, a snazzy new site is no longer the end of the road for your design project. Today, the best web designers embrace a growth-driven design process that uses ongoing measurement of site performance to learn how new features and content are resonating with users and identify areas for further optimization.
This learning process lets designers continuously feed new information into your web strategy and make data-driven updates to promptly address user needs and behaviors. Then the cycle repeats, in an ongoing ladder of improvement, resulting in a B2B website that is better-equipped to generate leads and sales for your brand.
Image source: Media Junction
How to prep for measurement and optimization:
- Set up handshakes between sales, marketing and web analytics stakeholders and the design team; define regular checkpoints to keep the optimizations going
- Educate people throughout your company on the value of a growth-driven design process to move your organization away from sporadic website overhauls.
If you are ready to begin your website redesign project, determining your budget is most often the first step. Get the steps for creating an accurate website redesign budget with this free guide.
Digital & Social Articles on Business 2 Community(106)
