In part 2 of this series, I went through the groundwork that needs to be taken care of before you start building a new website.
In part three of my website redesign series, I write about sitemaps, wireframes, and site design.
OK, you've done a lot of up-front work to understand your audiences and their journeys, you've audited your content to see what stays, what goes, and what needs to be created in order to meet those audience needs. And you've met with stakeholders to get to an agreement as to what defines success. Now you need to think through how to set up your navigation. This structuring and labeling of website content is called information architecture, and the primary outcome (deliverable) is a sitemap, which is a blueprint for how you plan to organize information on your website.
If you've done a solid job of content audit and content strategy definition, you should be able to create a sitemap that won't change much over the course of your site build. But be wary of any vendor who doesn't consider content strategy a critical precursor to the development of a sitemap. Especially if that vendor will push back on sitemap changes further down the road. This is a recipe for conflict and major frustration.
Whatever technique you use to workshop your IA, I strongly recommend you block several hours and have an enormous whiteboard or huge sticky pages you can roll up and save after the fact. Also, multi-color smaller stickies can help you move ideas around.
There are a lot of exercises you can use to help you define your IA, but whatever tool or path you take in your workshop, you need to be keeping your user's journeys front of mind. Don't think about how your information is talked about and accessed from an internal perspective (a pitfall common to many IA efforts) - think about who is coming to your website and what information they are trying to find. Make it easy for them to find it. I've had so many discussions with marketers who say "But WE want them to read this article!" That's fine, but if that isn't why they came to your website and you start popping up "Subscribe to our email list" calls-to-action before they get to what they are in search of, you are going to lose them.
Here is one user journey we developed to start thinking through the tasks that a student will want to accomplish on the website for the University of Michigan Law School.
A few suggested exercises to work through your IA:
Wireframes are page layout and functionality sketches. Before you can design the look of your site, or even add the content, you need to define what the basic structure of each page type will be. Just as you can't paint the walls or add furniture to your home before you know where the walls are and what the intended use for each room is, you need to understand the basics of each page first and get agreement from your stakeholders. Typically, wireframes will be developed based on page types - primary landing page, secondary landing page, attorney biography, event detail page, etc. Your web agency might start wireframe sketches on whiteboards or in workshops, but they should eventually make it to an online prototyping app such as Axure, where they can add some basic functionality and give you an opportunity to start commenting.
You've agreed on information architecture and a set of wireframes, and now it's time to get some paint on those walls! Your agency will likely set up one or more design workshops to get a thorough understanding of the design aesthetic you are looking for. Assuming you aren't going through a rebrand at the same time, they will have already asked for samples of marketing collateral and reviewed the look and feel of all of your digital properties. If you have a brand style guide, they've absorbed that and are going to dig deeper with you to talk about translating your brand to web. They might point out inconsistencies they've seen, and ask you to clarify your brand. They will probably show you a few different sets of typography, to get a sense of your preferences. Some agencies I've worked with have asked me to redesign our reception area using Pinterest. That gives them a sense of how you want your "digital welcome room" to feel.
Then your agency will go away and come back with one or more mood boards that show you their vision for how they propose they design your new site. This very likely will be an interactive presentation because they will want to dig into your feedback, make sure they get more than "I don't like the green button.' The agency then takes away the signed off mood board and begins designing the page templates (wireframes) from the earlier project efforts.
Below, the moodboard put into action in the creation of the actual website.
Ready for more? Read part 4 of this website redesign blog series: WEBSITE CONTENT STRATEGY
