Results

Following Agile methodology with 2-week sprints, the project was able to go live within 5 months with us exceeding client targets for their KPIs. Citi Retail partners seeing the success started flipping to the new application and we were continually able to enhance and add to the application using agile practices while working internally and with the client.

How’d we start?

Taking a look at what’s live

Looking at the current application designs, we took note of what wasn’t working and what could be improved.

• Too long, daunting to the user upon load and scroll

• Drawers for every section

• Time consuming

• Outdated and currently not using personable language or design, but rather legal and client oriented approach

• Functionality could be improved

Competitor Research

We looked into Citibank competitors to see how they were creating their chat application experiences.

Let’s start

The original ask from the client was to create a mobile experience that utilized a chat based application. When approaching this we condensed, stretched, and gave the application a splash of paint that matched the market and made the experience on par or better to what was currently out there. To support this, a new design system had to be created to better suit the experience while considering the screen viewports and system capabilities with how they interact with html code.

First Draft

Our first version was focused on representing the drawers and forms in easily digestible and personable questions through a chat experience.

Improve & Refine

We took another stab at the designs, content, and UX, taking into consideration how doing this question by question made the process longer as well as how operating systems were interpreting components. We also reconsidered what should be branded for the retail partners to stay as true to their individual branding as possible while also streamlining the onboarding process of potential new partners.

Desktop

With the client’s approval on the direction, we then expanded to Desktop where the flow and layout needed to be reconsidered as the interface wasn’t chat dependent and there was more screen space to work with.

Expand

To support the 30 different retail partners, a robust design library was created that could be styled to match any current and new brand as well as meet all partner needs.

Documentation

By utilizing a code stack in Angular, we were able to adapt a system from chat to desktop by reusing elements to make a cohesive system throughout the customer experience. To do so, we worked with Development throughout the process, adapting our documentation methods to improve hand offs and understanding of what was intended at each stage. We provided live specs as well as a corresponding pdf book for quick reference for everyone on the client and internal team.