Back

Digital currency exchange

Cambio Posadas

In this site, you'll see the UX and UI process applied to the web and app of Cambio Posadas. The goal of this work was the redesign of the currency purchase module.

Purchase module

Cambio Posadas, it's an exchange house centred in giving its users the best possible experience. It has more than 50 available currencies with the best price of the market.

That's why we decided to design a web which communicates the same culture as the business. So we performed a previous UX analysis that allowed us to design keeping in mind the user needs, what took us to the final design of their mobile app and web.

Information Architecture

The information architecture allows the designers to work in the project, already knowing what information is available, and knowing how it'll be organized along with the interface.

In case of forgetting the password, the user will be able to reset it through an email that will be sent.

The user can navigate the app without signing in unless they need to perform an operation.

In the purchase module, the user can exchange currency and see the market rates in real-time.

The payment method can be done in three ways: By delivery to the headquarters, by transfer, or by delivery to one of the branches.

The money reception can be done by delivery, transfer or in place. In any case, the user will have to complete a form with the required data.

Once the user finishes completing the required data, they will be able to see the operation summary, and they'll be able to confirm the transaction, what it will take them again to the Home page.

Wireframes - Purchase Module

Having the information architecture done, we continue with the design of the wireframes. They allow us to organize the screens in a faster and better way than high-quality mockups. They also show mistakes in an early stage of the design process.

Each screen has a wizard, indicating the user how many steps they have left to finish the transaction process. The process was divided into three steps so it didn't overwhelm the users with too much information.

The user will select if they want to buy or sell. The chosen option will be shown in colour, giving the feeling that the button is pressed.

When selecting the amount, the user will see the exact amount of the currency they'll have to pay.

The user is allowed to round up the amount to be paid by clicking on the checkbox.

If they want to decide how much to buy based on the current currency, they can do it by pressing the button on the right of the amount selected.

Based on the chosen option, the interface will display the information the user needs. In case of choosing delivery as a method of sending, they'll have the choice of copying the address of the branch's telephone with the simple tap of one button.

As a second step, the payment method will be selected along with the reception method using the available options shown in the buttons.

In case of choosing the transfer option as a method of reception of the money, once the user clicks "Continuar", they'll have to complete the required fields so that Cambio Posadas knows where to send the money and how.

The data that the user will have to complete depends on the options selected.

The transaction summary and the market rate of the purchase will always be visible to the user.

On the third step, the user will be able to see the summary of the transaction and they'll have the possibility of editing the payment and reception method.

A message saying that the transaction was successful will comfort the user by letting them know that everything went fine and that Cambio Posadas will soon get in touch.

UI Brand kit - Cambio Posadas

The brand kit was created as a design sample for the client, making him know the graphic styles that are going to be used in the interfaces. Although the brand kit may vary in some aspects throughout the project, the client will have a global idea of ​​how the final application will look, and in the case of not agreeing with the designer, he can contribute with his opinion about it.

01

Colores

VERSION HEXADECIMAL

#3AAC7F
#707070
#9B9B9B
#D8D8D8
#FFFFFF
#000000

02

TIPOGRAFÍAS

TYPOGRAPHIES

Quicksand Regular
Quicksand Medium
Quicksand Bold

TYPOGRAPHIES SIZE

Headlines 1 - Quicksand Bold 16 px
Headlines 2 - Quicksand Medium 16 px
Headlines 3 - Quicksand Medium 14 px
Primary Buttons - Quicksand Medium 16 px
Secondary Buttons - Quicksand Medium 14 px
Labels - Quicksand Regular 12 px
Input - Quicksand Medium 12 px
Notes / Disclaimers - Quicksand Regular 8 px

Mockups - App and Web

Web Version

Have an Idea?
Lets chat