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. 

I was responsible alongside other members of the Travelex Design team for the design of Travelex Wire including overall visual language, UI elements, illustrations and user flows. You can read more about our process, the different elements and final results below. 

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

Date: 2016 - 2017

Field: UI design, Product Design, Illustration

Client: Travelex

1.jpg

INTERACTION DESIGN

ux

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 

User Flow Snapshot 1 

User Flow Snapshot 2

User Flow Snapshot 2

Some of the annotated wireframes we produced for the project.

Some of the annotated wireframes we produced for the project.

VISUAL

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 explorations around colour, typography and product look and feel.

Early explorations around colour, typography and product look and feel.

Early UI explorations and possible concepts

Early UI explorations and possible concepts

Payments dashboard design evolution

Payments dashboard design evolution

Final payments dashboard & address book

Final payments dashboard & address book

Final payment widget

Final payment widget

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.

Interaction library 1

Interaction library 1

Interaction library 2

Interaction library 2

Illustrations

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.

9.jpg
illus shots.jpg

Result and 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 money flow triggered as an over-panel from the dashboard view.

Sending money flow triggered as an over-panel from the dashboard view.

Sending Money Flow

Sending Money Flow

Sending money flow mobile view

Sending money flow mobile view

payment and recipient 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 transitions and recipient details over-panel

Dashboard transitions and recipient details over-panel

Dashboard

Dashboard

10.jpg

LANDING PAGE

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.

Travelex Wire landing page

Travelex Wire landing page

13.jpg