Designing Better B2B E-Commerce Experiences: Information Architecture and UX

Consumers have little patience for bad experiences. They expect to find exactly what they want quickly, easily, and intuitively — and will move on swiftly if they cannot.

Whether you’re creating a new digital product or going through a digital transformation, you need to structure your content in a way that makes sense to the end-user and makes it easy for them to continue their journey.

Creating great user experiences goes beyond building a beautiful-looking website. The best user experiences usually go unnoticed by the actual user because the user flow through the information provided feels so intuitive that it doesn’t seem designed at all. And that’s where information architecture comes into play.

# What is information architecture?

Information architecture, also known as IA, is the practice of organizing, structuring, and labeling information in a clear, logical, and user-friendly manner. It involves the design of information systems, websites, applications, or any other digital platforms where users need to navigate and interact with content. The term was originally coined in the late 70s but gained popularity in the 90s when the internet became mainstream, and companies began experimenting with website design. These experiments resulted in a broader discipline called user experience design (UX) of which information architecture is a foundational piece.

# The Role of Information Architecture in UX

Good UX requires good information architecture as a basis, but they, along with user interface (UI) are different components of digital design. Information architecture can be seen as the blueprint or foundation for UX design, or you can look at it as the layer between the systems and data in the backend and the interactions and visuals on the front end. UI focuses heavily on the visual experience and emotional effects while information architecture focuses on the less flashy elements like taxonomy, categorization, structure, and flow of information.

In our experience, information architecture oftentimes is given less attention or overlooked, and the focus is put on user interface (UI) designs instead. This can lead to poorer online customer experiences with lower ROI as a result.

# Why is information architecture important?

The primary goal of information architecture is to optimize the effectiveness of your website. If done well, it enhances the user experience by enabling users to find and access the information they need as intuitively as possible. For B2B businesses, good information architecture improves usability, can support scalability, and ultimately drive more sales.

# 6 Reasons Why Information Architecture Is Critical for Great Digital B2B Experiences

1. Complex product offerings: B2B e-commerce websites often have more complex product offerings than B2C, including a wider range of products, variations, and customizations. A well-structured information architecture helps organize these complex offerings, making it easier for customers to find and understand the products they're looking for.
2. Diverse customer segments: B2B businesses typically cater to a wide variety of customer segments with different needs, preferences, and levels of expertise. A well-thought-out information architecture can help accommodate these diverse user groups by organizing information and navigation in a way that makes sense to each segment, ensuring a more efficient and personalized user experience.
3. Streamlined purchasing process: B2B transactions often involve large order volumes, long-term contracts, and multiple decision-makers. Effective information architecture can simplify the purchasing process by providing clear and organized information about product specifications, pricing, and shipping options, making it easier for customers to make informed decisions and complete transactions.
4. Improved search functionality: B2B customers often have specific requirements and seek products that meet exact specifications. A solid information architecture that incorporates effective labeling, categorization, and metadata can improve search functionality, helping customers locate the exact products they need more quickly and efficiently.
5. Facilitates customer education: B2B customers often need more detailed information about products and services than B2C customers, including technical specifications, case studies, and industry-specific applications. Well--organized information architecture can make it easier for customers to find and access this information, helping them make informed purchasing decisions.
6. Integration with other business systems: B2B e-commerce websites often need to integrate with other business systems such as CRM, ERP, and inventory management systems. A robust information architecture can help facilitate seamless integration, ensuring accurate and up-to-date information is available across all platforms.

Related Content: How to Future-Proof Your E-Commerce

# The Three Core Elements of Information Architecture

1 | The user – What are the intentions, behaviors, and expectations of your visitors?

People look for information in different ways, we call these mental models. These models are influenced by a user’s previous experiences. That is why, for example, Amazon’s website creates expectations for your website. This leads to unofficial guidelines and sparks a conversation about personalization vs. standardization. A simple example is the search bar. As consumers, we have come to expect to find a search bar on the top of a page. If you choose to locate the bar or magnifying glass icon elsewhere, you risk confusing visitors and losing them. Always seek to show the user what they are looking for and where they expect it.

One example of integrating the user into information architecture is allowing for different ways for users to search and find information. While you can use different ways of classification, never mix two ways of classification. For example, if a customer chooses to use search, don’t require them to use a category menu to refine their search. Instead, make the search function powerful enough that refinements can be made within the search bar.

2 | The context – Consider where, when, why, and how users are digesting your information.

Some parts of the context are straightforward, such as desktop vs. mobile or browser vs. app. But some contexts are more obscure like the four categories identified by Peter Morville and Louis Rosenfeld:

1. Looking for something specific
2. Browsing for inspiration
3. Doing in-depth research
4. Re-finding something

For example, search is a great tool and could eliminate the need for logically structured menus and dropdowns. But it’s opaque and requires people to know what they are searching for. Search doesn’t allow you to see the full scope of what is available and is therefore not valuable for people browsing for inspiration and doing in-depth research.

Another valuable lesson regarding context, as well described by Robert Sens, is that effective, user-centered design does NOT prioritize novelty over discoverability or aesthetics over usability.

An example by Robert Sens 
(Image Source):

3 | The content – What content are you dealing with and what is the relevance for the user?

There is more information available on the internet than we can consume. Most likely, a visitor on your website is there for a reason. They are looking for specific information: they want to know things about a product or service, they’re looking for information to inform a decision, or they want to be entertained, for example.

Your content needs to be relevant to the user instantly yet shouldn’t overwhelm them. There is a term called cognitive load. This is the brain power needed to process information. The higher the cognitive load, the more users you will lose. A way to manage cognitive load is by using segments, cascading pages, filters, and sorting options or a save or compare function.

A great example of this would be your product page. Keep a product page simple with the potential for infinite scroll rather than using pre-defined areas to highlight certain products since the product or the number of products will likely change with time.

A valuable exercise to evaluate your content and its hierarchy is called a content audit. It will help you understand all the information available on your website, what the function is of each piece, and how it relates to each other. A common way of representing this is called a content map.

# Getting Started: Information Architecture Design Process

1 | Mapping:

• Research and Data Gathering: Gather all available information about the website or application's content. This includes text, images, videos, and any other type of information the website will have.
• Content Audit: For a redesign, document and analyze all the existing content noting what's useful, what needs updating, and what can be removed.
• Card Sorting: Utilize card sorting techniques with actual users to understand how they perceive the structure of the website and categorize information.
• Create a Sitemap: Based on your research, create a sitemap that details how site pages are connected. This gives a bird's-eye view of the overall structure.

2 | Modeling:

• Identify User Goals: Based on user research and personas, identify the main goals users have when visiting the site.
• User Flow Diagrams: Create user flow diagrams that visually represent the paths users might take to achieve their goals.
• Wireframes: Develop low-fidelity wireframes to provide a simplified visual guide of each page's structure.

3 | Prototyping:

• Develop High-Fidelity Wireframes: These wireframes should include more detail than the low-fidelity versions. They might include exact placement of buttons, images, and other elements.
• Interactive Prototypes: Use a tool like Sketch, Figma, or Adobe XD to create an interactive prototype. This allows stakeholders and users to navigate the website as if it were live.
• Add Functionality and Content: Ensure the prototype includes all the necessary functions and actual content to make the user interaction authentic during testing.

4 | Testing:

• Heuristic Evaluation: Conduct a heuristic evaluation to identify any usability issues based on established usability principles.
• Usability Testing: Perform usability testing sessions with actual users. Observe how they interact with the prototype and note any areas where they encounter difficulties.
• User Feedback: Collect feedback from users about their experience. What did they like? What could be improved?
• Iteration: Use the insights gained from testing to refine and enhance the design. Repeat the testing process until the design meets the usability and user experience goals.

Information Architecture and UX design are iterative processes so you may need to go through these steps multiple times before arriving at the best structure for your users.

Just like many products and their designs, when done well, it becomes invisible. For information architecture, it’s no different. A well-architected website flows so naturally that the user doesn’t realize it was intentionally designed this way.

# Creating Scalable Digital Experiences

Reach out to our experience design team to learn more about information architecture and UX and how we can support and enhance your digital transformation and modernization. We can help you create user-friendly and scalable digital experiences that drive results.