Well-organized information architecture (IA) is vital to a pleasant user experience.

Liu, E. (2020). IA Basics: Building an Online Portal that Makes Sense. Retrieved from https://medium.com/@emilyliudesign/ia-basics-building-an-online-portal-that-makes-sense-22f10aec581e

Many times the root of a problematic UX is disorganized content. That’s why, in some projects, initiating an information organizing process can be a good first step as a designer.

Example:

In the fall of 2019, an Information Architect partnered with the David and Lucile Packard Foundation to redesign its mission-investing online portal. The original site had several issues, but the biggest challenge was its chaotic detail page, which contained an overwhelming amount of information, documents, links, and buttons in an endless, long-scrolling format.

To give you a context, here is a general user journey and where this mission investing (MI) portal comes into play:

Our users have several tasks they need to complete on this portal, some of them includes:

• Finding the existing documents
• Looking up project deadlines, next billing cycle…etc
• Uploading requiring documents
• Overwriting uploaded documents

To complete these tasks efficiently, they need to easily access different sections of the document. Right now, the only way to do this is for them to keep scrolling down to find the section they need.

An example of the original portal

Before we can enhance the site’s visual appeal, I conducted an audit of the existing website and organized all the elements into a clear structure, known as “Information Architecture.” While I am not an expert in this field, I want to share some basic insights from a UX designer’s perspective on how Information Architecture can be beneficial for both user experience and visual design.

What Is Information Architecture?

Before constructing a house, you need a blueprint that outlines all the details, structures, and features. Similarly, building a website or a product requires a plan, which is where information architecture (IA) comes into play. Information architecture serves as a blueprint, providing a visual representation of a site’s infrastructure, content, features, navigation, and hierarchy. In simple terms, IA determines how content will be organized and presented to users when they interact with your product. Although the format and details of the document may vary, the ultimate goal is for anyone to be able to read it and understand the product’s structure.

“Information architecture is the practice of deciding how to arrange the parts of something to be understandable.” — The IA Institute

Why Is IA Vital to UX

Even exceptional content and beautiful interface design can fall short without appropriate information architecture (IA). As UX designers, our primary goal is to minimize friction and confusion, creating an intuitive user experience. Information architecture helps us organize and make sense of complex information by structuring and presenting it effectively to users.

Well-organized information architecture is the foundation of an intuitive product, so having basic IA skill and understanding its disciplines is essential for designers. Having a clear structure with an understandable representation of how the website works is also vital for developing new features, iterating existing features, or for exploring future opportunities.

How to Design Information Architecture

IA design can be a part of the early UX process. The first challenge is to understand what exactly goes into a website and how the website actually works. We can then organize that information into a readable format.

Here are some of the steps I took to get a clear understanding of the information architecture:

Some basic steps to help us understand IA

1. Understand Content, Context, and Users.

An effective Information Architecture (IA) sits at the intersection of the three:

• **Define Users:** Identify who will interact with your design. Create a comprehensive list of all potential audiences. For example, possible users of this online portal include investees, project coordinators, investing staff, and others. After compiling the list, categorize, prioritize, and rank your users to determine your primary audience.
• Define Context Scenarios: What kind of environment, with what mentality will your users be in when they interact with your design? It will be helpful to illustrate some of the possible scenarios to build up empathy and understand user needs. These scenarios can also be used in validating your design.
• Define Content: What do your users need? What will they expect to see? All the contents you have need to be intentional, meaningful, and logical.

IA sits in the center of content, context, and users

2. Define Design Goals

If you’re unclear about your goals, there’s little point in diving into the design process. Once you understand your users, context, and content, it’s essential to clearly define what you aim to achieve through design. To help you get started, consider these guiding questions:

• What is the mission of the organization? What are the business goals?
• What is the purpose of the site or product?
• Why will people use this site? What are their needs?

An example from the mission investing portal project:

Define design goals

3. Competitive Analysis

Observing what others are doing can be a valuable way to reassess your own website. Take notes on various features and content present on their sites. Consider different user scenarios—how will users complete their tasks on these websites? Pay attention to aspects such as graphic elements, page size, layout, loading times, and overall aesthetics. Which elements do you find interesting? Which features effectively meet user needs?

4. Audit and Organize Site Content

Auditing a site can be time-consuming, but it is a powerful way to thoroughly understand what goes into your site, and how you should organize them. The goal here is to gather all the pieces for creating an organized structure. List out all the content elements, these are all the components you can see visually on a webpage. Make another list with all the functional features, including login, signup, upload document, search…etc. Personally, I find this step very overwhelming. But I know in order to create a clean, functional, and logical site, this is an essential step to make sure every element serves a purpose.

Using Card Sort to Organize Contents

Once you have listed all the elements, the next step is to group and label them. Organize the content into a basic structure. Two helpful methods for this are card sorting and mind mapping. In card sorting, you write each element on an index card and group the cards based on how they relate to one another. After grouping, give each group a name. It’s beneficial to include different people in this process to see which categorizations make the most sense to users.Mind mapping involves starting with a central concept and then sketching out related elements according to their connections. Using these two methods will greatly assist you in determining your site navigation.

5. Creating a Sitemap

A sitemap is a tool that helps you visualize user flow, hierarchy, and content layers of a website. Diagrams are commonly used to map out the site structure and show how different elements link together. The level of detail in your sitemap will depend on your project’s needs and what will be most beneficial for your team.

Creating a high-level sitemap

Keep the navigation system in mind. By putting all the content types into a sitemap, you should be able to identify your global navigation and local navigation. Global navigation includes links that will be consistent across every page of the site. Local navigation can change according to the content. There are also the utility menu and the footer section to consider.

6. Define Content Layer

Information Architecture goes deeper into what we call a “user flow diagram” in the UX design process. It is concerned with how content is structured and presented to a user at each touchpoint or key screen. Content Layer in information architecture is the layout and visual presentation of a specific content page.

Getting into the details of the key pages

7. Page Mock-ups

After defining the content layer, it might be helpful to create page mockups to present the site’s look and feel. I find this especially helpful in communicating with engineers and stakeholders. With mockups, they can get a picture of how the site might look.

A realistic view of the new design

8. Presentation

Finally, let’s present these findings and proposals to get everyone on the same page! I found this helpful outline created by wired.com in one of their online tutorials. I didn’t have all the details presented in that outline, but it gives me a clear structure on how to document my findings. I hope you will also find this helpful:

Additional Tips and Resources

UX Research

Same with any user-centered design projects, a good IA should come out of resources and research. Optimal Workshop is a site that I used to gather user behavior and find out what makes sense to them.

In other words, your site’s structure needs to be logical to your users. One of the most important purposes of IA is to provide users with a sense of place. Your users need to know where they are, where they have been, and how to get to where they want to be. What makes sense to you might not work for your users. Research, ask, and observe to find out what kind of organization makes the most sense.

Visual Elements

To create an effective visual presentation, consider the following elements: hierarchy, colors and shapes, and a map key/legend. Displaying visual hierarchy provides a better context for the reader and helps your team to identify key touch-points. Using different colors and shapes for different content types helps to identify quickly which part of the product you are referring to. Lastly, remember to create a legend to guide your audiences.

Useful Tools

Draw.io is a free tool for personal and professional use for creating flowcharts, user flows, and information architecture. It is also great for collaboration or working offline. Sketch and Figma are quite commonly used by designers to create IA elements also. Other tools that are more popular in the IA field include DYNO Mapper, Omnigraffle, Powermapper, Microsoft Visio, and SmartDraw.

Mindset: Build for Change

Instead of aiming to build a perfect IA, build a simple, clear, and adaptable IA. Websites and products will evolve over time, designs will change, users will adapt to design trends and develop new behavior, and this process will repeat over and over. Don’t expect IA will be “done” after you went through the design process.

I guess this is the difference between an architecture blueprint and IA. Even though the big structure might stay the same, it will always evolve as your product changes to meet new user needs.

To Conclude:

“Out of clutter, find simplicity. From discord, find harmony. In the middle of difficulty lies opportunity.”

— Albert Einstein

After the long process, here are some changes that we’ve made to improve the clarity and intuitiveness of the online portal:

1. Breaking down and categorizing information into different sections.
2. Adding a left navigation menu to let users know what and where things are.
3. Differentiate the global, local, and utility links by using different visual styles.
4. Redesign the UI for actions such as upload and overwrite so that users can easily know where they are and what to do.

Assignment

Objective:

To design an Information Architecture (IA) sitemap that effectively organizes and represents the structure of a website to enhance user navigation and experience.

Assignment Guidelines:

1. Choose a Website Topic:
   • Select a subject for which you would like to design a website (e.g., a personal portfolio, an e-commerce store, a blog, a non-profit organization, etc.).
2. Conduct Research:
   • Research similar websites in your chosen topic area. Analyze their structure, navigation, and user experience. Note what works well and what doesn’t.
3. Define User Personas:
   • Create at least two user personas representing the website’s target audience. Describe their demographics, goals, and behaviors.
4. Outline Main Content Areas:
   • Identify and list the main content areas or sections of your website. This could include pages like Home, About Us, Services, Blog, Contact, etc.
5. Draft a Sitemap:
   • Using a diagramming tool (figjam), create a sitemap visualizing the structure of your website. Include:
     • Main navigation items (primary pages)
     • Sub-navigation items (secondary pages)
     • Any other relevant content areas (e.g., FAQs, testimonials, product categories)
6. Describe Navigation Strategy:
   • Write a brief description (300-500 words) about your navigation strategy. Explain how users will interact with the sitemap and access information. Mention design considerations based on your user personas.
7. Submit Your Assignment:
   • Include the following elements in your submission:
     • The final sitemap diagram.
     • The user personas.
     • The navigation strategy description.

Assessment Criteria:

• Clarity and usability of the sitemap.
• Relevance and depth of user personas.
• Thoughtfulness of navigation strategy.
• Overall presentation and adherence to assignment guidelines.

Figma Sitemap Template II

Figma Sitemap Template I