UI Redesign

Rebrand implementation in the DINN app

About the project

I have worked at DINN for the past five years, primarily as the design team leader. DINN is a Mexican mobile app owned by Actinver Bank that offers fully digital investment services tailored to a young Mexican market with little experience in investing.


Around January 2022, the number of DINN users and the internal team began to grow exponentially, so as a business, we decided to meet and evaluate where we had opportunities to improve the user experience and ensure that the product was better aligned with our brand vision and user needs.


Relevant subjects for this project:

Research, conceptualization, product design (UX/UI), user testing, branding and art direction, team management and strategic vision, teamwork & mentorship.


— Although this project includes part of the rationale behind the rebranding, the main focus is on the implementation of this new visual identity in the mobile app interface.

My Rol & Responsabilities

My role in the project began by conducting visual audits, both internal and external, of the brand and the digital product (app and website). Based on the results, I then had to plan, delegate, propose, and execute, together with a team of illustrators, animators, UX/UI designers, a rebranding and visual redesign plan for the app and website.

Tools Used

Project Length

6 months:

  • 1 month: brand audits (internal and external)

  • 1 months: rebdrand *

  • 4 months: prodcut redesign, documentation, implementation
    * I'll add a case study separately that show step by step the rebrand process.

The Process

Brand Audits

1° month

Research & Rebrand

2° month

User tests | Visual exploration in the app

3° month

design system

4° month

new visual identity Implementation in the products

4° - 6° month

Internal & External Audits

We conducted two brand audits, one with the internal DINN team and another with an external vendor.


  • My role in the internal audit was to fully carry out the research and gather insights that would guide the brand decisions. In the external audit, my role was to oversee the provider's work.

— In the Rebrand Case Study I'll detailed all the insights obtained

Rebranding

This process was completed over a two-month period,

and I will dedicate a portfolio entry where I detail the entire process step by step.

I decided to mention it here because it is relevant to the redesign of the UI app and website.

Before 2022

Before the rebrand the visual identity looked something like this. These are a few examples like illustrations, social media content, ccolors, etc.


  • My rol was to design this initial visual identity in 2019 when the project DINN was just starting.

— Our primary target audience then, and still now, was people between the ages of 20 to 35 with little investment knowledge. Based on various sources we consulted at that time, only about 2% of the total population in Mexico invested in any kind of financial instrument, compared to around 58% of the population in the USA.

Some relevant points that led us to update the brand visually.

The brand sometimes appeared too childish visually, which led to a loss of credibility, even though security was one of our pillars, thanks to DINN being part of Actinver Bank.

The internal team and the volume of clients grew, making brand management unsustainable, which led to inconsistencies in maintaining a cohesive visual identity.

We wanted to convey a fresh, friendly, and supportive image that would reassure users throughout their experience with DINN, making complex financial topics feel more approachable.

DINN’s Purpose

Simplify the world of investments and guide Mexicans to a better financial life in a simple, secure, and transparent manner.

DINN’s Values

Guidence

Security

Financial Education

Simplicity

New visual Proposal

After nearly two months of work with the internal team, here are some assets that encompass the proposal for DINN's new visual identity.


  • My role was to propose the general concept of the visual identity based on the findings from the audits.

  • I suggested key elements such as colors and their usage proportions, typography, imagery, etc. I also guided the designers and illustrators so that together we could create a solid proposal and convince the entire organization of the new direction the brand would take.

We Tested Everything with Real Users

This new proposal was validated with real people to ensure that all the elements together (colors, imagery, communication, etc.) conveyed the feelings and emotions we aimed for with DINN. In summary, we succeeded.

  • My role was to plan and conduct user interviews to gather feedback on the new visual proposal.

We tested with around 25 current clients and 25 people

who were not familiar with the brand. Here are some key findings:

90% felt that the new proposal conveyed Calmness and Stability.

The other 10% felt it conveyed Sobriety and Formality.

80% believed the new proposal conveyed greater Trust and Transparency.

85% felt the new proposal conveyed greater Simplicity and Ease.

100% believed the new proposal conveyed greater Security.

60% felt the new proposal had a Guide or Mentor personality,

while 40% felt it was Reliable or Friendly.


When asked about the previous visual identity,

there was no clear pattern regarding what it conveyed.

Documenting the New Brand

Once the new proposal was validated and approved by the entire organization and the users, I documented everything in a new brand manual.


  • My role was to document everything in a manual for anyone on the team to reference, including other topics such as writing guidelines (collaborating with the communication team), the brand's history, etc.


Now, The UI

DINN APP

This is how the DINN app looked until 2022 with the previous visual identity.


  • I designed a couple of these user flows & screens back in 2019.

Visual Implementation in the App

The new visual identity was implemented throughout the entire DINN app.


  • My role was to coordinate and support the visual implementation in the app's UI and ensure it was consistent.

Before VS Now

Here are three key app screens: login, main dashboard and investment options list.

New Ideas

One of my visual proposals for this redesign was for the main dashboard and login screen.


  • The background of your dashboard, and login screen since it's the same asset, changes depending on the time of day: morning, daytime, and night.

Website

My role in this case was to completely redesign the website, not just visually but also structurally (the product team was primarily focused on the app).

UI Documentation

All components were documented in a design system to make the design and development of new screens or features more efficient for both the app (iOS & Android) and the website.

outcome

After this implementation, we have continued to make visual modifications and improvements, as with any product. We keep iterating and enhancing it based on user feedback.


I invite you to browse any social media, app store or the website of DINN by Actinver.

I want to thank the DINN design team for all their dedication and effort in executing this project with the highest quality and achieving an excellent result that wouldn’t have been possible without teamwork * :


  • Stephanía Hawley - Designer

  • Gustavo Rojas. - Illustrator

  • Margarita Astorga - Illustrator

  • Axl Espada - UI designer

  • Israel Martínez - UX designer

* Testimonials

During 2023 and 2024, the team and I have conducted various user tests on different topics (prototypes, analysis, feedback, etc.), and the most recurring comment relates to the love users have for the brand and the new app design.