UX Awakening

In my inaugural adventure on a complex project, leading the transformation of Business Banking, I embarked on a journey that fueled my curiosity for User Experience.
This opportunity immersed me in Design Systems and introduced me to Design Thinking, opening my eyes to an entirely new world of design

• Migration from ASP.NET to .NET to meet evolving user demands.
• Users face difficulty completing tasks due to unclear information organization.
• Call center requires substantial resources; marketing data highlights platform's financial management potential.
• Platform lacks consistent design and unified design system.

Day of launch: The launch date aligned with specific business objectives, requiring collaboration across departments for a successful rollout in only 8 months.

One designer: Limited budget necessitated solo tackling of various challenges, including bias, redundancy, and lack of detailed refinement.

Documentation: Crucial timing required dynamic and comprehensive documentation to facilitate efficient problem-solving by the development team.

Clear Layout

The new layout establishes a hierarchy of content, prioritizing important information and directing user attention to key areas of the interface.

The information was scattered across the entire screen. We reorganized it into main groups and subgroups. We defined three sectors:

• Primary Navigation (Static Content)
• Dynamic Content Area
• User Account Details

Information architecture: Menu intuitive, logical and accesible

New menu was organised in a way that reflects the user's mental model, allowing them to easily anticipate where information is located and how to access it. We implementing a new labelling, categorization, and establishing a user-friendly navigation system that promotes seamless access to information.

Previous Accordion Menu Design

Updated Mega Menu Design

Five advantage of usign Mega Menu:

• Better Visibility: Mega menus show more options at once, making it easier to find information quickly.
• Improved User Experience: Users can navigate complex sites more easily with clear and structured content.
• Better Organization: Mega menus can handle more categories, keeping content well-organized.
• Increased Engagement: More visible options encourage users to explore more of the site.
• Modern Look: Mega menus provide a cleaner, more professional appearance.

UI: Consistent and unified styles

It was time to systematize and organize the different styles within the interface. Using brand definitions, I created new icons and elements to establish the visual language of the new design system.

New cohesive set of icon designs.

Banners and Notifications

The banner was designed to display dynamic information. We established a character limit to effectively convey daily messages to users. Notifications were also designed according to our design principles. This approach was essential for maintaining consistency with our style guidelines and ensuring that our communications seamlessly integrate with the overall visual aesthetic.

Forms

With the idea of atomic design methodology, I designed the different atoms that we can use to create more complex structures (Headings, subheadings, labels, dropdown menus, buttons, links, etc.). This method gives us the flexibility to build to the needs of the site and also aligns with the design style guide.

Documentation

To ensure seamless communication with the development team, creating documentation was the final, yet crucial, step. Design and code must coexist harmoniously.

The style documentation ensures that all developers follow a consistent design. The team can consult the documentation and apply the established styles directly, speeding up the development process and improving efficiency.

Designing, coding, and documenting all needed to be done concurrently. This simultaneous effort was challenging, but it taught me to think holistically.

Documentation Version 2.0 2015.

After several months of designing, coding, and documenting, the big day finally arrived. Launch day was just the beginning of an exciting journey.

I worked closely with two departments:

• Marketing: This team provided valuable data about our users, helping us make informed decisions. They served as the voice of our users, supplying research information such as surveys, online comments, and phone call feedback. They managed all user feedback.
• Development: We worked side by side to ensure the design was implemented correctly. The ongoing documentation provided developers with the necessary information to continue with the entire migration process.

The Hit

Within a week of the launch, our customer support team received numerous complaints from long-time users who felt overwhelmed by the new app.

We anticipated that this complete overhaul would be challenging for our users and expected they would need assistance. However, we were overwhelmed by the volume of complaints, which was a significant setback for us.

Addressing the Problem

Quick decisions had to be made. Our users' finances depend entirely on us, so to address the complaints, we decided to have the two systems coexist. This decision would give us the time to analyze and resolve the numerous issues expressed by users.

Learning from Mistakes

Step by step, we began releasing video tutorials on how to use the app. At that time, it was more common for users to rely on the call center to address all their issues. After a couple of months, we learned a few crucial things:

• Enviroment matters: In 2013, the bank adopted focus groups as the main technique for listening to the voice of the user. After the big "hit," we understood the relevance of seeking new methods or techniques that address real needs. We truly grasped the importance of testing our product in the most realistic environment possible.
• Finances. Evolving with Care: The application hadn't changed for many years, so it was crucial that each change came with an explanation to provide security and control to our users. While we initially allowed users to experiment with the new system, we realized that finances are a delicate issue and require a more controlled approach.
• What Users Say vs. What Users Do: We learned that what users say is not always what they do. We talked to users, showed them the new menu and link arrangements, and our selected users always agreed with us. However, in the real environment, with pressure, real needs, time constraints, and many years of seeing elements displayed in one way, it turned out to be a source of frustration for our users.