Visitors have fundamental questions when they arrive at a website: Am I in the right place? Do they have what I am looking for? What else do they have (if this isn’t what I want)? What do I do now? One of your key tasks is to make sure you do a good job at answering these questions – on every page of your site.
This means that you have to:
- Always make it clear where visitors are on your site (let them know they’re in the right place)
- Make it easy for them to find what they’re looking for (clear navigation and site elements)
- Make sure visitors know what their options are (links like “See also”, “Download this”).
- Provide actions for them to take (clear CTAs).
Information Architecture is all about organizing the content and flow of a website based on research and planning. It focuses on understanding how visitors interact with your website and how they get from point A to point B. You want to eliminate obstacles, make it easy for them to find what they’re looking for, and lead them to conversion points. Essentially your’re looking for a structure and design that balances your business objectives with the wants and needs of your customers.
There are 4 key steps to information architecture that we apply to every website project: research, define, design, development.
Research
In the research phase, we listen. We want to get to know your business. If we’re going to get you where you need to be, we have to understand your core business values and objectives. We also need to find out what problems exist with your current website. We sit down with you and define your value proposition and key differentiators, products or services offered, benefits and features, market sectors, and competitors. We want to find out what’s driving the decision to redesign your website. Our goal is find out what’s working with your current website, what’s not working, and look at what you’re trying to achieve with your website.
We often have numerous meetings with various stakeholders, including the CEO and sales and marketing teams to understand everyone’s expectations. We ask a series of questions to determine specific pain points and areas for improvement.
Then we need to learn about your customers. We interview any client-facing members of your team so we can get a clear picture of what they think your customers need and want. We take our discoveries about your market and map out personas and user flows to gain a deeper understanding and get consensus on pain points and gaps between where you want your site to be and where it currently is.
Most clients generally know what they want on their website but may not know what they need from their website. Our job is to get the right information at the right time so we can define website requirements and deliver a successful website.
After completing the research, we document our findings in what’s called a Brief that’s shared by everyone on the team. The Brief documents your overall business goals, target market, key messaging, primary and secondary site features, website goals, functionality requirements and milestones. The goal of the brief is to make sure everyone is on the same page in terms of expectations and site requirements.
Define
This is where we start shaping your website. We define the scope of the website in terms of pages and site structure. This scope will guide design, content creation and site functionality. We create a sitemap that gives us a top-level view of the website pages, and then overlay that with process flows and assign sequences and functions to page templates. The process flows are crucial because they show us what visitors should achieve and how we can help them do it. They also shine a light on questions and confusion people could have. This way we can see what pages, CTAs or content we need to add in order to clear things up and reassure them that they’re in the right place. We want to ease people through the site and eliminate errors in the process.
We’ll use our sitemap and process flow to guide design, content, and development.
Wireframe and Prototype
Now that our concepts are starting to take shape, we refine the structural design and create wireframes. Wireframes are preliminary sketches of the site that outline functional elements as they would appear on desktop, tablet and mobile devices. Wireframes typically show navigation, main buttons, site grid, and the placing of elements. This is where we can spot any problem areas before we move on to adding color and type treatments. We want to quickly edit drafts until we find the most successful concept.
For complex websites, we add another step and create prototypes, which are interactive lo-fidelity demos that allow everyone on the team and others to get a feel for how the final site will look and function. Prototypes are also helpful because we can do some preliminary concept testing here before moving on to the design stage. We monitor users as they walk through the prototype, have them complete certain tasks and ask a few questions so we can determine which concepts are the easiest and most clear. This helps us narrow down the number of possible directions as we move into the design stage.
Design
Here’s where we iterate the approved concepts. We use the wireframes as a blueprint and lay our designs over it. Typically design is working hand in hand with writers to map out content and messaging at the same time. We’ll use your existing brand style guidelines to create a complimentary web color palette. For clients without existing style guidelines, we’ll create one based upon your existing brand identity and color preferences.
Since the main elements have already been decided, the design stage is really about embellishing the wireframes with color, fonts, images, icons and content. Our goal with design is to use color, size, style and space in a way that direct peoples’ eyes to the most important CTAs. There’s a lot of tweaking to site elements happening to make sure that nobody’s competing for attention. We establish a heirarchy so we know which things to highlight or scale back so visitors can find what they need.
Because colors can appear differently across devices, we’ll also test our color palette on multiple screen resolutions to make sure we’re getting the most consistent representation.
Development
Once the design is complete, we create desktop and mobile style guides that specify fonts, sizes, colors, and functionality for each website element and page template. This is an annotated visual that shows how each page looks and functions. Developers will use this guide to build the site. Designers and marketers will also use the guide for any future site modifications and edits.
We pass the style guide and design files on to the development team. They’ll set up a staging environment and iterate the build to match the style guide and meet functionality requirements.