Currencyfair Case Study

Background

Currencyfair is a peer to peer (P2P) money exchange online marketplace. Users can transfer their money overseas to any currency for low exchange rates, saving them money.

My Role 

Solo Project

UX researcher

UX / UI designer

Brief

To critically evaluate the app and identify problems with the current user experience. To go through a design process model to ultimately make user centred changes.

Project Duration

One month (February – March 2021)

Project Type

UX Proposal project academic assignment

Critical evaluation of UX of existing application & redesign

Software

 

Figma, Adobe Creative Suite

Process Overview

1. DISCOVER

Desk research & competitor analysis

Usability testing (as-is) website on mobile

2. DEFINE

Journey mapping (as-is)

Identification of Painpoints

Problem statements

3. DEVELOP

Potential solutions

Paper prototypes

Low-fi Wireframes

4. DELIVER

Hi-fi Prototypes

UI design

Usability Testing

1. DISCOVER

1.1 Competitor and SWOT Analysis

 

Market research was conducted through competitor analysis of peer to peer (P2P) payment apps. 3 competitors were included: Wise (formerly, Transferwise), Revolut and WorldRemit. SWOT and UX analysis were performed to gain a deeper understanding of design patterns and heuristics, and to identify potential areas for innovation through design.

1.2 Desk Research

 

I researched Currencyfair’s current useage on Similarweb.com to discover more about it’s user base.

I discovered a lot of it’s traffic was coming from Facebook and went to the company’s Facebook page and looked at the users that were interacting with the page to get an idea of age, gender, location, education level and lifestyle.

I read reviews on Trustpilot.com to get an idea of the common pain-points users experience, as well as what they liked about the website.

This information helped me to gain insight on the target market audience which informed who to include in my usability testing.

Commonalities amongst users include: age 25 – 45, love of travelling, living/working overseas, working professionals who are generally educated to college degree level.

(All names, photos, locations and any identifying information has been changed in the images included.)

1.3 Usability Testing the as-is website

Affinity Diagramming & Thematic Analysis

 

Link to the affinity diagram in Miro: https://miro.com/app/board/o9J_lRQhSTI=/

Testing Set Up

I conducted usability testing with five representative users on Currencyfair’s website on mobile. Scenarios included typical tasks a user might undertake on the website.

The sessions were designed to find out how users feel about the usability of the current website (as-is) and to help identify pain-points.

Analysis

Testing session transcripts were reviewed and affinity mapping was undertaken to analyse the findings. Thematic data analysis was performed to identify key issues users experienced and to inform user-centered design changes.

The following pain-points were identified:

  • Users struggled to figure out what Currencyfair is for / how it works,
  • Users did not see why they should use it / the benefits. (Unclear on the USP)

2. DEFINE

2.1 User Pain-Points (As-Is Mobile Website)

2.2 User Persona

A primary user persona was developed based on all of the discovery research and helped to humanise the core needs and frustrations from the user’s perspective.

User Quote: ”It’s like I can’t seem to figure out how this works.. I know it’s for transferring money but – how does it work? How do I use this? Thats the part that’s unclear

2.2 User Journey Mapping

Findings from Usability Testing: 

The existing information architecture is not optimal.

Users struggled to find information on how Currencyfair works

Users did not understand the benefits or why they should use currencyfair.

Users were confused as to how to use the service / how it works.

Users struggled to trust the service and stated they’d be hesitant to use it.

This user journey map highlights the key pain-points experienced by users when navigating the current website

2.3 Emotional Journey Mapping

The user starts off feeling good/excited/curious when visiting the Currencyfair website.

The user tries to find information on how to use the service and quickly becomes confused and frustrated by the unclear information presented to them.

The user locates a video ‘how it works’ which is hidden away in the mid section of the homepage. The content of the video, however, leaves her feeling more confused and unclear on how the service actually works/how to use it.

Because a trusted friend recommended the service to them, they decide to sign up anyways.

The user feels hesitant and would feel more comfortable if they could understand how it works and have full confidence that it is trustworthy, safe and legitimate.

3. DEVELOP

3.1 Ideate Solutions

In order to address the lack of knowledge and understanding expressed by users, I began to ideate solutions to this problem.

Research Findings

 

Users struggled to find important information on how to use the service.

Users had to root on the website to find information such as the user guide, video tutorial and FAQs.

Solutions

 

Video tutorial to the top of landing page

‘Help’ section in the top burger menu with pages such as ‘FAQs’ and ‘User Guide’

New ‘Chat with an advisor’ feature to request correspondence for queries.

3.2 Paper Prototypes

Paper prototypes were developed to quickly sketch out how I might address solutions to the problems found in the discovery research.

Below is an example of a flow I hashed out on paper, whereby I addressed the information heirarchy issue of the video being hidden low down on the Currencyfair websites homepage.

*Note: more paper prototypes were created but aren’t included for the purposes of this demo.

Landing page

User clicks video

Video dialogue opens

Video plays

Video ends, user redirected to homepage

Clicks ‘Get started now’ CTA to sign up for an account

3.2 Paper Prototypes

Paper prototypes were developed to quickly sketch out how I might address solutions to the problems found in the discovery research.

Below is an example of a flow I hashed out on paper, whereby I addressed the information heirarchy issue of the video being hidden low down on the Currencyfair websites homepage.

*Note: more paper prototypes were created but aren’t included for the purposes of this demo.

Landing page

User clicks video

Video dialogue opens

Video plays

Video ends, user redirected to homepage

Clicks ‘Get started now’ CTA to sign up for an account

3.3 Lo-Fi Wireframes

 

I then began to create low fidelity wireframes in Figma. The following wireframes encompass the solutions to the problems identified in the discovery research such as

Users aren’t clear on how Currencyfair works

Users struggled to find ‘Help’ resources.

The wireframes pose the following solutions:

‘How it works’ video moved from bottom of homepage (low findability) to the top (higher visibility)

Created a ‘Help’ section in the hamburger menu with helpful resources for users (FAQs, User Guide & Chat)

 

3.4 Video Flow

Landing page

User clicks video

Video dialogue opens

Video plays

Video ends, user redirected to homepage

Clicks ‘Get started now’ CTA to sign up for an account

3.5 Help Section – FAQs Flow

Landing page

User clicks hamburger menu

Menu opens

Clicks on ‘Help’

Help section opens, clicks on FAQs

Reads FAQs

3.6 Help Section – User Guide Flow

Landing page

User clicks hamburger menu

Menu opens

Clicks on ‘Help’

Help section opens, clicks on User Guide

Reads User Guide

3.7 Help Section – Accessing Chat Flow

Landing page

User clicks hamburger menu

Menu opens

Clicks on ‘Help’

Help section opens, clicks on Speak to an advisor?

Engages with chatbot

4. DELIVER

4.1 Digital Prototypes

Following the low-fi wireframes, I developed high fidelity prototypes in Figma. 

Added ‘How it Works’ video for users in an area of high visibility.

Added ‘Help’ section in the hamburger menu with sections like FAQs, User Guide and Chat.

Added ‘User Guide’ section with visual aids to help understanding

Added ‘chat’ section where users can ask to speak to an advisor for help.

Added ‘FAQs’ section to help promote self-serve and understand how it works.

3.3 Lo-Fi Wireframes

 

I then began to create low fidelity wireframes in Figma. The following wireframes encompass the solutions to the problems identified in the discovery research such as

Users are unclear on how Currencyfair works

Users struggled to find Help resources.

 

The wireframes pose the following solutions:

‘How it works’ video moved from bottom of homepage (low findability) to the top (higher visibility)

Created a Help section in the hamburger menu with helpful resources for users (FAQs, User Guide & Chat)

 

3.4 Video Flow

Landing page

User clicks video

Video dialogue opens

Video plays

Video ends, user redirected to homepage

Clicks ‘Get started now’ CTA to sign up for an account

3.5 Help Section – FAQs Flow

Landing page

User clicks hamburger menu

Menu opens

Clicks on ‘Help’

Help section opens, clicks on FAQs

Reads FAQs

3.6 Help Section – User Guide Flow

Landing page

User clicks hamburger menu

Menu opens

Clicks on ‘Help’

Help section opens, clicks on User Guide

Reads User Guide

3.7 Help Section – Accessing Chat Flow

Landing page

User clicks hamburger menu

Menu opens

Clicks on ‘Help’

Help section opens, clicks on Speak to an advisor?

Engages with chatbot

4. DELIVER

4.1 Digital Prototypes

Following the low-fi wireframes, I developed high fidelity prototypes in Figma. 

Added ‘How it Works’ video for users in an area of high visibility.

Added ‘Help’ section in the hamburger menu with sections like FAQs, User Guide and Chat.

Added ‘User Guide’ section with visual aids to help understanding

Added ‘chat’ section where users can ask to speak to an advisor for help.

Added ‘FAQs’ section to help promote self-serve and understand how it works.

5. Conclusion

 

This case study was presented to my UX class and highlighted the importance of clear, concise and meaningful information to users, in the right place and at the right time.

As this was an academic assignment, this was where the project ended. 

If this were a real life project for Currencyfair, the next natural step would be usability testing of the prototype. This would aim to discover if user’s understanding of how Currencyfair works and why they should use it is improved.