Currency Converter &
Exchange

Allowing travellers to check the lowest currency conversion rates and exchange currency 

Product
Currency Converter & Exchange app.

Team
Me as the Product Designer. 

Year
2020

My role
Product Design, Visual Design (research, user flow, wireframes, prototyping, usability testings, style guide)


Challenge
The challenge was to create an iOS mobile app that:

 . Allow travellers to check the lowest currency conversion rates in a given area.
. Should check the conversion data of reliable sites and compare it with the values of the sites for exchange (buying and selling) available in an area, presenting the best options and saved amount of money by the user.

Project goal
. Validate the challenge statement
. Redefine the problem and build the solution
. Explore Apple Human Interface Guidelines and define the visual design

Solution
Users can check conversion rates from trusted websites and compare exchange rates available in a specific area. Moreover, the app will provide authenticity of exchange websites, best discounts for cash payments, updates on the latest conversion rate, online transactions and users can make offers.

Project summary
Understanding the context, Redefining the problem, Tangibilizing ideas, Validating IOS solution, Building an visual identity, Validating the final UI, Documentating the final identity (Style Guide), and Learnings.

Understanding the context

Which products with the same value proposition already exist?

My objective was to know the characteristics of currency conversion and money exchange products. After benckmarking analysis, I highlighted some features they have in common:

. Real-time conversions
. Create alerts
. Currency oscillations graphics
. GPS search and Waze integration
. List of currency exchange offices to compare

Talking to real users

I created an online research aiming to:

  • to learn about the positive and negative experiences of people who have already exchanged currencies and people seeking information about currency conversion rates
  • to map the main features the people use to achieve their goals

With 22 volunteering participants, I categorized the patterns of their needs into Jobs to be Done:

100%

Want to have a rate change notification 

“Because the accurate price changes everyday.”

91%

Want to have Graphs

“Because more visual is more informative." 
 "...and to see previous year market information."

88%

Want to secure information

"...about exchangers authenticity to know that I'm not getting ripped off."

46%

Want to delivery service and Online transaction 

"...instead of me carrying the money in cash."

26%

Want to lower fees for cash 

"...and also lower margins taken by the banks."

Redefining the problem

Considering the research findings, besides designing an application that should check conversion rates from trusted websites and compare exchange rates available in a specific area, the app should also offer: 

. Authenticity of currency exchange sites
. Best discounts for cash payments
. Updates on the last conversion rate
. Online transactions
. Make an offer

Detailing the app functions

Based on the users'needs, I defined some business rules the application should have to help me outline the user flow and solutions:

  • First access: user should choose the currency, address and between buy or sell, after that, user can always access the homepage map/viewlist.
  • User can compare higher and lower rates during the offer.
  • User can see the comments or call the exchange office.
  • In "Charts" screen the user can compare rates and create an alert.
  • In "Conversion" screen the user can compare one or more rates simultaneously.
  • In "Settings" screen the user can access general information to edit. 

Tangibilizing ideas

I built a user flow to better understand the path the user could make with the business rules created: 

User-Flow-Flowchart-Currency-Converter

And the user flow above helped me to sketch some ideas:

Wireframe-UX-Currency

How could the app look like an iOS interface?

To build an iOS UI, I got deep into understanding the Apple Human Interface Guidelines to apply the concepts to the user interface.

High-Fidelity-Mockups-Interface-Currency

Validating IOS solution

To validate solutions, I ran user testings with 5 participants. 
The improvements found in the usability testing were:

  • Make the user testing tasks clearer.
  • Change the page title "Conversion" to "Compare".
  • People want to enter 2 types of currencies before searching.
    "I can't choose what currency I want be informed to"_User testing participant

Building an visual identity

How could the app look like an interface without sticking to the iOS guideline?

Aiming to create a unique identity for the app, and exploring visual design skills, I created the visual design of the app based on the values: autonomy, security and innovation.

High-Fidelity-Mockups-Interface-Currency-Dark

Validating the final UI

I ran another usability testing using Maze to validate the UI solution and I had 100% success in completing the tasks.

The tasks were:

  • Imagine you want to check an exchange rate conversion near you.
  • Choose the lowest rate and make an offer.
  • Complete your offer. 
  • Find the currency comparison charts.
  • Compare currency conversion rates and create an alert of your favourites.
User-Testing-Results

Documentating the final identity

After the user testings, and keep the values autonomy, security, and innovation, I defined the style guide.

Typography

I used a standard font following Apple's typography guidelines: SF UI Regular Text for small text (e.g. text fields) to be more readable.

Colour Palette

The colour palette relates to trust, innovation and loyalty:

  • The dark purple colour provides a deep feeling and a distinct experience over similar applications.
  • White receives the necessary attention and focus, and the bright blue illuminates the interface.

Icons & buttons

In order for people not to have to scan the icon to figure out what it represents, I used an icon with a label.

I used rounded buttons to break up the rigidity, proving a sense that the app is easy to use and comparing conversion rates and transactions are not complicated.

Design-System-Style-Guide-Colors-Colours-1
Design-System-Style-Guide-Icons-States-1
Design-System-Style-Guide-Buttons-States

Learnings

Understanding the product and business requirements as well as real user needs is essential to achieve great results. What I would do if it was a real project, is to keep very close contact with stakeholders to understand more about the foreign exchange industry and also be close to the development team to assess complexity, as well as co-creation.

For more projects, get in touch at
[email protected]