How to Use Information Architecture for Better User Experience

A step-by-step guide

Pradnya
55 Minutes
7 min readAug 8, 2022

--

Example of an information architecture (IA) for one of our projects.

What’s an Information Architecture (IA)?

UXUI Designers work on large-scale projects which are huge and complex and can get very confusing if planned poorly. To mitigate that, they often create structural blueprints known as an IA or informational architecture.

An IA or informational architecture is a blueprint of the design structure which can be generated into wireframes and sitemaps of the project.

It is important to create IAs because it helps designers focus on content organization within their digital products and helps them simplify large complex processes into simpler navigation systems which help to create more intuitive wireframes. It acts as a base skeleton and well-thought-out IAs can save both time and money that would be otherwise spent on fixing and improving. Imagine you are in a room filled with many doors that lead to unknown places. It would be very confusing, right?

The 55 Minutes team recently created a simplified IA for SmartJen, one of our clients in the edtech industry. Let us walk you through how to create IAs using SmartJen’s platform as an example! But before we jump in, here is some some quick context for this client of ours.

SmartJen is an AI-enabled EdTech personalized learning system that caters to students and tutors. Tutors can create worksheets, access resources, and track students’ learning progress.

We were tasked by the founder of SmartJen, Glenn, to redesign their student and tutor platforms to make them more engaging and intuitive for their users. With their design needs and business goals in mind, we planned an extensive project to design a suitable user flow for better experiences. Here are the questions we asked and the steps we took to help them improve their platform.

1) What’s your user’s goal?

We started out by asking, ‘What’s your user’s goal? What pain point are you solving for the user?”

Generating a problem statement captures the reason for the product’s existence so it’s crucial to solidify and finalize it first. It also serves as a good starting point to drive the main user flow and user and business goals. We were brought over by SmartJen to redesign their student platform to better engage students in their learning process and to improve the usability and intuitiveness of the tutor platform.

A large product will generally have multiple main goals. The crucial thing, in that case, is to figure out the hierarchy of these goals, and whether they have the same level of importance. The SmartJen platform had multiple goals. We knew from talking with them and from our research, that they wanted to bring in more users from different tuition centers in Asia.

Secondly, Glenn wanted their product to be intuitive to use and work with. We also knew that generating worksheets was the company’s primary goal and their user’s main task. Thus we prioritized working on their primary goal first, which was to generate worksheets, and therefore we started structuring that user experience flow first. It helped create a starting point where afterward we were able to add users’ secondary and tertiary goals that SmartJen had.

The main idea here is to prioritize your product’s goals by creating the important user flows first. The rest will follow.

Imagine your user flow as a highway with the vehicle needing to reach an important destination like the hospital. Graphic provided by author.

Imagine the primary user flow as the main highway. That is where most of the traffic will be as it connects to main places of importance like our hospital and airports. It further branches out into smaller roads which are at the lower level of important places like residential area. So if you have a bad highway, users would have a hard time reaching places!

To meet Glenn’s goals, we separated the student and tutor platforms into separate projects that contained the student and tutor flow respectively. This allowed us to divide and conquer by focusing on the flows that were important to the user type (student or tutor). In each project, we numbered the flows by the order of their importance, allowing us to focus on generating worksheets for the teachers’ flow and add gamification to the worksheets for the students’ flow.

Screenshot of the two flows, one for students and another for teachers. You can see that it does look like two highways! (Click on image to enlarge.) Graphic provided by author.

2) Can your user reach the end?

Once we were done with creating the main user flows, the next step was to create the supplementary scenarios. This is where it is important to step into the user’s shoes and empathize, and we did this by deconstructing the main flows.

For students, we wanted to understand what else they could be using the dashboard for. For tutors, we wanted to know what were the other situations where they would likely be or want to generate worksheets.

The key idea here is to think about what else would be helpful for the users or where else would they need to complete the journey and organize them accordingly.

Going back to our highway analogy again, what stops might your user need to make along the way, before reaching their destination? Graphic provided by author.

Let’s use the highway analogy again. Imagine your user needs to go to the market using the highway. They need a vehicle to reach there but they find out it needs a refill. Now they need to go to the petrol station first. In perfect circumstances, they would be able to go to the market in one drive, but in another scenario, they take a different path to reach the market.

Both scenarios have the same starting and ending point by meeting the same goal, but they have taken different directions. This is essentially what user flows are! They are different user cases and scenarios. Our job then is to list out as many common scenarios as possible and add that to the IA.

However, when considering larger projects, it is important to check and see whether all the scenarios are really needed. If there are times when the IAs are still large, think about compartmentalizing the structures. Divide them into major categories and tasks and focus on each separately. Remember to check whether every page in the user journey is important. Does the page help the user know what’s coming before and after so they don’t get lost during their task? Make sure every page is necessary and is accounted for.

And we did just that for SmartJen. By dividing the flows in both the student and tutor platforms, we were able to simplify the IAs by reducing the similar scenarios where they were unnecessarily taking up space and grouping journeys that could be in one area or flow. By grouping the similar tasks, students and tutors would likely waste less time and effort and attain their goals quicker, as there were pages and spaces they would go searching for.

3. Can your user finish better than before?

Once we had a basic understanding of how the flows could be structured, we came to a point where we had to start refining and curating them. At this phase, we started by asking questions like, “Is there a better way to structure it?.” This phase is what truly sets a good UX apart from others.

The key idea here is to think of ways to make these user flows faster, more efficient, and more memorable.

We checked for cases where we thought the steps could be reduced and looked for gaps where users might get confused. To get better and more accurate insights, we conducted user research with the flow we had just developed with some target users. It’s always better to ask your users than to assume.

How can you make your user journey on the highway better? Graphic provided by author.

Let’s use the highway analogy again where the user needs to go to the market. This time, the vehicle needs an oil change along with the gas refill. Let’s assume that the current user flow is that the user goes to the garage first, then the petrol station, and finally the market. If we had to refine it, one way would be to look for a garage that does both an oil change and a gas refill. That way, the user would only need to make one stop before reaching the market. It saves both extra time and effort; this is what we try to do at this stage.

Generally, larger structures tend to already have a large number of user flows, and they are often messy and complex so it’s important to reduce and simplify. Talk to your users and understand their user journey. Since we had previously done user research for SmartJen, we understood their users’ journeys. The insights helped us develop a simpler structure by focusing on what really mattered to the main user personas. It helped shave off the unnecessary journeys.

Summary

Overall, we were able to declutter and simplify a large platform that would have been otherwise hard for their users to navigate. To develop the screens, we kept in mind the three essential ideas:

  • Prioritize your product’s goals by creating the important user flows first. The rest will follow.
  • Think about what else would be helpful for the users or where else would they need to complete the journey and organize them accordingly.
  • Think of ways to make user flows faster, more efficient, and more memorable.

Reducing and simplifying flows is crucial in large IAs. I hope you’re able to use this as a guide and further adapt it to your context when developing large IAs!

Pradnya is a UIUX designer for 55 Minutes. In her free time, she enjoys reading and learning about whatever she is curious about at that moment, as well as traveling and working out.

--

--