MoneyNet Israel: Currency Converter

Role

Design Lead, Wireframes, UI/UX, Website Design

Created as part of my work at Studio Praktik

Overview

MoneyNet Israel is a non-bank financial institution. The company specialises in the provision of currency services.

They commissioned us to create their online presence.

Part of their online presence is a currency converter. The assignment was to invent a currency converter that can serve financial service providers as a professional tool.

In the process of making this currency converter, we created a unique converter suited for FSPs.

Visit Website

Challenges
  • Design a professional tool that is suitable for all users.
  • Create a currency conversion table and calculator in one UI.
  • Give added value from using this converter over others.
MoneyNet homepage
MoneyNet App

Desktop App

Goals
  • Provide a toolbar and fullscreen experience.
  • Make a UI that looks good in single and multiple conversions.
  • Build a component that can be used on the website and as an independent toolbar.
Overview

The currency converter is part of MoneyNet's website. The converter's central goal is to be a helpful tool for financial service providers.

FSPs who specialise in money exchange needs to be on top of the current conversion rates. Most of the product in the market today are aimed for personal use, and business-oriented tools are mostly complex and cumbersome.

We placed the table as a toolbar at the bottom of the website to let FSPs view the currency rates while browsing. Doing so allowed us to create a browser extension with the same functionality outside MoneyNet's website.

toolbar popup in website

Interactions

Challenge: I wanted to make the browser extension visible and usable on different websites. Menus mustn't conflict with each other and need to be self-contained within the app.

Solution: I designed custom menus — contained in their divisions.

Currency selection dropdown is part of its relevant cell and doesn't obstruct other cells.

The add row section placed in the bottom with a selection of popular currencies and search.

interactions — currency selection
interactions — currency selection
interactions — searching a currency to add
interactions — searching a currency to add

Calculator

Challenge: Most currency converters have a table and a calculator as separate components. That is because they serve different audiences.

We knew FSPs need a currency table, and a calculator is only useful if you compare calculations to several currencies. Therefore making a conventional calculator will make the app unnecessarily complicated.

Solution: I designed the calculator as an integral part of the table. Each row has a calculator button under the primary currency. When pressed — all currencies inside that row are calculated instantly. The conversions are still displayed next to the currency code.

FSPs need to compare and calculate multiple currencies, and this makes the table a powerful tool for them.

calculator — example
calculator — example

Fullscreen Table

The currency converter can scale from a toolbar to fullscreen mode. That way, users can work with many currencies and calculations comfortably.

interactions — searching a currency to add
interactions — searching a currency to add

Mobile App

Goals
  • Deliver the same functionality as the desktop app
  • Simplify managing multiple currency conversions.
  • Develop the app also as a PWA
Overview

Most of our users will probably use the mobile version. So it was necessary making it as useful and convenient as the desktop one.

I took the same principles of the desktop version and interpreted them to fit a small form factor.

mobile app - conversion table
mobile app - conversion table
mobile app - calculator
mobile app - calculator
mobile app - currency change dropdown
mobile app - currency change dropdown

Navigation

Challenge: We wanted to let the user navigate between a lot of conversion trees and calculations effortlessly.

Solution: I Designed the primary currency to stick to the top of the screen — indicating which conversion tree the user is watching.

Conversion trees can collapse and expand by tapping on them.

To not be blocked by the mobile keyboard — selected elements automatically scroll to the top.

navigation — scroll example
navigation — scroll example
navigation - scroll example
navigation — closed conversion trees
navigation — closed conversion trees

Next Project →

Jinga Clothing — Website & Outfit Customise
Volu — Mobile App & OS Design
Asurion Gamer+ — product market-fit