Information Architecture, App Puntos Colombia

Hi Dribbblers 🏀,

I'm excited to share my project for the Puntos Colombia app with you. Let's start!

Overview

Puntos Colombia has evolved the purpose of all its digital channels, particularly the application, to become a 100% transactional platform that integrates financial services.

The objective of the new information architecture is to present users with all new and existing products in a simple way, allowing them to explore numerous alternatives for accumulating and redeeming points.

Background

Puntos Colombia is a loyalty program born from a partnership between Éxito and Bancolombia, rewarding users for shopping at affiliated stores and using the bank's credit cards. Learn more about Puntos Colombia here.

Creating the new app's information architecture brought about significant challenges and learnings, including:

Exploration of architecture concepts: Our team developed two concepts during the ideation stage to connect extensive and complex information within a new architecture.

Testing with two architecture proposals: As the sole UX designer on the team, I conducted testing with two prototypes, comparing completion rate, directness, CES, and the number of errors. These results were instrumental in defining the final proposal.

Identification of opportunities to differentiate: Through interviews on the new products, I uncovered deeper insights that were crucial for differentiating the product within the new architecture.

The Process

At Xperience Design, we follow the Double Diamond model for the UX process, where we define project deliverables. Applying this model enhanced the creative process efficiency, considering that we were a team of four and had limited execution time. My team consisted of the Director of Digital Products, a Service Designer, a UI Designer, and myself as the UX Designer.

Research: Understanding the Problem

Discover

During the research and analysis stage, the Service Designer and I conducted ethnographic interviews with stakeholders, with the participation of the app's Product Owner in sessions with Technology, Product Management, Marketing, Security, Data and Media, Operations, and Payment Center.

The script consisted of semi-structured questions addressing:

The app's role for each stakeholder and users.
Key app services and functionalities for the business.
Short, medium, and long-term vision for the app (1, 3, and 5 years).

In this initial stage, I also conducted a content audit, listing all features and available information. Based on the stakeholder interview results, our team decided which information to retain, discard, and how to integrate content within the new architecture for clarity.

Define

In this stage, which is part of the research process, we conducted in-person testing (using qualitative and quantitative questions) on the existing app to identify insights and opportunities for improvement in the products that would continue to be part of the app.

Testing was performed with 15 users, segmented into 3 User Personas that I created and validated with the client, taking into account their familiarity with other banking products (such as banking apps) and their use of points.

Finding and Results Report

Upon completing the research stage, we presented the results report to the client, taking into account:

Stakeholder research results.
Analysis of the information architecture of the old app.
User testing results.
Customer Journey.
Desk research (an analysis of the architecture of similar apps).

During this stage, in my role as a UX Designer, I had the opportunity to review key performance indicators of various products, including the Help Center, Monetized Spaces, and embedded products such as the Online Store and Travel.

Design: Solving the Problem

Develop

Once we collected and analyzed the information, we explored different pre-concepts with the client, including super apps and architectures that cater to "moments of use." We arrived at two alternatives that align with the business's scope and user journey:

Architecture Concept 1: Loyalty Core

This concept aims to enhance the efficiency of accumulating and redeeming points, which are the main attraction for users. It includes a public zone.

I strategically proposed monetizable spaces to engage users through the benefits of accumulation, savings, and point redemption, moving away from traditional advertising strategies that focus solely on displaying brands or products.

Architecture Concept 2: Service Ecosystem

In this concept, the program is portrayed as a dynamic ecosystem where the home content changes based on user usage.

In this second proposal, I suggested creating personalized strategies for more effective ad segmentation, depending on user behavior patterns.

Mid-Fi Wireframes and User Testing

As the UI Designer and I designed the interface and navigation in Mid-Fidelity Wireframes, we shared possible interactions with the development team to assess technical limitations and begin defining user stories in the next stage.

These two wireframes served as input for user testing, allowing us to iterate towards the new architecture. I created a remote testing scenario with 15 tasks using Useberry, as it enabled screen recording and the generation of heatmaps.

To consolidate the results of both tests, we used Treejack from Optimal Workshop, which facilitated the visualization of the user path when completing a task.

Results were consolidated as follows:

By comparing the results with the initial testing, we made decisions on the final information architecture's construction, including the navigation map from the home.

Deliver

With a clear information architecture, we designed Hi-Fi Wireframes and shared them with the development team to measure the MVP's scope. During the execution of the high-fidelity wireframe with the new design system, we had the opportunity to integrate new products into the architecture, as it was designed to accommodate additional features without affecting its structure. It continues to incorporate more features. You can interact with the prototype here.