Navigation
AUTHOR: Mel

XE Currency App

For an upcoming trip through South East Asia, I downloaded the XE Currency app to find out what the different exchange rates are and to gauge how much money I should be saving. I’ll be traveling through at least six different countries, each with their own currency and will be carrying USD as a backup as well.

XE.com has always been my go-to place to check currency exchange. I remember using it 15 or 20 years ago, and it’s still around now. Their website and brand is pretty simple but does have a dated-feel to it. While the app does function just fine, the UX and UI could use some finessing. As a first time user, I found it wasn’t very intuitive, the flow wasn’t right and there were buttons that just didn’t make sense to me.

The main focus of the app is to give the rate and calculate the exchange. It allows you to add multiple currencies and set your base currency and amount for which each exchange rate would be calculated from. It also lets you get some additional information about each currency, check the historical charts and compare the rate you paid to the actual rates to see if you paid a fair price or not.

I started with wireframes. When navigating this app, I didn’t really feel that it was as user-friendly as it could be and had some weird quirks about it, so a UX overhaul was step one.

The app uses a side drawer navigation that has three links and a couple other buttons. It takes up a quarter of the page and leaves the rest blank. This was not only a waste of space, the links and buttons didn’t really make sense where they were. It seemed like they needed a place to put some stuff so they shoved it in the side drawer nav.

I started with the navigation and broke it down into what I’d want easiest access to. I made a clear bottom navigation for those items. The only piece that didn’t fit with those was the Currency Profile which is specific to each currency. Instead of having a side drawer navigation, which seemed to over complicate things, I added a simple arrow next to each currency so the user can get the currency profile in one button. With this design, it’s also more clear as to which currency is being selected.

I didn’t wireframe out all of the pages and views, but did a fair amount and focused on the main aspects of the app. Here are the wireframes:

XE Currency App WIreframes XE Currency App WIreframes

 

After the UX was sorted, I just tried to make the UI as clean as possible. Currency exchange isn’t the sexiest of topics, so to go overboard with the design would be unnecessary and might make it more difficult to use. Here are the before & afters:

XE Currency App Before & After - Rates XE Currency App Before & After - Add Currency XE Currency App Before & After - Historical Rates

And a couple mockups just for fun:

XE Currency App Insitu XE Currency App Perspective

The assets used in the app can be found here:

There are no more results.