Planning the design and layout of your next website is exciting. Knowing that your brand will be getting a digital facelift can get your creative juices going and before you know it you may have bookmarked a dozen or more "inspiration" websites that have the look you're going for.
And while it's important to be able to articulate how you want the new site to look, it's even more important that you're able to identify the key pieces of content that will need to appear on different pages of the site.
That's because re-designing your website is a lot like building (or remodeling) a house. It doesn't make sense to pick out paint colors and curtain fabrics before you've sat down with the architect to cover the basic foundational needs of your site.
Let's run through four key content areas you'll want to nail down before sitting down with your web development and design team.
Think of your sitemap as the architectural blueprint for your website (in fact, a sitemap is sometimes referred to as the "information architecture".) It is a foundational guide that should be built and reviewed with your business goals in mind. The sitemap provides an easy way to visualize how the main navigation and individual pages flow together so that it's possible to map out visitor paths on your site.
A sitemap can take the form of a spreadsheet, interactive Word document, or wireframe. Whatever the form you choose to use for the sitemap, the point is that it will help your team visualize the new site before any design work is done so that you're able to map out exactly what content will be required on each page.
Here are a two different examples of a sitemap. They can be used as standalone tools, or combined and used together to help keep everyone on your team (and the web design/development team) on the same page.
The first example was laid out in Excel to provide a big picture view of each page on the site. The second was built in Google docs so that it would be easy to click-through each page's hyperlink to see what content would live on that individual page.
In the first example, you can see that Tier 1 represents the Home Page, or face of the site. Tier 2 pages represent the main navigation pages, and Tier 3 pages are sub-pages that branch off the main navigation (Tier 2) pages.
Headers, Sub-headers and Supporting Copy
Once the sitemap is finalized, it's time to start digging into the specifics as it pertains to copy. What messaging will you use to tell your story? How are you going to message your buyer personas in a way that hits the key value propositions that will matter to them?
What benefits do you promise your customers? By visiting your website, potential customers should understand exactly what product or service you sell. They should also have a good idea of what advantages they'll get by using your product/service.
Calling out points of differentiation between your business and what your competitors offer (or don't offer) is also important.
In the next example, you can see that the headers (bolded), sub-headers (italicized), and main copy all help to convey strong value propositions. Items in brackets indicate CTAs (call-to-action prompts), as well as design or development notes.
Calls To Action (CTAs)
As seen in the example above, you'll want to plan out exactly which CTAs make sense for each page on your site. Different CTAs make sense at different stages in the buyer's journey. So make sure you're syncing up with where your audience might be in the sales process before settling on a call-to-action.
You don't want to offer someone a free 30-day trial of your product if they aren't familiar yet with your product, or if they are still in the phase of wanting to research and learn more about your company's offering.
In the same vein, you don't want to have pages on your site that lack a clear call-to-action. A page without a clear path laid out for the visitor is the same thing as putting your customer on a dead-end road. You want to help your site visitors know where to explore and research next.
Choosing Visual Assets To Support Key Value Propositions
Finally, after the copy and CTAs are mapped out, you'll want to start focusing on the visual assets you will need to help support your key value propositions and messaging. These assets can include pictures, diagrams, videos, and even audio material.
Some of this work can of course be left up to the design team. Areas where your site will require icons, for example, will be handled by the graphic designer working on your website. If you have ideas or input on any visual assets that will need to be created, now is the time to include those ideas in your content planning documents.
Working with your web redesign team ahead of time to determine requirements related to image resolution and dimensions, video format and quality, as well as other graphically-related specs will take a lot of pressure of both sides when it comes down to crunch time and launching the new site.
These of course are just four of the components you will want to consider before moving full-force into a web redesign. There are a quite a few more considerations that go into the overall planning of a new site, but these main content foundation blocks can help you (and your company) get off to the best possible start.
Taking time to think through these foundational pieces of content will be key to ending up with a new website that meets your overall business goals. So if you're considering a web makeover, or complete overhaul, and have questions about the process or what to expect, please don't hesitate to reach out. We're here to help.
Is a Growth Driven Design strategy the right approach for your next web redesign? Learn more in the ebook: A Web-Dev's Guide to Growth Driven Design.