Week 5: Information Architecture

This week we are looking at an area of UX design that I have always found fascinating but have never known the name for, that being information architecture (iA) According to Morville and Rosenfeld (2007) “information architecture refers to the design and organization of information in a way that makes it easy to find, understand, and use. It involves creating a structure for information that is intuitive and efficient, enabling users to quickly navigate and locate the information they need. Information architecture involves not only the organization of information but also the labeling and categorization of information, as well as the design of interfaces that allow users to interact with the information. Effective information architecture is critical in ensuring that users can easily access and use the information they need, leading to better user experiences and increased engagement.”

As well as using a method that can aid in relaying the correct information to your users shall be receiving, we also looked at onboarding and the vital stage in design that this encapsulates.

  1. Onboarding process

When users onboard, they begin the process of starting their journey on your product or service. It’s an umbrella term that sums up the process of helping a new user sign up, get started and stay engaged with your app.

🕰️ Onboarding is a crucial time in the life cycle of a user.

There are three main questions to ask when designing an onboarding experience:

  1. How long should the onboarding be?
  2. What story should the onboarding experience be?
  3. When should we prompt the user to sign up?

“Effective onboarding is a crucial part of mobile application design, as it can help users understand the value of the app, establish a sense of familiarity and trust, and reduce user churn… Successful onboarding can be achieved by considering the user’s goals, creating a clear and concise message, and providing a frictionless and personalized experience.” Li & Liang (2019)

There are many types of onboarding processes

2. Artefact planning

We were asked to plan our onboarding for new users via an onboarding flow design, and I set out using Figma to design the following initial onboarding flow

Screenshot 2023-02-22 at 15.04.32.png
My initial design for my onboarding flow

My tutor gave me so feedback on the flow that said the following “with your onboarding steps consider what is going to be necessary for your user to fill in at this stage vs what is nice to have. Also, make it clear to the user why you are asking for it and what the benefit is to them completing the steps, especially when it’s personal and financial data. Also, as a lot of users want to start using things right away without having to do lots of actions so consider including a way for users to skip the steps and go straight to using the app.” I took on this advice redesigned the flow:

I looked at the nice to haves vs essentials and decided to change tack on the API data I was asking users for (see here)

Onboard flow connecting bank account apps


By designing my onboarding flow to use bank data vioan an API instead of individual charity giving account api’s and separate logins permissions I can potentially scrape a user’s complete giving profile from one step process.

3. Information Architecture

Information architecture, like how building architects use blueprints to build everything from physical structures to intricate systems such as plumbing and electrical, defines the structure, navigation, functionalities, and user interactions of websites and applications. Comparable to blueprints being an essential resource for architects constructing a building, information architecture can be a valuable asset in a designer’s toolkit.

One of my favourite examples of Information architecture on the web is contained on the website Discogs. This is a good example of information architecture as it allows you to search for many search terms from the search bar and then splits the results into faceted results. 

If I search for the drum and bass artist “break” for example, the search term gives me results that are split into 4 tabs in the search results (see below). The facets are divided into four categories “Everything”, “Releases”, “Artists”, and “Labels” – this is actually relying on the user knowing what they are looking for before searching and can get a little tricky when you have multiple artists of the same name. Still, this is a great example of IA as it allows for a wide sweep search that is needed in music due to the amount of data contained.

Screenshot 2023-02-21 at 21.32.17.png

Searching for actual releases Discogs gets even better; when you have an album, you usually have a label, distributor, country of origin, format, audio format, release year, re-release year, colour, if it’s a picture disc & catalogue number/matrix code (for vinyl).

Discogs list albums by the release year / re-issue year initally, providing the top-level information architecture in a chronological format.

The main list of albums is listed by the initial release date.

Screenshot 2023-02-22 at 11.00.09.png

Upon clicking on the main album title (above) users are provided with a faceted list of album releases again listed in the chronological release date of said album (see below); 

Screenshot 2023-02-22 at 11.00.27.png

The advantage of planning out information architecture is as follows:

  • It builds shared vocabulary and context
  • It makes sites more usable
  • It helps designers plan for scale

4. Card sorting

I used the method of card sorting to aid my information architecture for my UX prototype. I looked at all the charity categories I had to relay for the widely varying sectors and decided where they all fit. Some charities for example, could be children and poverty so creating a ‘child poverty’ category would facet the specifics of a charity such as save the Children.

adding in the categories allowed for the organisation of the categories with a flexible approach

5. Navigation

There are a few different ways to design navigation for software and websites, depending on the type of data you are working with; the main objective of navigation is to assist users in locating information and features and motivating them to perform desirable actions. Navigation elements comprise global navigation, local navigation, utility navigation, breadcrumbs, filters, facets, related links, footers, fat footers, and more. To create a successful navigation, it’s crucial to examine the underlying structure and define or refine the Information Architecture (IA). While the IA doesn’t have to be finalized before commencing wireframing and prototyping, creating a preliminary version is necessary to comprehend the scope and intricacy of the content. Selecting navigation components based solely on aesthetics can compel you to modify an optimal IA to a suboptimal one that fails to meet users’ needs or fit your content.

This is an example of how my chosen charity sectors would be put into a faceted information architecture.

Human rights:

  • Refugee rights
  • Women’s rights
  • LGBTQ+ rights
  • Racial justice
  • Freedom of speech

Poverty:

  • Hunger and food insecurity
  • Homelessness
  • Financial assistance
  • Job training and employment
  • Education and literacy

Child protection:

  • Child abuse prevention
  • Foster care and adoption
  • Education and schooling
  • Healthcare and nutrition
  • Child labor prevention

Animals:

  • Wildlife conservation
  • Pet rescue and adoption
  • Animal rights and welfare
  • Humane education
  • Animal-assisted therapy

Natural disasters:

  • Emergency relief and response
  • Disaster preparedness and prevention
  • Shelter and housing
  • Medical assistance and care
  • Clean water and sanitation

War:

  • Veterans support
  • Refugee aid
  • Conflict resolution and Peacebuilding
  • Trauma and mental health support
  • Humanitarian aid

Disease:

  • Medical research and development
  • Vaccination and immunization
  • Disease prevention and education
  • Treatment and medication access
  • Care and support for patients and families

Famine:

  • Emergency food assistance
  • Agricultural development and support
  • Clean water and sanitation
  • Education and empowerment
  • Nutrition and health support

Farming:

  • Sustainable agriculture
  • Rural development
  • Women and youth empowerment
  • Agroforestry
  • Farmer education and training

Mental health:

  • Access to mental health care and treatment
  • Suicide prevention and intervention
  • Substance abuse prevention and treatment
  • Stigma reduction and awareness
  • Trauma recovery and support

5.1 Self-criticism

In the online charity giving space, there are thousands of sectors and topics, which can make it overwhelming to sort them into separate categories. However, by using a card sorting process, I was able to choose four main sectors to include in my designs for the prototype. Through critical reflection, I realized that I did not need to understand every aspect of a process to design it fully.

Instead, I could start with a limited scope and gradually expand as I gain more understanding and feedback. Breaking down complex topics into smaller categories can also make it easier for users to navigate and understand. I was advised to continue reflecting on my design choices and seek feedback to refine the prototype artefact and better meet the needs of my users. I used the personal domain of critical reflection by reflecting on my own thoughts and feelings concerning my design process. In the past, I used to hesitate to design something without fully understanding every aspect of a process, which often led to self-doubt. However, through critical reflection, I identified this as a limiting belief, and I moved forward with a more iterative design process with far less insight and depth.

According to Mezirow’s transformative learning theory, the personal domain is an important part of critical reflection because it involves reflecting on one’s own beliefs, assumptions, and emotions. As Mezirow (1990) explains, “The transformation of meaning schemes is brought about by critical reflection, in which personal beliefs, attitudes, and values become explicit and are examined in the light of available evidence and alternative perspectives” (p. 113).

In my case, by reflecting on my own beliefs and assumptions about the design process, I could identify a limiting belief and challenge it, leading to a more effective design process.

Conclusion

In conclusion, information architecture is a critical component of the design process. Knowing how to organize and display data clearly and intuitively can profoundly impact the user experience. When combined with a successful onboarding process, users are likelier to have an enjoyable experience and engage with the platform or application tenfold.

Organizing data can be just as important as the data being displayed. It is crucial to avoid overwhelming the user with too much information and to implement hidden navigation that guides the user through the experience. When designing user experiences, it is essential to consider the user’s needs and goals and ensure that the design aligns with these factors.

By focusing on information architecture and onboarding, designers can create user experiences that are both functional and enjoyable. This can increase user engagement and satisfaction, resulting in a successful product or service. Therefore, it is crucial to prioritize information architecture in the design process to ensure that the end-user can navigate the platform or application with ease and achieve their desired outcomes.

References

Morville, P., & Rosenfeld, L. (2007). Information architecture for the World Wide Web: Designing large-scale web sites. O’Reilly Media, Inc.

Li, X., & Liang, Z. (2019). Designing effective user onboarding for mobile applications: a review and framework. Journal of Usability Studies, 14(1), 1-18.

Mezirow, J. (1990). Fostering critical reflection in adulthood: A guide to transformative and emancipatory learning. Jossey-Bass.