A gradient background transitioning from darker blue on the left to light blue on the right.

PocketChange: The App

A smartphone screen displaying the PocketChange app with currency conversion charts, money safety tips, and navigation icons at the bottom.
Mobile app screen showing currency exchange rates, with American flag for USD, European Union flag for EUR, Chinese flag for CNY, UK flag for GBP, and Indian flag for INR.
Mobile app screen of PocketChange displaying user profile with a profile picture, username Alyssa, and list of travel and expense lists.

Exchange rates made easy.

Overview

PocketChange is an app to calculate currency conversions and save converted values to lists for easy organization. This is an individual project I completed as part of the Google UX Design course.

Problem Statement

International travelers need a simple and reliable way to understand currency conversions and keep track of their expenses across different trips.

The Goal

Create an app that allows travelers to easily convert and track their expenses.

Roles

Everything (personal project): UX researcher, UX writer, information architect, UX designer, project manager, etc.

Timeline

August - November 2024

Research

Note: most of the research I conducted for the app and website versions of this product are the same. If you’d like to see how the end results differ, check out my case study for the PocketChange website!

After consideration of the target audience, 3 user personas were created to represent different characteristics of several target users. These people have interaction with foreign currencies and need a quick and easy way to access transaction rates. It was helpful to develop these user personas and keep them in mind while making progress on this project.

User Personas

Alex.png
Ayesha.png
phillip.png

Pain Points

1

Many tabs open

Users are tired of making a new search when they need a conversion rate or looking through their existing tabs for a past conversion rate search.

2

Time-consuming

When users have many currency amounts to convert, it gets cumbersome and time-consuming to do them one by one.

3

Confusing

Conversion rates can be hard to understand at first, and most preliminary searches do not explain all the necessary information.

4

Hard to remember

Users are frustrated with trying to remember conversion rates off the top of their head, especially when dealing with several currencies or when rates change.

Competitive Audit

I compared 47 unique features across 9 different websites and apps that could be considered competitors of PocketChange. Here are some of the results:

44%

showed the corresponding symbols for each currency. I would like to include these for ease of use and understanding.

22%

had the feature to log past conversions. This is a great hole in the market to introduce our product that is all about saving converted items into lists for expense tracking purposes.

0%

allowed users to find nearby ATMs and exchange counters to get cash on the go. Including this feature would set PocketChange apart from its competitors.

Ideation

Website sitemap diagram with sections Home page, Info, Currency convert, Profile, Settings, and Lists, each with subcategories.

Sitemap

Paper Wireframes

I went through a few iterations of each screen with paper wireframes. The 4 main ones are pictured here.

These wireframes gave me a great place to start when I began to create digital wireframes.

Hand-drawn sketches of four mobile app screens: a homepage with a header, navigation bar, and list of items; a list page with icons and a large image placeholder; an information page with a large image, text, and a grid of images; and a profile page with a pie chart, icons, and a list.

Digital Wireframes

I went through several iterations of digital wireframes before I moved on to prototyping. For each version, I experimented with layouts and content. I kept usability and accessibility concerns at the forefront of my mind.

Iterations of home screen

Screenshot of a mobile app showing a currency conversion calculator with a home currency of US dollars valued at $24.54, and options to add and edit favorite currencies.
Mobile screenshot of a conversion calculator app showing the home currency as USD with a balance of $24.54, and a list of favorite currencies, with options to edit or add new currencies.
Mobile app screen showing currency options for USD, EUR, GBP, CNY, CZK, and INR with respective flags, all valued at zero, and options to add favorite currencies.
Mobile app interface with a logo, profile icon, a large circle diagram, text sections, and list items with checkmarks.

Iterations of profile screen

Mobile app screen showing a logo placeholder, gear icon, profile circle, three black squares, a section called 'My Lists' with three gray list items, and a bottom navigation bar with three black icons.
Mobile app screen showing user profile and travel planning lists, including Italy Trip 2024, Spring Break in Mexico, Group Expenses for Spring Break, and Backpacking Summer, with options to edit or share profile.

Prototyping

Wireframe of a travel app with screens for conversion calculator, list management, settings, save value, saved list, and editing list.

Low-Fidelity Prototype

Explore the low-fi prototype on Figma

Flowchart of a mobile app interface for a currency exchange and trip planning app, showing screens for home, information, saving a value, profile, settings, and currency search, with annotations and connections between screens.

High-Fidelity Prototype

Parameters:

Usability Study

  • Moderated usability study

  • Orlando, FL

  • 5 participants aged 20 - 56. One with ADHD, one with poor vision

  • 8 - 10 minutes

Round 1 findings:

  1. The conversion calculator needs to be more intuitive.

  2. Adding information about traveling to different countries would be useful to users.

  3. Almost all participants appreciate the option to locate ATMs, banks, and exchange counters.

Round 2 findings:

  1. Most participants found that the color scheme is fitting and expected for a money-related app.

  2. 80% of participants said they would use this app on a foreign trip.

Final Mockups & Styling

Mobile app interface showing currency conversion charts, options for USD to EUR and a line graph for one month, with sections on cash access, conversion, and money safety tips.
Screenshot of the PocketChange app profile page showing user Alyssa's profile, with options to edit or share the profile, and a list of travel and expense lists including Italy Trip 2024, Spring Break in Mexico, Group Expenses Spring Break, Backpacking Summer, and Family Weekend in Toronto.
Screenshot of a travel expense list for Italy Trip 2024, showing itemized costs, categories, and dates with a total of $116.17 USD.
Mobile app screen showing a 'Save value' page with a total of $24.54 in US dollars, options to choose a list, change date, add note 'Dinner by the Duomo,' set category 'Food & Drink,' and buttons for save and cancel.
Receipt showing a payment of $24.54 for dinner at the Duomo, categorized under Food & Drink, dated 9/17/24, saved to 'Italy Trip 2024'.
Screenshot of a mobile currency conversion app showing various currencies and their equivalent amounts in USD, including USD, Euro, GBP, Chinese Yuan, Czech Koruna, Indian Rupee, Mexican Peso, and a 'Search all currencies' button at the bottom.
Instructions on how to use a currency calculator, including selecting the original currency, entering the amount, saving to a list or closing the calculator, with a yellow 'Got it!' button at the bottom.
Calculator screen showing 22.17 EUR converted to 24.54 USD, with buttons for numbers, basic calculations, and a 'Save to list' option.

Reflections

  1. The Web Content Accessibility Guidelines suggests a ratio of at least 4.5:1 between foreground and background colors. I made sure each element of the app had a ratio of at least 7:1 for optimal contrast.

  2. Content was arranged in a logical order to maintain meaningful sequence throughout the app.

  3. Clear headings were used in each screen in the app to make each screen easily understandable.

Accessibility considerations

From a participant in the user testing process: I could’ve used this when I was traveling last year. It would have made my life so much easier.”

Impact

Throughout this personal project I have learned so much. I gained more experience with user personas, got more practice designing mockups and prototyping in Figma, and honed my skills as a user testing facilitator.

What I learned