2018 / XP / Rico

Rico New Mobile App

We arrived at the company when it was undergoing a digital transformation, the broker's mobile application was abandoned, both in terms of experience and engineering. Our goal was to give it a new look; we had a free card to do it from scratch.

At the beginning of the project, we were just two designers, and as we were gaining space, we started to build a team with engineers, PM, content. During the project, we did business understanding, information architecture, usability testing, micro-interactions, launch strategy and post-launch refinements.

In this project, I worked with another designer and together with the team with PM and engineers, we built the whole experience.

Problems & Goals

  • The customers poorly rated the application

  • We wanted to improve business indicators, such as visits, in-app transactions, NPS and store ratings


We managed to improve all the indicators that came in the app, number of visits, transactions, AUM. We transformed store notes that were 2.8(google) 1.6(apple) to 4.5. The project was considered a success by all.

Highlight of the New Rico Mobile App


1. Content Inventory & Heuristic Analysis

As the first step, we mapped all content and actions that existed within Rico's website and app. We wanted to have all the pieces that exist so we could start reorganizing them.

In addition to this mapping, we also structure all metadata of all financial products; we believe that this phase gave us the foundation to start thinking a different information architecture that our competitors we doing.

Content Inventory
Content Inventory

2.Information Architecture

From the mapping, we started to model and simplify the architecture. Rico had become a patchwork of content and features. We created an architectural pattern where we would have "layers" and "facets.

At the same time, we also look at the metadata and create similar categories among every type of investment(like stocks, fixed income, funds and so on). We wanted the user to find a consistency of content in all types of all products so that it would be easier to learn about an investment that they did not know.

Information Arquitecture
Macro Structure
Att. Details

3. Wireframes, Visual, Prototype

After the initial modelling phase, we went deeper into the "layers" we created and start exploring the interface of them. We decided to start with the product page because it would give us more information and knowledge to go up the "layers", advancing into the aggregators and homes/dashboard.

At first, we didn't think about constraints, we had a brainstorm of ideas, and we designed it to solve the user problems. We presented theses studies in meetings with the business team of each product area (Fixed Income, Funds, COE, etc.) and technology with the feedbacks, and we are filtering and funnelling our experience by the constrains that showed up.

With the ideas that remained along the way, we created a backlog for future developments.

Wireframe Explorations
Wireframe Explorations
Wireframe Explorations
Wireframe Explorations
Wireframe Explorations


4. Final Refinements

We did some usability test a long the way of designing the product and with the feedback we receive from users, we looked at our interactions and start refining them until we were comfortable defining an MVP .

Final Refinements
Final Refinements

5. Release Strategy - Beta Test

As we were launching a product from scratch, both from the design and technology, we created a conservative launch strategy, with a select group of beta testers. Our goal was to launch it to them and collect feedback.

We had super positive feedback that gave us the security to take to the rest of the user base.

6. Conclusion

It was an exhaustive project, creating a team, starting a product from the beginning, testing it, refining it, aligning with different product areas, launching and refining it again. With all that we have been through, I was thrilled to see the positive result it generated for customers.

Create by Pedro Pim, © 2020