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.

As the sole Product Designer assigned for this product, I was responsible 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. I worked closely with the Product manager and supported the development team in the continual iteration of the product. You can read more about our process, the different elements and final results below.

Team Involved: Jozef Kocur Hayley Caitlin Dan Martins Richard Giannetti

Date: 2017 - 2018

Website: www.azimo.com

azimodomingowiden.png
 

The challenge

Upon joining Azimo, the company was undergoing a period of rapid growth expanding the product team to improve their existing offering. One of the products requiring a refresh was the existing web experience, built in 2012 as the company's first digital product. The service was built on an old platform which made new releases and updates complicated. The need from the engineering team to migrate the web experience to a new platform opened the opportunity to rethink the user experience from the ground up and refine the digital offering moving forward. The main challenge was to identify what users wanted in a new experience. Working in close collaboration with the engineering team, we needed to ensure the new vision matched the new platform capabilities.

 

The process

For the redesign of the Azimo web app, we adopted design thinking methodology, first establishing a clear picture of the existing offering and then using all the information gathered to define problems we aimed to solve with the redesign. Ideating solutions for this specific project also gave us the opportunity to look ahead and work towards a vision of where we wanted the product to move forward. It was important for us to continually test and iterate, including user interviews and testing on a weekly basis to prove or disprove hypotheses regarding the new experience.

00_AzimoWeb_domingowiden.png
 

Discovery


Research

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 its core strengths as well. We conducted a number of user interviews to try to understand what our customers were looking for and what was missing. 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. Our research showed that users went into the process of sending money with a lot of apprehension. Distilling the journey into simple steps and adopting a simple and approachable tone of voice was crucial in addressing this challenge.

 

Target users

Due the the fact that this was a redesign of the whole web platform, our solution needed to address the needs for all platform users. Azimo has a wide range of users from different backgrounds and nationalities all with the need to send money to other countries. In order to design for such a wide range of users, we focused on the user mission of sending money and regularly stress tested that simple task with users from different backgrounds to ensure we gathered sufficient feedback. When it came to sending money, regardless of the trigger that brought the user to the platform, we needed the process to be as simple as possible for all users.

 

Definition


Problem

We observed that the current web experience was cluttered and built on an old platform, impeding regular updates or improvements. The service confused users with its hierarchy of information and was not personal enough. How might we improve the web experience so that not only our users could find it easier to use but our development team could find it easier to update from a UI standpoint.

 

Solution hypothesis

We believe that we will drive a reduction in development time if we create a standardised UI component library as part of the redesign.

We believe that increased levels of customer satisfaction and conversion will be achieved if the new sending flow is stripped to its basics and presented as a simple 4 step process

Design goal 1

Create a component library that is replicated in code so the engineering team can iterate faster moving forward.

Design goal 1

Allow users to quickly understand the process of sending money by clearly describing each step during the flow.

 

Ideation


Sketches & wireframes

The data and insights from the discovery stage provided us with enough information to begin our ideation stage. Here, we started playing with potential solutions and user journeys as well as potential features for the website redesign.

A lot of our time went into sketching up the sending money flow and its four main steps, ensuring the transitions, information required and potential edge cases were covered in our thinking. We starting playing with the idea of sending money as a conversation flow as well as outlining all the UI elements needed to start building the whole product.

 
Sketches & explorations - Domingo Widen

Sketches & explorations - Domingo Widen

Initial stepper exploration - Domingo Widen

Initial stepper exploration - Domingo Widen

Initial sending flow wireframe - Domingo Widen

Initial sending flow wireframe - Domingo Widen

 

Design foundations

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.

 
Azimo library - Domingo Widen

Azimo library - Domingo Widen

Azimo library - Domingo Widen

Azimo library - 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

Iconography & Illustrations

Security page - Domingo Widen

Security page - Domingo Widen

 

Solution


Sending money

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.

 
Sending money experience - Domingo Widen

Sending money experience - Domingo Widen

Sending money Desktop - Domingo Widen

Sending money Desktop - Domingo Widen

Sending money mobile - Domingo Widen

Sending money mobile - 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 experience - Domingo Widen

Dashboard experience - Domingo Widen

Desktop Dashboard - Domingo Widen

Desktop Dashboard - 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 status - Domingo Widen

Transfer status - Domingo Widen

Transfer status - Domingo Widen

Transfer status - Domingo Widen

 

Next steps


Delivering the redesigned web experience saw an immediate increase in speed of development. The new platform paired with a comprehensive UI component library allowed the team to ship fixes and updates on a weekly basis. We also saw an increase in conversion rate from an experience standpoint. Shipping the redesign was not the end of the process; constant iteration was required and the product continues to be refined based on the foundations established in this process.

Old vs new - Domingo Widen

Old vs new - Domingo Widen

01_azimo.png