All Articles

Cewlrency: UX Overhaul

I made Cewlrency in last October while I was renting the cheapest room (chili blue) in Sydney as a desperate attempt to get a job. It was a total success.

The actual app is really simple and slightly ugly, but the source features some cool Rx solutions and architecture concepts. Now it’s time for Cewlrency to get some real features and meet Kotlin (and Redux).

UX Overhaul

Old Cewlrency
Imagemagick killed the resolution

Cewlrency isn’t easy on the eyes today lol! In my defense it’s mostly a code quality test right now.

Cewlrency navigation
Quick convert | Multi convert | Indexes | Settings

This time I have made a complete feature map and designed all the screens using Sketch. Cewlrency is going to beat the other currency convertion apps at their own game! There will be 4 “main” screens that the user will navigate between via a bottom navigation bar.

Cewlrency Quick convert view
1) Quick convert

The first screen is a super efficient convert view. The user will not have to make a single tap other than opening the app->enter a number in order to convert between the previously chosen conversion. There’s also a little menu for managing favorite conversions and a custom built in numpad.

Multi convert view
2) Multi convert

In the second screen the user can convert between multiple currencies at once. It also features a set of small controls that the user can use to alter the size of the items in the list.

Index view
3) Index comparison (2 tabs)

The third view is, technically, the most advanced. It will feature interactive charts where you can view by time, swipe around and hopefully pinch-zoom (depending on if I can get the index data at an acceptable speed). RxJava and Kotlin will help me implement the data loading algorithms which I suspect might become very tricky. You will also be able to click the chart to view it up close. I haven’t decided whether the user can navigate the chart right there on the card, might have swipe to delete instead and chart navigation in the “detail” view.

It also has two tabs, one for single currency indexes and one for difference indexes between two currencies.

Currency chooser
Currency picker

This is not the fourth view in the navigation bar, but my draft of the currency picker view. I plan to have a neat plot of all the currencies on a map from which you choose your currency of choice. Notice the tabs; There will be linear list pickers as well with filtering and what not. There’s also a minimap that the user can use to quickly get an overview of the world.

Next up

I’m going to develop this in an agile way, i.e. there will have to be some serious prioritizing. Since it’s quite encapsulated it’s a great opportunity for me to develop it in clean simple iterations starting from the most important functionalite; The “Quick view”.

First I’m going to design the icon and try out some After Effects animations to use with Lottie 🤓

Published 21 Jun 2017