4Xchange

4Xchange is an app that makes exchanging currencies between its users possible.

*Concept project*

THE PROBLEM

There is a vast amount of different currencies and the spread between "BUY" and "SELL" prices offered by currency exchange offices is huge.

The United Nations currently recognizes 180 currencies that are used in 195 countries across the world where a total of 28 currencies are used across 50 European countries. This vast diversity may cause some problems for travelers and small entrepreneurs.

The rates proposed by exchange offices vary and there are about 40 cents of a spread between "BUY" and "SELL" prices.

When I defined the problem I started the research that helped me come up with the solution.

SOLUTION

An iOS app that's built around a community; members of which buys and sells currency from each other cutting out the traditional exchange offices.

While looking for a solution I was inspired by the Forex industry and PayPal.


Forex is a market that is used as a way of earning big money. Why not use this idea and just let "normal" people use the same idea and make a platform where users exchange money among themselves at prices they agree on.


PayPal was my second inspiration as a platform that is used to pay online, that is why 4Xchnage is not an only trading platform but also works as a wallet and enables cross-currency shopping without having a traditional foreign currency bank account.

After finding the core ways of tackling this problem I also spotted some challenges, that I had to address.

CHALLENGE

There were two main challenges. First was using proper and clear wording, that makes meaning of "BUY" and "SELL" clear for the users and the second challenge was designing the flow of placing offers.

Who BUYS? Who SELLS?

People have a huge problem with understanding what traditional “buy” and “sell” mean to them. That is why my approach is that the app is made for the user and speaks to the user. Words “buy” and “sell" was used only from the perspective of the user’s activities.

 

I have noticed that the biggest problem with a proper understanding of currency prices in exchange offices is that they are labeled for both their client and themselves. I tried to tackle this problem by focusing only on my user and activities she/he needs to do.

Whenever the user sees “buy” it means that she/he is buying it and when she/he sees “sell” it means that she/he is selling it.

 

To emphasize users' position as the main actor and app's position as an assistant; the app’s wording is direct, personal and emphasizes belonging by words like “your”.
The activities of "buying" and "selling" are underlined by graphical and wording interpretation and description of these activities.

buy_and_sell_edited.jpg

A price listing from a price table in an exchange office (illustration)

PLACING OFFERS

 

Placing currency exchange offers is one core functions of the app. The main premise is to make it clear, short and make users gain confidence by helping them to make as little mistakes as possible.

The whole design of placing offers is described at the end of this case study.

 

 

When I gathered a solid background, I could focus on defining my target group and developing a persona.

 

 

UNDERSTANDING THE USER

For this project, I focused on a user who lives in Europe, who is a traveler and a small business owner. I choose this group because these people are often changing currencies and care for their budget.

DESIGN PROCESS

I made this project in 3 steps:

 

  • Defined content

  • Designed the Information Architecture

  • Designed low-fi and high-fi prototypes

1st and 2nd App's content and architecture

The following diagram shows the flow of the first user, who just downloaded the app.

3rd Prototypes

1. LOW - FI Prototype in Balsamiq

In this step, I focused on Interaction and the main parts of the app. When I designed the hole flow I could start detailed design.

2. MID - FI Prototype in Figma
During this pahse, I designed more detailed UI in Figma. I focused mostly on delivering a clear hierarchy of information regardless of color. Almost whole design on this stage was in shades of gray, except the screen below.

At this stage, I also fully tested two flows of "placing offer".

3. HIGH - FI Prototype in Figma
Based on my test I choose the best flow of "placing offer" and add the color to whole designed, refined UI of the screens and I added the color.
 

First screens: loading screen and location request 

At first, the user sees the loading screen and after that the second one where the user is asked to share the location with the 4Xchange app.

App asks for access to the location in order to present the most tailored search. For instance:

  • Shows the currency rates based on the currency of the country where the person is.

  •  Orders the currencies based on purchase popularity among people in this country.


When the user opens the app, she sees the “rates” screen. This is a screen that has a value regardless of the user’s engagement. It is like a sample of App features.

Loading screen

Alert

Before registration: user gets free sample of app's features

Simple and short onboarding.

Choosing this solution I was inspired by Google's 25 principles to drive conversions.

The first screen that the user sees -
Offers for the most commonly bought currency in the country of the user 

Rates screen -
Rates are sorted by how often they are traded in the country of the user

First things first: the wallet screen and encouragement

The first screen that users see after registration is the "WALLET" screen. The user is prompted to connect her/his bank account with the app. Connecting account to the app is crucial in order to start using the app. Other screens that are based on user-generated content are also prompting her/him to place an "OFFER" or make a "DIRECT PAY"

User is registered, now she/he has to connect the app with her/his bank accounts

User is registered, she/he can make her/his first offer

User is registered, she/he can make her/his first direct pay offer

Colorful, clean and light design.

Low-Fi prototype

Mid-Fi prototype

High-Fi prototype

Colors are inspired by European countries that are not in the eurozone, and banknotes of Swiss Francs and Norwegian Krones.

Color of the buttons represents different functions. This code is universally used across all app.

During my research, I have noticed that Forex programs use dark screens. However, I decided to use white to differentiate 4Xchange from typical trading apps and programs to be more welcoming to users who do not come from the finance world.

User is registered, now she/he has to connect the app with her/his bank accounts

User is registered, she/he can make her/his first offer

User is registered, she/he can make her/his first direct pay offer

Relevance, proper wording, visual story.

The RATES and OFFERS are presented in the most relevant order. It shows the most bought and sold by the user or by people in the country of the user currency.

User can also search for the currency or filter the offers by BUY, SELL or the best deal. 

I decided to use country flags to make the currencies more distinctive.

1.

The flags on this screen help user to identify currencies

2.

User may check the price history of the currency and directly buy it from offers list

3.

Modal screen for confirmation of the offer helps the user fully focus on the activity

4.

Confirmation

 1.
The first screen of selling flow. The first six currency options are the most commonly sold currencies by the user and in the user's country.

PLACING OFFER AND UX WRITING

The most challenging flow was leading the user through placing the "BUY" or "SELL" orders.

THERE WERE 4 MAJOR FACTORS OF SUCCESSFUL DESIGN


- Simplicity. I decided to put every major function on a separate screen to reduce cognitive load.

- Mistake prevention. I designed the flow in a way that the user was lead step by step. Additionally, I placed the "step" indication, so that the user knows where she/he is.

- Help. I designed PLACE YOUR OFFER screen in informing and guiding the way. The color and text forming about the value of the offer help the user to set the best for her/him price.

- Confidence. The last screen presents the summary of the transaction to ensure the user with data she/he provided.

2.
The second screen in the selling flow is setting the price.

3.
In the screen of the selling flow, the user chooses the currency that she/he wants to get.

4.
The most challenging and important step. User has to choose the price that she/he wants to get. User can use a slider or manually type the exact price.

5.
The last step is the is an overview of the whole transaction and the confirmation. 

CHECK CLICKABLE PROTOTYPE

MAIN ASPECTS OF THE APP

You BUY, you GET


- Clear wording directed towards users

People have a vast problem with understanding who buys and who sells. That is why I reserved these words only for the user's perspective. Additionally, I emphasize, the app's personal function by indicators like "your" "your", etc. 

Registration after an app sample

- User can check the basic benefits of the app

One of the problems of Apps is high uninstallment ate just after downloading it. We get free samples everywhere, in the supermarket, SaaS, why not to give a simple sneak peek to the app core functions to our users

UI colors show the function

- Clean and colorful UI design

The core function of the ap such ass: buy, sell, transfer have a different color. These color codes are used across all the app, that is why a user may build the mental model of the app, and distinct the app's functions faster.

CHALLENGES

The biggest challenge of this app was to solve the problem of BUY and SELL and designing the flows for the "PLACE ORDER" section.

How to make a distinction and clear understanding of who "BUYS" and who "SELLS"?
I decided to use a very personal copy across the whole app, to build a feeling that the app is an assistant of the user. Additionally, I added other words to emphasize the difference between BUY and SELL. The next thing was showing these differences visually by adding arrows.


For "PLACE THE ORDER" section I designed 2 flows:
1. that leads user step by step while he/she is placing the order 

2. had one main screen that was as the repetition of every step. In this design, I tried to reduce relying on the user's memory.
Both flows took approximately the same time to finish, thus the second required more tapping.
Finally, I decided to blend both solutions, at first I used "step by step" flow at the end as a summary I used a screen with all information that the still user could click and make some changes.

Resources for the app design:
Photos: unsplash.com
Icons: Flaticon.com by Pixel perfect, Kiranshastry, EpicCoders

Like what you see?

Let's chat.