IA Basics: Building an Online Portal that Makes Sense
Well-organized information architecture (IA) is vital to a pleasant user experience
“For every minute spent organizing, an hour is earned.” — Benjamin Franklin
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.
In the fall of 2019, I partnered with the David and Lucile Packard Foundation to redesign its mission investing online portal. There were several issues with the original site, but I found the biggest challenge was its chaotic detail page with 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
In order to complete these tasks efficiently, they need to get to different sections of the document easily. Right now the only way is for them to keep scrolling down to find the section they need.
So, before we can “make pretty” of anything, I audited the existing site and organized all the elements into a clear structure, which is known as “Information Architecture.” I am not an expert in IA, so I’m sharing only the basics from a UX designer’s viewpoint and how IA can be beneficial in UX and visual design.
What Is Information Architecture?
Before building a house, you need a blueprint with all the details, structure, and features. Building a website or a product is the same, and that’s where information architecture (IA) comes in. Information architecture is a blueprint, a visual representation, of a site’s infrastructure, content, features, navigation, and hierarchy. Simply put, IA defines how content will be structured and presented to users when they are interacting with your product. While the document format and its details may vary, the goal is that anyone should be able to read it and understand how the product is structured.
“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 great contents and beautiful interface design can fail without a fitting IA. As a UX designer, our goal is to reduce friction and confusion in order to create an intuitive user experience. Information Architecture enables us to make sense of complex information by structuring and presenting it to users in a way that is effective and understandable.
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:
1. Understand Content, Context, and Users.
An effective Information Architecture (IA) sits at the intersection of the three:
- Define Users: Who will interact with your design? Make a list of all possible audiences. For example, possible users for this online portal include Investees, project coordinators, Investing staff…etc. After listing them out, categorize, prioritize, and rank your users to find out your main users.
- 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.
2. Define Design Goals
If you don’t know what you’re trying to achieve, why bother designing it? After figuring out users, context, and content, we need to define what we are trying to accomplish through design. Here are some helpful questions to get you started:
- 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:
3. Competitive Analysis
Knowing what others are doing is a good way to re-evaluate your own site. Take notes on different features and contents they have on their sites. Remember the user scenarios? How will users accomplish their tasks on these sites? Some things to pay attention to include graphic elements, page size, layout, loading time, and the overall look and feel. What are some things you find interesting? What are some elements that are helpful in meeting 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.
After you have all the elements listed out, it’s time to group and label them. Organize the content and put them into a basic structure. Here are two helpful methods: card-sorting and mind mapping. Card-sorting is where you write all the index cards and group them according to how they relate to one another. Give each group a name. Find different people to repeat the same process to see what kind of categorization makes the most sense to users. Mind-mapping is where you have a starting point, and you sketch out all other contents according to their relatedness and connections. These two methods will be very helpful in determining your site navigation.
5. Creating a Sitemap
A sitemap is a place where you visualize user flow, hierarchy, and content layers. Using diagrams is a common practice to visually map out the site structure and link elements to one another. As for how detailed your sitemap should be will depend on your project and what would be helpful for your team.
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.
7. Page Mock-ups
After defining the content layer, it might be helpful to create page-mockups to present the look and feel of the site. I find this especially helpful in communicating with engineers and stakeholders. WIth mock-ups, they are able to get a picture of how the site might look like.
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:
- Breaking down and categorizing information into different sections.
- Adding a left navigation menu to let users know what and where things are.
- Differentiate the global, local, and utility links by using different visual styles.
- Redesign the UI for actions such as upload and overwrite so that users can easily know where they are and what to do.
Thank you for reading and being a part of my learning journey. Feel free to drop me a note via LinkedIn, I’ll be happy to respond!
