Travelex Wire

Travelex Wire is about making it as simple as possible to send money abroad. Created as an account-based web app, Travelex Wire allows you to manage international wire transfers safely and with peace of mind.

As a member of a wider design team tackling different projects, I was assigned as the main UI designer for Travelex Wire. I was responsible for the overall visual language, UI elements, illustrations and interactions. I worked closely with both a UX designer and a Product manager to refine user flows and build the foundations of the product moving forward. You can read more about our process, the different elements and final results below.

Team Involved: Xi Zhu, Geoff Biskupek, Jess Ruiz, Michal Florczak, Ben Garratt

Date: 2016 - 2017

Website: wire.travelex.co.uk

wire_domingowiden.png
 

The challenge

Upon joining Travelex, the company was undergoing a digital transformation and improving their digital product offering. One of the business opportunities for Travelex was to create their own platform to allow customers to send money abroad without the need for third party providers and their related overheads. Our challenge was to create the whole digital product from scratch, designing everything from main user flows to finalised screens and UI elements. We worked closely with the business and compliance teams to ensure we had a compelling value proposition and easy-to-use product.

 

The process

Creating a product from scratch required diving into research to have a clear understanding of customer expectations around this type of service. We also ran service definition workshops with Business stakeholders, Engineers, Product Managers and Designers to define the scope and goals of the product.

From a design perspective, it was necessary to build all the foundations around our approach to visual design and user experience. That way, we were able to influence not only the first iteration of the product but also establish a clear vision for what we wanted Travelex Wire to ultimately be. Starting from our approach to messaging and success statements all the way to UI elements and interactions, building our foundations allowed us to have all the necessary elements to focus on the main journeys needed to launch the product.

 

Building the foundations


User experience

The firsts steps towards designing Travelex Wire began with research. We carried out customer interviews as well as detailed competitor analysis to better understand customer expectations and inform our approach to design. This work allowed us to define a target audience and establish a clear scope for the project.

Thorough analysis of this data and customer insight was essential for the early stages of prototyping and wire framing, allowing us to define an initial user flow that we could test and iterate with users based on their feedback. Given Travelex Wire is a financial product, we had to learn how to work around a lot of restraints around regulations and compliance; we needed to put enough systems in place to assure that users were safe and had a sense of trust when interacting with our products. From a user experience point of view, this involved numerous checks and iterations along the way to ensure the journey was clear and safe.

 
User flow snapshot 1 - Domingo Widen

User flow snapshot 1 - Domingo Widen

User flow snapshot 2 - Domingo Widen

User flow snapshot 2 - Domingo Widen

Some of the annotated screens the team produced for the project.

Some of the annotated screens the team produced for the project.

 

Visual Design

When it came to establishing the visual style for Travelex Wire, we considered this the perfect opportunity to build the visual style from the ground up, potentially influencing future digital products at Travelex.

We went through a long process of explorations, mood boards and refinements until we finally landed with what Travelex Wire looks like today. The main areas we looked at were typography, colour, imagery and possible layouts. We wanted a product that transmitted simplicity, clarity, trust and little bit of personality. Once the main structure was established, we went deeper into defining the specifics, from lists and menus to cards and components.

Due to the nature of the product, conveying simplicity and trust was absolutely key. We opted for establishing the whole typographic hierarchy with a single font family to keep things lean and used a colour palette based on blue hues to convey trust. This limited colour palette and the use of white allowed us to create an open breathing canvas that gave focus to the most important elements of each journey and that gave the product clarity and transparency. All UI elements were also designed to communicate actions with utmost simplicity.

 
Early UI explorations and possible concepts - Domingo Widen

Early UI explorations and possible concepts - Domingo Widen

Early explorations around colour, typography and product look and feel - Domingo Widen

Early explorations around colour, typography and product look and feel - Domingo Widen

Dashboard evolution - Domingo Widen

Dashboard evolution - Domingo Widen

Final Dashboard - Domingo Widen

Final Dashboard - Domingo Widen

 

Design library

As a result of the work we had done for the Travelex Wire UX and Visual design, we felt that the next natural step was to build design foundations for all future Travelex products. This led us to the creation of a Design Pattern Library, a single source of truth and useful resource outlining our interaction design guidelines for all products with the aim of achieving a consistent customer experience across the Travelex estate.

The aim was to ensure the customer experience across all Travelex products and channels remained consistent. This Library would allow Travelex product teams to access a single reference for all design rules, covering every aspect from layout, colour, and typography to navigation, lists and panels.

 
UI kit library - Domingo Widen

UI kit library - Domingo Widen

UI kit library 2 - Domingo Widen

UI kit library 2 - Domingo Widen

 

Illustration

Our illustration style is driven by our principles. Created as a storytelling device, it allowed us to enhance the customer journey by ensuring our aesthetic approach was simple, clear and versatile, focusing on simple lines and conceptual clarity.

The style is based on geometric forms, side perspectives and consistent strokes, which allowed us to standardise the construction of elements across all illustrations, from a simple object or icon to a full city scene.

 
wireillustration_domingowiden.png
wireillustration_domingowiden
 

Solutions & features


Sending money

Our most important journey, the act of sending an international payment, is easily accessible from the dashboard and consists of four simple steps: Amount, Recipient, Confirmation and Payment. We designed this flow to be triggered as an over-panel to give users full clarity of the task at hand. Along the journey, users can easily select their currency via the Currency widget and then proceed to selecting the Recipient and processing the Payment. We also included a side panel component to display important information and tips about banking terms to ensure customers were fully informed as to the process.

 
Sending flow - Domingo Widen

Sending flow - Domingo Widen

Sending flow desktop - Domingo Widen

Sending flow desktop - Domingo Widen

Send flow mobile - Domingo Widen

Send flow mobile - Domingo Widen

 

Payments and recipients dashboard

When you log into the service, the first thing you see is the Dashboard. This allows you to easily access your transaction history and activity, as well as your recipients and payment cards, giving users full control of their online payments from the get go. Aside from accessing this key information, users can also quickly and simply make an International Payment using the clear call to action button at the top of the dashboard. Side panel cards also allow users to perform quick actions like viewing your wallet or adding payment cards.

 
Dashboard interaction - Domingo Widen

Dashboard interaction - Domingo Widen

Dashboard design - Domingo Widen

Dashboard design - Domingo Widen

Dashboard viewports - Domingo Widen

Dashboard viewports - Domingo Widen

 

Transaction status

With the objective of testing the first release of the product, we decided to release a Beta version of the product for Travelex staff to test and refine a working version of the app. For this, we were tasked to design a landing page for Travelex employees, showcasing the main benefits of the product. The landing page was also the perfect opportunity to fully experiment with our illustration style and play with telling the Travelex Wire story.

 
Wire landing page - Domingo Widen

Wire landing page - Domingo Widen

 

Next steps


Our work allowed us to launch Travelex Wire at the beginning of 2017 after 12 month of work. The engineering team was building the platform at the same time as we were designing the journeys. This project was therefore the perfect opportunity for us to be part of the lifecycle and influence the experience from the ground up.

After launch, we focused on the continuous iteration of the product and leveraging user feedback to refine journeys and specific elements. Having all necessary foundations in place and a comprehensive component library allowed the team to focus on problem solving instead of designing elements from scratch.

00_Logo.jpg