Revolutionizing the approach to information architecture

As an information architect for websites, as well as for IVRs, chatbots, and physical channels, I will show you one of my strongest skills. In this section, you'll gain insight into my design process and discover some of my strategies for delivering top-notch results. I'll walk you through my approach, sharing an example of an information architecture I designed for Bancolombia.

Supported by Bancolombia

Scroll down

    The challenge

    At Bancolombia, the contact center advisors relied on an outdated black-screen platform to access customer information, significantly impacting call duration. Recognizing the importance of optimizing call center operations, a key objective was to develop a tool enabling advisors to efficiently retrieve customer transaction data to address inquiries or resolve complaints during phone interactions. This initiative culminated in the creation of the 'Gestor Transaccional'.

    • Main design toolkit: Brainstorming, context research, card sorting, treejack, sitemap prototyping.
    • Role: UX designer.
    • Digital Tools: Miro, Figma, Maze, Teams.  
    • Time: 4 months.

      What is information architecture in design?

      As designers we aim to inventory, organize, and prioritize all our content to streamline decision-making processes for users. Information architecture not only facilitates users in making informed choices but also empowers them to accomplish their objectives effectively.

      Background

      Bancolombia is considered one of the most innovative banks in Latin America and one of the companies with the best reputation to work. More than 10.3 million customers in Colombia use its digital services. In 2022 the company was recognized as the best digital bank in Colombia by Global Finance. The enterprise was awarded the Best Online Portal/User Experience Design in the country.

      Branch

      Process

      To ensure a high-quality platform, the initial step in the design process involved developing the main structure, focusing on the comprehensive information architecture of the interface. Here, I delve into the meticulous design process behind the navigation menu, a pivotal component enhancing user experience.

      The context

      Value proposition statement

      An all-in-one platform consolidating customer information for advisors.
      Instant access to capitalize on commercial opportunities.
      Streamlining service times through a user-friendly, intuitive, and efficient interface.

      User description

      Hibrid Card Sorting

      To facilitate the categorization of queries, we proposed some groups to the advisors. Subsequently, they were tasked with devising their own methods to group each of the contents.

      The suggested categories were clearly understood by them. However, there was a confusion regarding the distinction between the "services" and "channels" categories.

      The following categories were established:
      - Products
      -Services
      -Security
      -Documents requests
      -Products requests

      Online Tree Testing

      Following the Card Sorting, it was determined to test the proposal with and without the "services" category, identifying the optimal option for task completion.

      The menu featuring the category "services" enabled advisors to complete tasks more quickly. In the absence of the services category, advisors were unsure where to locate specific transactions as they didn't associate any option with the search. Therefore, it was decided to retain the services category within the definition.

      Key factors

      - Upon opening a client session, the advisor should first access the starting page to have customer information readily available.
      - The main menu should facilitate easy navigation, ideally limited to three levels.
      - The order of the menu is determined by the relevance of transactions based on the analysis of phone calls.
      - The site breadcrumb should be displayed upon selecting a transaction.

      How do the main categories differ?

      Sitemap

      Navigation model

      Category placement guidelines

      To ensure the sustainability of the website's main structure, I've developed various strategies, including defining future transactions and establishing information architecture requirements. Additionally, I've implemented follow-up procedures for other designers and product owners after project delivery, enabling them to easily locate transactions. Because this is a Bancolombia document, the image is blurred.

      Visual information architecture

      Features

      Structure

      Learnings

      Information architecture extends far beyond merely creating a sitemap. It encompasses a vast array of methods and tools crucial for enhancing a website, making it a fundamental skill for UX designers. Establishing the information architecture before website development helps to avoid design errors and allows for testing, ultimately resulting in cost reduction.

      Trust yourself, your team and your results. 

      Next steps

      While the information architecture for this website is complete, future content additions may occur. Currently, the website is being implemented and each month one of the transactions within the main structure is made available to over 3000 advisors around the country.