June 22, 2016 | Sarah Sullivan | Digital Strategist

The Website Design Mistake Your Agency is Probably Making

Spoiler Alert: The mistake is neglecting website “information architecture” as a core discipline.

After all, aren’t we all supposed to be practicing “content-first” design these days? How do you stay true to the maxim without parsing and defining rules around the content during preliminary planning?

It’s a little bit perplexing that more website design agencies don’t include website IA within their strategy and design process or have a person on staff dedicated to the role.

Westwerk does…both.

According to Wikipedia information architecture (IA) is “…the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities…to support usability and findability…” (emphasis added).

Note the interactive design elements mentioned: usability and findability – two key components of basic website functionality.

To understand the interplay between visual design, user experience and information architecture it can be helpful to visualize a hamburger. (In fact, food metaphors usually help.)

Website Burger

Visual Design is like Ketchup – the application of which is best when enjoyed on something else like a hamburger – not exactly a delicious stand-alone snack.

UX Design + Visual Design is like Ketchup on a bun…it feels like something is missing and it’s a little weird, but who didn’t have a ketchup sandwich at some point in college out of desperation?

Information Architecture + UX Design + Visual Design is like the whole enchilada, er, hamburger – add the beef patty to your bun and throw a little ketchup on top for the best outcome.

How Information Architecture & UX Design Work Together

You may be thinking…

Hold on, I just figured out what UX Design means to my website project…What does information architecture have to do with it?

Everything. Because your UI/UX Designer is flying blind if no one has identified what content should be on the website and why it should be there before they start to design the user interface.

User experience design is actually at the intersection of user interface design and information architecture.

Information Architecture steps help website project teams to:

  1. Understand user goals and map user journeys in order to identify all the necessary pages and posts required;
  2. Define dynamic content to power feeds, filters, and search functionality;
  3. Design wayfinding and placemaking systems to help users figure out where they are (now) and where they need to go (next);
  4. Communicate SEO strategy at the meta-content level.

And most importantly, to ensure that website navigation, functionality, content and SEO all work together as part of a single, cohesive system for the customer/user and also facilitates the business’ website governance and editorial processes.

UI/UX Design then helps translate insights uncovered during the above IA strategy steps from rows of data and rules on spreadsheets to a graphic depiction in wireframes – the first step towards visual design.

How Information Architecture and Visual Design Work Together

So we know what website IA does: optimizes a website to help users find what they need when they need it. And we mostly understand how IA, UX and UI are related…

We can finally talk about visual design:

Visual Design provides the subtext for the user journey – the colors, illustrations, icons, branding, font, photos and other graphics that engender feelings like trust, compassion, modern, cutting-edge, traditional, folksy, local, global – or whatever it is your brand is trying to convey.

Tweet: The most compelling visual design can’t overcome user frustration when a site’s nav is unintuitive – a common problem if IA is neglected.

And that’s the problem:

Too often, agencies lean on visual design instead of information architecture to solve content problems.

Here’s an example:

A client wants a “clean” and “modern” appearance on their website so the visual designer sets out to create a “minimal” global navigation by creating concise menu labels and a single layer menu structure. They’re doing their job as a visual designer.

And this may accommodate the design vision for the website, but does it support the users?

The designer is implementing a “flat” navigation, great for helping users explore and discover (e.g., recipes or within very small websites), but it’s abysmal at helping people locate specific, known content or for a large, enterprise-level website.

The Information Architect approaches the content question by performing user and/or competitor analysis to identify whether a flat or deep navigation is the expected structure. They’ll also do some keyword research or even a card-sort exercise to identify what language should be used in the menu labels in order to help users quickly find what they’re looking for in the global navigation.

If the research-backed answer ends up revealing that more descriptive labels and a deep navigation should be used, then we collaborate as a team to implement it while still preserving the “clean” and “modern” look of the website.

Visual Design Runs Wild…

By asking the right content design questions and embedding an Information Architect alongside the UX and Visual Designers on the project team, we liberate visual design to be what it’s supposed to be rather than trying to force it to solve for content problems.

The end result is design, content and functionality all pulling their weight and working together to provide the best user experience for your audience.

Stay tuned for upcoming blog posts on information architecture in which we’ll go into more detail about how IA and UX work together in our strategy and discovery process at Westwerk.

To learn more about Information Architecture in general, and its value for your next website redesign, check out this great article on Nielsen Norman Group, “The Difference Between Information Architecture (IA) and Navigation

And if you’re interested in a truly “content first” website design and development experience, don’t hesitate to contact us and tell us about your project!

Stay Connected

Sign up for our eNewsletter to stay on top of all things strategy, design and WordPress