Removing Information Architecture from the User Interface

Visual Communication with IA

The first project I worked on as a freelance designer was one in which I was tasked with redesigning the navigation system and taxonomy for a client’s travel-related website . When people hear “redesign”, it’s likely their mind will jump to some kind of screen or interface designs. However, I was faced with the unique challenge of not designing screens for this project – so rather than calling it a navigation redesign, it would be more accurate to say the project was about reorganizing and restructuring the navigation, and creating a recommendation for how the content should be grouped throughout the site.

When people hear “redesign”, it’s likely their mind will jump to some kind of screen or interface designs. However, I was faced with the unique challenge of not designing screens for this project.

One common misconception of user experience (UX) designers is that we’re “those people that create wireframes.” I do create wireframes, but that’s a relatively small part of a much larger and more complex process of research, consolidation, understanding, communication, and validation.

As UX designers, one of the biggest parts of our job is to communicate our ideas effectively. In the screen design stages of my projects, I use wireframes as a communication tool to help clients understand and visualize my recommendations before investing too deeply into visual design or implementations.

As UX designers, one of the biggest parts of our job is to communicate our ideas effectively.

For this project, I was tasked with making navigation recommendations without showing screen designs. My approach to this involved several rounds of research – first, I used surveys to find out how users prefer to navigate and find trips on a travel website, taking their level of flexibility on dates and destinations into account. Second, I conducted a card sort to determine users’ taxonomy expectations for how content should be grouped on the site. I combined these two sets of research to determine which content should be used in search behavior or filtering, and which content that should be used as part of the main navigation and other browse behavior on specific pages.

Without wireframes, I faced several challenges around communication. It was difficult for me to use these documents to help my client understand the meaning without getting into very specific discussion of UI (user interface) implications and behavior, the answers to which I hadn’t been able to consider yet. Additionally, I had a disconnect in the way I was thinking and talking about taxonomy and affordance – the difference between the information architecture and the interface was often blurred and unclear.

Because humans are visual creatures, it’s much easier to communicate using a visual aid than to explain an idea using only words (does anyone really enjoy reading business requirement documentation?). During the course of the project, it felt at times as though I was restricted in my communication abilities by being unable to use wireframes as a tool for discussing my concepts and helping the client understand my recommendations. I even had some challenges communicating internally, too – after getting so deep in the trenches with these documents, the only way to further explain what I meant to each other was to do a quick sketch.

The Value of Putting IA First

However, the fact that I wasn’t doing screen designs didn’t mean I was locked out of all visual aids as means of communication. I delivered a set of documents that included taxonomy and site maps, among other detailed explanations and diagrams for how users would navigate between pages on the site. Building and iterating through many taxonomies and navigation concepts that came out of the research helped me set a clear pathway for how screens could be designed in the future, without focusing on the specifics of UI interaction and layout.

Just because I wasn’t doing screen design didn’t mean I was locked out of all visual aids as means of communication.

The deliverables I created had not only helped me build on my navigation and taxonomy concepts, but also set me up for screen design by adhering to the separation of what needs to be on the page from where and how it needs to be on the page.

Here’s a breakdown of my deliverables, and the insights given for future UI considerations:

  • Taxonomy – My research results from the card sort gave me insight into how the content should be grouped. Some of my survey questions gave me insight into how users would prefer to prioritize certain filters and navigation behaviors. These helped inform what should be in the global navigation, how content should be grouped within a particular section or category, and how users expect different filtering and tagging options to be grouped and prioritized.
  • Page flow & templates – Allowed me to picture how users would navigate from page type to page type, giving me a high-level vision of what elements would be necessary on each template (links, search elements)
  • Tag behavior documentation – I used this to explain how people navigate throughout the site by using tags. This allowed me to picture some of the page elements that could be used as cross-category navigation and/or featured content on certain pages.

All things considered, the opportunity I had with this project to focus solely on information architecture was a unique one. Despite not using screen design, I still communicated my ideas with visual aids to help the client understand the flow of heavy data throughout the site. Because of the deep-in-the-trenches thought that came along with those deliverables, I firmly believe that this heavy up-front focus on research-based IA can only help in creating solid UI designs for this and future projects.

Leave a Reply

Your email address will not be published.