The challenge
Xe.com was looking a little tired and the UI wasn't intuitive for users. We approached this overhaul with a few objectives in mind:
- Respond to user website analytics
- Make the main tools easily accessible
- Better integrate Send Money
- Incorporate the new branding
The data
Studying the data there were four Xe tools accessed by the majority of our users:
- Converter - used by millions each year
- Money transfer - the lifeblood of Xe
- Charts - showing trends back 10 years
- Rate alerts - set a rate for your pair
After ideation sessions, we used Figma to create mock ups. We created a tabbed design as the best way for users to easily see and access the most popular tools.
Flows
I mapped out the user journey flows for the front end.
Each UX designer had a specific flow. Mine was top of funnel - converter and quote to registration start.
We also applied new secure site functionality.
The Xe UX team constantly collect feedback using a simple sticky button, situated at the bottom right of the site.
This includes any questions we think will help our users and improve their experience.
We also used it to enlist a group of Xe users who can test and trial new ideas, for their global region and device type. We did this using prototypes and Usertesting.com, or via an emailed Surveymonkey link.
Mouseflow integration allows us to study various heatmaps across pages and geographies.
Alongside session recordings, we use this to gain valuable insight into user behaviour and discover any pain points.
Here you can see a basic scroll heatmap. This confirmed my design decision to place the Money Transfer CTA in the top widget.
A great candidate for UX improvement was the Xe Live Exchange Rates table.
Users told us:
- Too complex for new users to understand
- Too much information, tightly packed - cognitive load
- Not clear - Add / Remove on a single button
- Desktop and Mobile experience is different
My solution was to create a more simple row-based table, much easier to understand with edit and add buttons in a standard UX pattern. Users told us it was much easier to understand and it also allowed more information to be displayed.
Accessibility
Xe.com is visited by 280+ million users every year. Having accessible content is crucial. I worked alongside a digital accessibility specialist front end developer. We made sure all our designs met at least AA standards, and most achieved AAA.
From first concept designs, I ensured all the components I created and colours used met WCAG standards.
Prototype
Producing a working prototype in Figma helped in many ways:
- Brings the concept to life
- Validates design
- Helps stakeholders see the difference
- Allows more effective testing with users
- Ensures developers understand any interaction styles and effects
A/B
Experimentation and conversion rate optimisation is a key principle in our UX design framework.
Whether we are validating a design, safe guarding from failure for a new release, increasing leads, sign-ups or just improving site engagement and stickyness, Optimizely is the tool we use. We work closely with a leading CRO consultancy who code up our designs and run the tests.
Meeting every week with the Optimisation lead we ideate, discuss new proposals from the team and wider business plus review in-flight and recently completed tests.
Content
Multi-language support for a site with over 280 million users worldwide is essential. Contentful allows us to serve localised and region specific content.
I designed flexible components and pages that were adaptable for different languages and typefaces.
Money transfers - success!
Our design made a difference. Money transfer is now the business driver and key performance indicator, we had an increase in registrations of 29.2%.
Results
This also achieved a 90% increase in registrations in the US region.