Azimo web app

Azimo is a global FinTech company specialising in remittance and money transfer. Launched in 2012, Azimo offers a digital end-to-end customer experience that allows users to send money to more than 190 countries in 80 different currencies, making it one of the top FinTech companies in terms of market reach.

I was responsible alongside other members of the Azimo product team for the complete redesign of the Azimo web app, from extensive research and user interviews through to creating bespoke UI component libraries, illustrations and user flows, as well as supporting the development team in the continual iteration of the product. You can read more about the process and outcomes below.

Team Involved: Jozef Kocur Hayley Caitlin

Date: 2017 - 2018

Field: UI design, Product Design, Illustration

Client: Azimo

Press: Finextra, UKTech, Tech Crunch, Financial Times


Building the foundations

Research & explorations

The first step in redesigning the Azimo web app was to understand the existing customer experience, acknowledging not only the elements we wanted to improve, but, just as importantly, its core strengths. We conducted a number of user interviews to try to understand what our customers were looking for and were missing so far. All this data and feedback informed our initial explorations and allowed us to build refined concepts that we would take into account throughout the design process. For customers, it was clearly important for the process to be simple, quick and personalised while instilling a sense of trust.

The redesign of the Azimo web app was not only driven by providing a better user experience, but by rebuilding the infrastructure of the site to be faster. As shown below, our initial explorations and research allowed us to completely transform the experience of sending money to feel less cluttered and more personal, creating a new transfer journey that flows vertically like a conversation. This user flow allows customers to send money in four simple steps.

A new dashboard was built to not only review recent transactions and activities more easily, but to have full visibility of the status of existing transfers, allowing for greater transparency throughout the transaction process. Every screen of the web app was redesigned not only visually, but in its very code and infrastructure, allowing for a lighter and more efficient user experience. This also laid the foundations for ongoing iterations of the product.

 Preliminary explorations and sketches for Azimo web app - Domingo Widen

Preliminary explorations and sketches for Azimo web app - Domingo Widen

 Old Azimo web experience vs new web app - Domingo Widen

Old Azimo web experience vs new web app - Domingo Widen

UI kit & component library

One of the most important steps in the whole process was building the design foundations for all future iterations of the web app; this included the creation of a brand new component library. This process allowed us to completely rethink fundamental elements like typography, colour, navigation and hierarchy of information. The aim of creating this library was to make teams more efficient by having a single place to reference all product components; this was particularly valuable for our developers and designers who could access the library to build and reuse components in a consistent and standardised fashion. The component library ultimately made it easier to bring new team members up to speed, providing our people with a guide to ensure consistency in product execution and giving them more time to spend on tasks like prototyping or iterations.

 UI Kit components #1 - Domingo Widen

UI Kit components #1 - Domingo Widen

 UI Kit components #2 - Domingo Widen

UI Kit components #2 - Domingo Widen

Iconography & illustrations

Azimo's illustration style was driven by the new brand narrative. Taking the concept of fluidity and movement of money, we created a style that brought to life the brand's core values by showing illustrations comprised of shapes and lines that flowed from one to another seamlessly. With input from Confederation Studio, the agency responsible for the Azimo rebrand, we managed to create a unique style that was not only modern and recognizable, but also scalable across all our products. Despite the fluid illustration style, its construction was based on geometric forms and the consistent use of strokes in a way that created a connection between the more complex illustrations to the simpler ones. I was personally responsible for the evolution of the style, from its conception to its execution across all marketing materials and digital products (apps and web).

 Iconography & Illustrations - Domingo Widen

Iconography & Illustrations - Domingo Widen

 Illustrations used in security page on azimo.com - Domingo Widen

Illustrations used in security page on azimo.com - Domingo Widen


Results & features

Sending money experience

The most important journey the user will take on our web app is the act of sending money. We wanted the experience to feel as natural as a conversation. This meant moving away from the traditional user experience of following a horizontal flow, and instead designing an experience which was based on four vertical steps, mimicking a chat. By basing the user flow around three simple questions ("Where?", "Who?" and "How much?"), followed by a clear call to action to "Send". This helped walk the customer through the transaction process in a way that was not only simple and personal, but helped instill a sense of trust and transparency. As shown below, the new layout not only provided customers with a smooth user flow, but allowed us to take full advantage of rich web app features.

 Send money flow - Domingo Widen

Send money flow - Domingo Widen

 Send money flow desktop - Domingo Widen

Send money flow desktop - Domingo Widen

 Send money flow mobile web - Domingo Widen

Send money flow mobile web - Domingo Widen

Dashboard

We designed the Azimo dashboard to be as straightforward as possible. To achieve this, we created a system of interchangeable modules that displayed key information (e.g. recent transfers, popular recipients etc.). The beauty of the design is that it can easily evolve to show rates, promotions, content or other interactive elements, allowing us to create a truly tailored user dashboard. The Azimo dashboard is a perfect example of atomic design. Cards are created using specifications from our component library and then created by merging smaller components like titles, lists, input fields etc. The outcome was not only a dashboard  optimised to work across all screens, but its consistent code allowed for simpler updates and and a/b testing. 

 Dashboard animation - Domingo Widen

Dashboard animation - Domingo Widen

 Web app dashboard - Domingo Widen

Web app dashboard - Domingo Widen

 Home, transactions & recipients - Domingo Widen

Home, transactions & recipients - Domingo Widen

Transaction status

When it came to transactions statuses, the overarching goal was to provide as much transparency to the user as possible. Each status is colour-coded throughout the user journey, making it easier for customers to track transaction lists or emails. Statuses are also designed to provide relevant descriptions and actions followed by recipient and transfer information. The hierarchy of information was carefully organised in a way that allowed users to quickly and easily find out what's happening when, if an action is required, details about the recipient and how much money was sent.

 Transfer delivered - Domingo WIden

Transfer delivered - Domingo WIden

 Transaction status desktop - Domingo Widen

Transaction status desktop - Domingo Widen

Invite a friend

Azimo's acquisition strategy is focused largely on effective referral schemes. We therefore knew we needed a dedicated page for inviting a friend to join. This was a great opportunity to put our illustration style into practice to clearly describe the steps needed to get rewarded for inviting a friend. We were also able to draw on our component library to quickly create a design that was both branded and consistent with our product UI.

 Invite a friend page - Domingo Widen

Invite a friend page - Domingo Widen

azimo.png