Current Converter

A currency app that allows users to quickly convert from one currency to multiple other currencies

Role
Heuristic evaluation
Competitive analysis
Wireframing
Prototyping
Usability testing
Duration
4 weeks, Jan - Feb 2020
Tools
Figma
Team
Individual

Heuristic Analysis

I started my design process with heuristic analysis to understand the major user pain points and design opportunities for a currency converter app. I looked at existing apps in the AppStore and selected two apps to perform heuristic analysis based on Nielsen’s 10 Usability heuristics. This helped me have an overview of the apps on the market and evaluated the usability by looking at what worked and what did not for each app.

User Flow & Wireframing

Main User Goal

Converting one currency to another

I created some initial wireframes based on the major user goal. After user testing, I realized that splitting the two currencies left and right will not likely leave enough space for big numbers. Therefore, I decided to change the design by splitting the screen to top and bottom to allow more room for fitting the two currencies.

Visual Directions

Along with some initial user testings, I created two visual directions by applying different colors and UI components to explore and expand potential visual possibilities. I gathered feedback and critiques from experienced designers and potential users and learned that:

  • menu may not be necessary in a currency converter
  • visual design 2 has 2 strong colors black and yellow; users don’t know which one is the focus
  • the size of the switch button is too small - users were not sure if it’s a button or an icon

Iteration

Meeting User Expectations and Mental model

I removed the dropdown arrow because users expected to see a dropdown menu when they tap on it whereas in fact this action would bring them to a new page. Based on the mental model that existed in most currency converter apps, I felt it was safe to eliminate visual signifier on the switching the currency because from user testings, users expressed that they would try to tap on the country flag or name to switch to another currency.

Dividing Content with a visual hierarchy

From user testing, I also learned that users felt the upper half and the bottom half of the screen does not fit well together, so there is a need to divide the content visually. To address the need of dividing the content visually, I tried the 4 iterations below.

4 different iterations on how to divide content visually

Final Design