10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready...

33

Transcript of 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready...

Page 1: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn
Page 2: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

3

5

10

17

23

28

ABOUT NEW BREEDWe are a revenue performance management firm for the world’s fastest-growing companies. We serve over 200 clients in a range of verticals including SaaS, telecommunications, IT, manufacturing and business services.

Through the alignment of people, process and platforms, we drive success for our customers. Backed by our technical expertise and partnerships with HubSpot, SaaSWorks, Salesforce, Drift and Vidyard, our services and solutions not only address every touchpoint a prospect has with your company, they lead to proven, measurable and predictable outcomes.

TABLE OF CONTENTS

Introduction

Step One: Strategic Planning

Step Two: Information Architecture

Step Three: Content Strategy and Production

Step Four: Design and Development

Step Five: Website Launch

2COnTenTS

Page 3: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

INTRODUCTION

If you’ve read any of our content on websites, you know that we at new Breed believe your website should be your best salesperson. It’s more than just a digital brochure for visitors to read about your products and company history. It’s the hub of any successful demand generation strategy. 

Your website should help guide potential customers through their buyer’s journey — all the way from brand-new visitor to closed-won customer and beyond. 

But what if your website isn’t doing what it needs to do? 

Lackluster content, a poor user experience, dated design and a myriad of other factors can hamper your website’s ability to drive demand for your business. If you’re not extracting the maximum value from your web presence, you’re only standing in the way of your own growth. 

“But, website redesign projects are a long and complicated investment of time and resources!” you exclaim. 

You’re right. Website redesigns require a significant amount of planning and work to be done effectively. But, a clearly defined process (like the one described in this guide) can make navigating that work much easier. 

Over the course of this guide, we’ll help you and your team understand the steps involved in a website redesign project. Beyond that, you’ll leave with the necessary strategic insights and guidance to map out a persona-driven website that attracts the right traffic, drives more conversions and generates demand for your business. 

It’s important to note that this guide won’t teach you front-end development. Instead, we’ll walk you through what to expect during the design and development process or what to ask of an agency partner.

3InTrODuCTIOn

Page 4: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

Mobile-friendlinessHaving a responsive website is essential to success in today’s marketplace. If your current website isn’t compatible with mobile users, then you can be alienating a significant portion of your customer base. Additionally, poor mobile performance can also negatively impact your site’s SeO and rankings in search results.

Overall user experience (UX)Your user experience is the sum of a visitor’s interaction with your website and your brand. This can be your site’s interface, your brand messaging, whether you’re targeting the right personas and more. Since uX involves so many other factors outside of your website, a top-to-bottom review or overhaul should accompany any redesign.

Visual designWhile your website’s look and feel shouldn’t always dictate whether it’s time for a redesign project, it should certainly play a role. Does your website’s design align with your current brand? Is it rooted in dated or stale design trends? Does the website’s design support and guide toward the actions you want visitors to take on the site?

PerformancePerhaps the most important factor to consider is your website’s performance. Improvements to individual pages or iterative updates to your website can help address certain shortcomings or conversion rates in different parts of your funnel, sure. But if your site isn’t attracting the right visitors, generating leads or resulting in customers, then a redesign may be in order.

SHOULD YOU REDESIGN YOUR WEBSITE?If website redesign projects can be significant undertakings, then it’s important to determine whether you should be starting one to begin with.

The best websites are in a constant state of improvement. Just because your website isn’t generating maximum returns for your business right now doesn’t mean it can’t be optimized and iterated upon.

Determining whether your website should be redesigned versus merely optimized should boil down to a few important factors. Facing difficulties in any of these areas can be enough to warrant a redesign project, and addressing these areas comprehensively can be advantageous for your business.

4InTrODuCTIOn

Page 5: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

STEP ONE:

STRATEGIC PLANNING

Assuming you’ve decided to undergo a website redesign project, your next question is likely, “Where do I start?”

Like any successful project, the best place to start is by laying a strong foundation.

It can be tempting to dive straight into design and development to get your website looking exceptional. But without an effective strategy, you may struggle to create a powerful user experience or solve for the challenges that prompted you to redesign your website in the first place.

Additionally, you want to put as much time as possible between website redesigns. Laying the right foundation enables your website to grow and scale as your business does.

Page 6: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

GOALS AND OBJECTIVESAny project is incomplete without goals and objectives. What are you trying to achieve with your website? The simplest answer is more revenue. But how you accomplish that goal will vary depending on your business. When it comes to a redesign project, identifying the areas of improvement and what issues you’re trying to solve will ultimately inform your overall goals.

For instance, if you find that your prospects don’t know enough about your product by the time they reach sales, a primary goal could be increasing free trials or demo requests. Such a goal directly informs many of the decisions you make throughout the redesign project, including how content is written and organized across the site.

6STrATegIC PLAnnIng

Page 7: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

USER RESEARCH AND BUYER PERSONASBuilding a website that accomplishes your business goals starts with a keen understanding of your ideal customer.

Who do you market and sell to? Which customers do you retain the longest? Why do prospects decide to choose your business over a competitor?

Detailed buyer personas are designed to answer these questions, and they serve as an essential element of building an effective website.

Buyer personas are semi-fictional representations of your ideal customer. They contain information like job roles and functions, their unique pain points and challenges, as well as your business’ value proposition or message that resonates with them the most. 

Creating buyer personas requires robust research into not only your revenue streams but also your CrM and user behavior. What content are the people who become customers engaging with? What subject matters do they care about? 

As you build out your buyer personas, conduct interviews with members of your sales, product and service teams to understand what they experience in their regular interactions with prospects and customers, as well as the customers themselves. 

By understanding these factors and learning more about these users, you’ll have a better understanding of the content that will attract them to your website and nurture them into customers. This information directly influences how you write, organize and design content later in the redesign process.

7STrATegIC PLAnnIng

Page 8: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

PROJECT MANAGEMENTWebsite projects are complex, and effective project management is an essential driver of success. Websites need copywriting, graphic design, code development, review and many other things in between, so managing workloads and deadlines will also be a factor.

As you’re laying out the goals and objectives of your website, it’s also important to consider the triple constraints of project management. In other words, what are your goals for time, budget and scope?

If your goal is to have a website up and running in weeks, not months, then you need to compromise on design or level of functionality. If you want a massive website with a depth and breadth of content and robust functionality, you need to compromise on time.

With those factors considered, appointing someone to manage the project in its entirety is a wise decision. They won’t be the person doing all of the work, but they will hold those doing the work accountable to mapped out deadlines, monitor budget and keep key stakeholders informed about progress to make sure those doing the work get to focus on what they do best.

8STrATegIC PLAnnIng

Page 9: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

DO YOU NEED A PARTNER?At this point, we’ve already stressed the significance of this undertaking. While the research and planning is absolutely something your team can handle, you’re not always going to have the bandwidth or expertise to redesign your website internally. That’s where a partner can come in.

Agency partners can take on entire projects or supplement your internal team where needed. For instance, you could outsource design and development if you don’t have an internal developer. either way, there are a number of factors you can consider when evaluating potential partners:

Timeline: Can this partner accommodate your desired timeline?Budget: Is their price range within your budget?Technical capabilities: Are they capable of accomplishing everything you want on your site? That can include being able to work on your content management system or integrating your website with your CrM or marketing automation platform.One-time project vs. long-term partnership: Are you looking for a one-off project or a team that can help with continued maintenance and improvements? Does this team align with your needs?Familiarity with your industry: Have they built sites for similar audiences to yours in the past?Experience with your type of website: Do they have experience building the type of website your company has? For example, inbound websites and e-commerce websites follow different best practices, so you’d want an agency familiar with the structure your site will have.

9STrATegIC PLAnnIng

Page 10: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

STEP TWO:

INFORMATION ARCHITECTURE

With a strategic plan in place, it’s time to start laying the groundwork and organization of your website. This is where your website’s information architecture comes into play.

norman nielsen group defines information architecture as “The underlying organization, structure and nomenclature that define the relationships between a site’s content/functionality.”

As we’ve already covered, you should build your website around the needs of your ideal end-user. Your visitors come to your website with a goal in mind. Whether that’s booking a demo, learning new information or purchasing a product, your information architecture informs how your visitors will inevitably interact with and find what they’re looking for.

Page 11: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

Simply put, effective information architecture enables your visitors to find what they’re looking for quickly and easily while also helping you accomplish your business goals.

For example, if you’re an e-commerce website that sells hats but there’s no reasonable way for visitors to easily sort or filter winter hats, then users seeking winter hats specifcally will likely get frustrated and bounce from your website. This is a bad user experience. Additionally, your revenue from the sales of winter hats will suffer. Lose, lose!

Your website’s information architecture will also inevitably impact your ability to rank in search results. The google algorithm takes your site’s usability and conversion metrics into consideration. effectively organizing your content can create seamless conversion opportunities and eliminate friction, helping you rank better.

Often times, information architecture can be boiled down to your site’s main navigation, but there are several other factors that you need to address, including:

Website and content auditConversion pathwaysnavigation planningusability testing

11InFOrMATIOn ArCHITeCTure

Page 12: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

WEBSITE AND CONTENT AUDITThe first step in building out a strong information architecture is to identify what content and website pages you already have. Conducting an audit helps you understand what will need to be brought over to the new site or what will be retired and thus inform what you will need to organize.

When conducting your audit, it’s important to review the performance of your site pages and content offers. If you’ve decided to redesign your website, it stands to reason that some resources aren’t performing to your expectations. If you don’t already have historical data to make informed decisions, you should stand up google Analytics on your current website to collect those insights. Crawl your current website’s urLs and determine which ones you want to keep, consolidate or delete entirely.

Leveraging your audit, determine what site pages or additional content needs to be created and start to get a sense of what functionality you will need to appropriately direct users toward the content that you do have.

Finally, with all of this information collected, you can start organizing content into logical groups that can help set up your conversion pathways and navigation.

12InFOrMATIOn ArCHITeCTure

Page 13: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

CONVERSION PATHWAYSWith an audit of your content and offers in place, you can start to map out pathways that align with both your users’ and business’s goals.

Strictly speaking, conversion pathways can start with a variety of content offers such as blog posts. each piece of content should have a clear next step or call-to-action (CTA). The CTA should lead users to an optimized landing page with a form to collect lead information.

The best conversion pathways end on a thank you page that sets up another page or content offer – a logical next step in the conversion path. This is where grouping your content by funnel stage (ToFu, MoFu, BoFu) comes in handy. Which MoFu offer comes after a given ToFu offer in your conversion path?

Since every buyer’s journey is unique, ideally, you create conversion pathways for each of your buyer personas. These pathways help nurture new visitors through their buyer’s journey and down the funnel, consistently making it easy for users to find relevant content.

Based on your content audit, you can group relevant offers together and start visualizing how these offers will set up the next step in the path. Your audit also helps you identify gaps in your content and informs the content strategy you inevitably create to guide users down these paths.

13InFOrMATIOn ArCHITeCTure

Page 14: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

NAVIGATION PLANNINGFinalizing your main navigation is likely the largest takeaway from the information architecture stage. Your information architecture directly informs your work in drafting your main navigation.

By grouping and prioritizing content in a hierarchy, you should have a strong understanding of what to include in your main navigation to best serve your users.

When planning your navigation, keep in mind that its core purpose is to enable your users to find the content that’s most important to them. remember that users will enter your website at different points in their buyer’s journey. Your main navigation should meet visitors where they are and direct them to the appropriate information regardless of how far along they are in their journey.

With that in mind, there are a number of best practices that you can leverage to develop the best navigation for your website.

14InFOrMATIOn ArCHITeCTure

Page 15: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

Put your users firstYour main navigation should be entirely focused on your users. If you include pages that are only relevant to internal stakeholders and not something users would search for, then you’re only taking up space from helpful content.

The same applies to utilizing internal terminology or jargon. While your business may have certain words or terms that you use to describe something, it’s best to use universal language in your navigation to give your users the best sense of what they’re clicking. You can then use site content to educate visitors as to the terms you use and why.

Maintain consistencyIn order for your navigation to effectively set expectations for your users, you need to remain consistent. That means if you’re planning for some top-level navigation items to be clickable, they all should be clickable.

Prevent decision fatigueThe last thing you want your navigation to do is overwhelm your users with options. Choices should be concise and set clear expectations for what they will get when they click on a menu item. Too many options can cause decision fatigue and force users to bounce from your site.

not every page has to be included in your navigation. Based on your defined information architecture, you should be able to determine what pages should be prioritized highly enough to warrant a spot in your navigation.

Project Management Software

UCanManage

15InFOrMATIOn ArCHITeCTure

Page 16: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

USABILITY TESTINGAs you’ll discover frequently with many steps throughout this guide, your information architecture is never truly finished. Ideally, you should build something inherently flexible so you can adapt and layer new content into it over time as your users and goals change. That said, you should have your revamped information architecture well-defined before moving into content strategy and development.

Doing some usability testing is a great way to gauge whether or not you’re moving in the right direction. Depending on your resources, you can bring in existing customers, external stakeholders or team members who haven’t been involved with your redesign project to test the validity of your information architecture.

running a usability test on your information architecture can be as simple as showing your subjects the finalized page hierarchy and asking them where they would find information relevant to your business. For instance, you might ask them where to get information about your project management software and then where to find information about the integrations you offer.

These tests help determine whether you’re utilizing a clear organizational structure and nomenclature for your content that makes sense for your users. If your subjects aren’t able to find things easily or are picking incorrect destinations, then you should revisit your existing framework. If not, you’re ready to move on in your project.

16InFOrMATIOn ArCHITeCTure

Page 17: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

STEP THREE: CONTENT

STRATEGY AND PRODUCTION

The information architecture process gave you an understanding of how you are going to organize your website content, the content you need to recreate and the gaps you need to fill.

Armed with that knowledge, there are a number of best practices and tools you can leverage to start creating exceptional website content, including key takeaways, wireframes and content outlines.

Page 18: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

WHERE TO START: SEO OR CONTENT?Content is the heart of any website. Without effective, search-optimized content, you’ll struggle to attract the right visitors or nurture them down the funnel.

When it comes to your website’s content, it can be difficult to determine which should come first — a keyword strategy or a content strategy. The fact of the matter is, one cannot exist without the other.

While traditional content production may start with an intended keyword or a niche subject matter you’re hoping to break into, a website redesign project will ultimately include a mix of both.

You need to be targeting high-volume keywords that are relevant to your audience in order to rank in search results and generate sustainable traffic. But, there’s also likely to be some product pages or niche content on your site that won’t have a high search volume — yet. either way, it’s hard to start with either of these areas on their own.

Blindy researching keywords can produce high-volume keywords to target, but if your audience isn’t searching for them, it’s moot. Drafting content in the hopes of aligning it with a keyword at a later date can make it difficult to optimize in the long run.

That’s why your content production process should ultimately start with key takeaways.

Inbound marketing

Inbound marketing strategy

Inbound marketing plan

Inbound marketing plan

Inbound marketing tactics

750

1000

470

0.25

0.13

0.49

Learn more

Learn more

Learn more

18COnTenT STrATegY

Page 19: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

KEY TAKEAWAYSIf you only had one page on your website, what would a user have to walk away knowing about your business? That is the question you should be asking yourself about each of your site pages.

Key takeaways are breakdowns of the goals and messaging for each individual website page. They inform SeO strategists, copywriters and developers in what will need to be researched, written and designed for each page. When creating key takeaways, you should consider questions such as:

What are the goals of this page? Who is the target persona of this page? If this were the only page on your website, what is the most important thing a visitor should learn from it? What action should a visitor to this page take? (ex. Book your demo) What terms might a user search for to land on this page?

Key takeaways should not even resemble finalized copy for a page. You can treat them like more organized brainstorms for a particular page and as resources for members of your team to move the redesign project forward.

With goals outlined for each page and core messaging documented, search strategists can conduct more informed keyword research. Key takeaways provide baseline search terms to start researching potential search volume and related keywords. goals and product information also help strategists explore previously unthought-of keywords to help base website content around.

19COnTenT STrATegY

Page 20: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

WIREFRAMESMuch like the blueprint of a house, your wireframes provide the framework upon which the functionality and design of your website will be built.

Key takeaways condense what pages need to convey to your users. Wireframes make the leap at portraying the actual layout and format of content that will accomplish that task.

Wireframes should visualize how you will present your content to achieve the goals laid out in key takeaways.

What modules will you need? Is something best conveyed as an image?How much copy should you account for?Long-form or brief headlines?

Your wireframes will tell your developers what modules they will need to create to best present your content and inform your copywriting team as to how much copy they will need to write and in what format. For instance, if your page needs to convey that you work with top brands, your wireframe may include a logo slider module.

Wireframes come in formats that range from pencil-sketched boxes to heavily designed with interactive elements, but there are a number of best practices you can follow.

20COnTenT STrATegY

Page 21: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

ContentWireframes should always prioritize content over design. By using placeholder text, wireframes clearly show developers how many characters to account for and copywriters how much to write.

Modules that only show one line of copy in wireframes when they need several might not be developed with enough space to accomodate extra text when it comes time to flow content into your website.

ModulesYou don’t need to create a wireframe for every page on your website, but you do need to ensure every module on your website is included in your wireframes.

For example, if 20 pages will leverage the same content format and layout (which will later be developed into modules) then you only need one wireframe for those 20 pages. However, if one of those pages has unique content needs, then it’s best to include that module in your wireframe. In this way, your wireframes essentially serve as a checklist for the modules your developers need to create.

FidelityLow-fidelity wireframes can be pencil-drawn sketches that may show the general scale or layout, but lack details. High-fidelity wireframes often show more finalized content which limits wireframes’ ability to serve as a guide to copywriters and limits creative freedom of your designers and developers.

At new Breed, we create wireframes that fall somewhere in the middle. Medium-fidelity wireframes combine draft copy, placeholder text and dummy images to clearly showcase the page’s content strategy and some lightweight guidance for designers.

CTA

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum-my nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

This is a headline relevant to your solution

BOOK YOUR DEMO

Are you tired of projects going over budget? not delivering on time? Falling dramatically out of scope?

project management software. uCanManage is a software platform that helps your team stay on task, track deliverables, and get projects out the door.

Our project management software is the best.

Book Your Demo

Ready to get started?

Lorem ipsumLorem ipsum dolor sit amet, consectetuer

adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure

dolor in hendrerit in vulputate velit esse molestie consequat. Vel illum dolore eu feugiat nulla facilisis

at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum.

21COnTenT STrATegY

Page 22: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

CONTENT OUTLINESIf wireframes are the blueprints of your website, then content outlines start to get into the area of paint swatches and furniture choices. up until this point, you’ve been drafting ideas and using placeholders. Content outlines are where the final copy of your site ends up before it goes live.

Content outlines are essentially templates for your page’s copy. You can create your outlines based on your finalized wireframes. every module featured in your wireframe should get a template in your outline with space for the content that must be written and for links to images or other design assets that will need to be flown into finalized pages.

Ideally, your content outlines should dictate how many characters or lines your copywriters should abide by based on your wireframes. While you should leverage your wireframes to create outlines for every page that needs to be on your website, your key takeaways will ultimately play a larger role in what actually gets written.

Copywriters can use details in your key takeaways to write content that informs readers of the concepts and messages that you had established earlier in such a way that aligns with your brand’s voice and tone.

Content outlines help facilitate the web copywriting process while design and development are ongoing, saving time and enabling content to progress before modules are finalized. That means you should have any and all key stakeholders review content in their outlines prior to flowing into the finalized web pages.

22COnTenT STrATegY

Page 23: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

STEP FOUR:

DESIGN AND DEVELOPMENTMany people enter website redesign projects leaping straight into design and development. The work you’ve done up until this point is fundamental to ensuring the time you invest in this phase is effective and that your site accomplishes the goals you set in the beginning.

DESIGN SYSTEM

Your design system is a collection of elements and components that assemble the look and feel of your website. These can be colors, buttons, link stylings and other user interface elements.

Your design system will set the standard for components that appear in multiple locations across your website. If a button looks one way in your design system, it should look that way across your entire website. Creating a cohesive design system and sticking to it is essential to creating a good user experience.

Page 24: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

Your design system won’t include every visual element on your website, but the elements included within it should inform your design as you build out your modules.

Design for the brand you wantWhen it comes to creating your design system, it’s essential to design elements that are not only visually appealing but also align with your brand. What does the visual aesthetic you create say about your business? What message does it convey?

Bright colors and smooth corners are trendy and portray an air of casual playfulness, but is that aligned with how you want your brand to be perceived in the market?

A website redesign project commonly accompanies brand refreshes or revisiting your brand’s core messaging. The copywriting and design work associated with your redesign project can help you weave in any revised messaging and brand visuals into your business’ most front-facing tool: your website. You should finalize the foundational work of your brand refresh prior to starting your website redesign project, but continue to design your new website with your aspirational brand in mind.

Prioritize the user experienceWhile not the only factor, front-end design can play a significant role in your website’s user experience. Your design should support your users by making it simple to find the content they need.

That can mean condensing dense content into easily digestible graphics, clearly defining clickable elements, using tertiary visuals to guide viewers down a page and any other number of visual cues. If something looks good but is difficult to read or interact with, then you’re doing your users a disservice.

24DeSIgn AnD DeVeLOPMenT

Page 25: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

MODULAR DEVELOPMENTThe best websites are in a constant state of improvement. Developing static page templates can be prohibitive in the long term, as they’re more challenging to edit without impacting multiple pages.

Instead, modern websites are trending in the direction of module-based design. This means every block on a page is interchangeable and can be moved anywhere on the page. Building out pages with modules helps your marketing team edit pages in the future and even build new pages without needing a developer’s assistance.

Designing modulesIf you decide to build your pages using modules instead of templates, it’s important to consider the many different formats in which a module could appear. Certain pages have the module appearing at the bottom of a page, while others have it appearing at the top or between other modules with unique designs.

In any case, your module needs to be flexible enough to look appealing and cohesive no matter where it appears on a page. Developers can accomplish this by implementing options to enable editors to modify certain module elements, like background, margins and padding.

25DeSIgn AnD DeVeLOPMenT

Page 26: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

QUALITY ASSURANCEnot long ago, blogs, thought-leadership pieces and guides like this one stressed the value of responsive design and mobile-friendliness. no longer. At this point, such factors are table stakes.

As you dive deeper and deeper into the design process and your website starts to come together, the temptation to press the big red “launch” button will only grow. You must fight this urge.

Prioritizing quality assurance and making sure your website looks and behaves the way you want it to across devices and viewports is essential to crafting a great user experience. If a user opens your website in Firefox and sees broken elements or a different color than a Chrome user, you’re creating an inconsistent experience.

That’s why you should dedicate time in the design and development phase to check modules and site pages through multiple viewports and mobile devices.

26DeSIgn AnD DeVeLOPMenT

Page 27: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

Browsers and responsivenessSimilar to how you would test your website’s mobile friendliness, you should also validate your website’s responsiveness and display across multiple browsers. That means opening up your website pages in Firefox, Chrome and Safari and creating lists of anything that may need to be addressed by developers.

Additionally, while those browsers are the most common and own a significant share of the market, it’s important to confirm with your website data whether or not there are any uncommon browsers or devices you will need to check your website’s quality in.

Mobile friendlinessLike we said, you shouldn’t just be considering whether your website is mobile friendly; you should be prioritizing it. That said, it’s important (once again) to consider your users. If your website data suggests that most of your traffic comes from mobile devices, then your website shouldn’t just look good on mobile, it should be designed with a mobile-first mentality.

Quality checking mobile friendliness doesn’t need to involve opening up every site page on your phone. Instead, you can leverage tools like google Chrome’s Inspect function to change the viewport of your current window into one of the mobile devices you’re testing for.

Safari:

QUALITY ASSURANCE

Mobile: H1s are too large

Firefox: Parralax images not working

Firefox: Spacing too large on hero

QUALITY ASSURANCE

27DeSIgn AnD DeVeLOPMenT

Page 28: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

STEP FIVE:

WEBSITE LAUNCH When you’ve finalized your module development and undergone a robust quality assurance process, you’re ready to begin taking your website to the final stages. The launch phase can be hectic, but with a clear plan, you can ensure that every box is checked before you go live.

FLOWING CONTENT

While your designers and developers were coding your website, your copywriters were drafting and reviewing your website copy. Once modules are finalized, your team can start flowing content into your website.

Leveraging content outlines makes the content flowing process as simple as possible. Your team should be able to copy and paste content from your outlines into their respective input fields in your content management system. Well-structured outlines also include links to visual assets such as graphics and images that will need to be uploaded to your CMS and placed on the correct pages.

The content flowing process is the perfect opportunity to do a final copyediting pass and ensure that grammar, syntax and spelling are all in order.

Page 29: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

SEO AND METADATAOnce your pages are stood up and content is flown, your team should ensure that all on-page SeO factors are accounted for.

As you flow your content, you should be checking every page to make sure that each of these fields is complete and optimized around the page’s targeted keyword. Doing so ensures that your newly redesigned website will rank better in search engines and improve organic traffic.

Title: Your page title should be a concise representation (60 characters) of what a visitor should expect from a page. Ideally, your page title should include your targeted keyword.

URL: users should be able to easily discern the topic of a page when seeing the urL in search results. Your urL should also align with your page title. You should avoid using numbers in your urL as much as possible.

Image alt text: Search engines like google will crawl your website to ensure you’ve assigned descriptive or alt text to your visual assets. Doing so also keeps your page optimized for screen readers.

Meta description: While not a direct factor of on-page SeO, meta descriptions provide more contextual information for your users to create a better user experience and set clear expectations.

29WeBSITe LAunCH

Page 30: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

FINAL QUALITY ASSURANCEQuality assurance should be a two-step process. While checking to make sure your modules work across browsers and viewports, you should also run quality checks on your website’s content, links and visual assets.

Beyond confirming that your pages are optimized for search engines around specific keywords, conduct a final quality check for spelling, grammar or other copy errors.

Simply put, your final quality check should make sure your website does what it’s supposed to do.

Internal linking: Do buttons and hyperlinks go where they’re supposed to?

Visual assets: Did you update any and all placeholder content?

Forms: Is information collected when someone submits a form? Does it direct users to the appropriate thank you page?

Responsiveness: ensure the addition of content didn’t influence how your modules appear across viewports.

Additional functionality: Animation, filters, search functions or other additional features should be checked for effectiveness across browsers.

30WeBSITe LAunCH

Page 31: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

DOMAINS AND REDIRECTSAt the beginning of this process, you conducted a website audit and identified urLs that would need to be retired or updated. At this stage, you need to address those urLs and make sure that they don’t end up as 404 errors and become a drag on your search rankings.

Prior to launch, set up redirects between pages you are unpublishing and relevant replacement pages or between the same page’s old urL and updated urL. Some CMS tools like HubSpot leverage a content staging function that allow you to create pages in a staging domain before going live. In doing so, you can create new pages on top of existing urLs versus having to redirect every urL to a new one.

The same applies if you are using your website redesign project to change domain names. Once again, CMS tools can make changing domains very simple. By updating your root domain, a CMS like HubSpot can create redirects from the previous domain.

ensuring all of these elements are taken care of, you should be at the point where you are ready to push your website from a staging domain to a live domain and start generating returns from your website!

31WeBSITe LAunCH

Page 32: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

TAKEAWAY AND ONGOING OPTIMIZATIONA website redesign project can be challenging and resource-intensive. The most important takeaway from this guide is that undertaking a project should be done with thoughtful and strategic planning to make sure you are not only making your users the focus of your website, but also making the most of what is ultimately a significant investment.

When done correctly, your redesigned website will attract more visitors, drive greater conversions and most importantly — help close more deals. With that being the case, your next website redesign project will be entirely worth the effort.

With that in mind, it’s important to note that the best websites are in a constant state of improvement. To draw maximum value from your website, you should be iterating upon it as much as possible — testing new content and functionality to drive better results. A great method to follow to do so is the practice of conversion rate optimization. By constantly staying on top of your website’s performance, you can design experiments and run trials on new layouts, content or functionality to drive better results.

32WeBSITe LAunCH

Page 33: 10 · 2017. 10. 8. · In this e-book, we’ll first help you identify if your business is ready for a website redesign. Then we’ll walk you through our ten-step process to turn

www.newbreedrevenue.com