A gradient background transitioning from dark blue on the lower left to light blue on the upper right.

PocketChange: The Website

A MacBook Air displaying the PocketChange currency converter website with Euro and US Dollar exchange rates, including a graph and search bar.
Mobile screen showing the PocketChange app with currency exchange options for USD and EUR, a yellow 'Full Converter' button, and a black 'Go to Lists' button, along with a brief description of organizing travel expenses.

Exchange rates made easy.

Overview

As my second portfolio project for the Google UX Design course, I turned my mobile app for PocketChange into a responsive website.

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

From the app I created, create a responsive website counterpart that helps travelers easily convert currencies and track their expenses in personalized lists.

Roles

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

Timeline

January 2025 - February 2025

Research

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

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

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

Sitemap

Paper Wireframes

I brainstormed the page designs by creating multiple versions of the wireframe for each page, starring the elements that I liked best, and combining those elements into a single wireframe (wireframe E).I also sketched wireframes for a tablet and mobile screen size.

2 paper wireframes
3 paper wireframes

Digital Wireframes

I took my ideas from the paper wireframes and started to refine them in my digital wireframes. Since the goal is a responsive website, I made wireframes for desktop, tablet, and mobile screen sizes.

digital wireframes in a desktop, tablet, and mobile size

Prototyping

A wireframe or sitemap of a mobile app with various sections labeled such as 'desktop home,' 'desktop convert,' 'desktop resources,' 'desktop profile,' and 'desktop lists.' The diagram shows flow connections between screens and includes placeholders for content like charts, profile info, settings, and lists. The layout is overlaid with a pink and gray grid indicating design elements.

Low-Fidelity Prototype

Explore the low-fi prototype on Figma

Wireframe flowchart of a travel and currency exchange app interface with pages for desktop home, converter, profile, list, saved, and resources, connected by arrows indicating navigation paths.

High-Fidelity Prototype

Explore the high-fi prototype on Figma

Final Mockups & Styling

Screenshot of PocketChange website featuring a currency exchange interface with US Dollar and Euro icons, a full converter button, and a section promoting ATM and bank locator for travelers.

Desktop

A screenshot of a currency exchange website called PocketChange, showing exchange rates for various world currencies against the Euro.
Screenshot of a digital profile page on PocketChange showing user information, lists of travel and expense categories, and options to add new lists.
Screenshot of a webpage titled "PocketChange" with sections on "Travel and Money Resources," including "ATM locator" and "Money safety," and a main content area with a chart titled "Comparative currency charts" showing a line graph of currency values over time.
Screenshot of the PocketChange app showing currency converter with USD selected and other currencies listed including EUR, CNY, SGD, CRC, CAD, NGN, AED, INR, ZAR, GBP.

Mobile

Mobile app screen for PocketChange with currency converters for USD and EUR, a 'Full Converter' button, a section on tracking travel expenses, and a bank ATM photograph offering cash exchange information.
Screenshot of a mobile app named PocketChange showing sections on travel and money resources, including ATM locator, comparative currency charts, and money safety tips.
Screenshot of a mobile app profile page for PocketChange, showing user info and travel list collections, including Italy Trip 2025, Montreal for the weekend, Costa Rica, Cost Rica-shared expenses, Backpacking Summer, Spring Break in Mexico, Group expenses spring break, and Ski trip.
A PocketChange app screen showing an Italy Trip 2025 with a total of $307.53, listing items such as dinner at the Duomo, souvenirs, cafe, train ticket, pasta, wine, museum ticket, and hotel, each with prices, dates, and categories.
Screenshot of a mobile app interface for saving an item, showing the item price of $24.54, category options, a note stating 'Dinner by the Duomo', and a picture of a church or cathedral.
Mobile app screen showing a saved trip titled 'Italy Trip 20251!' with a church icon, the subtitle 'Dinner by the Duomo,' date 1/22/25, and categories Food and Drink, with two buttons labeled 'View list' and 'Go to converter'.
A design style guide titled 'PocketChange' shows color palette with primary white, secondary dark blue, tertiary yellow, and light blue. It features buttons colored blue, yellow, and light blue, with labels. Typography details specify headings and body texts with font styles, sizes, and weights. Icons for home, menu, search, favorites, settings, and add are at the bottom.

Style Sheet

Reflections

  1. I included a variety of ways to get to the same page, ensuring that more users will be able to successfully complete tasks in a timely manner.

  2. 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.

  3. I chose fonts that were easily readable, like sans-serif for any smaller paragraph text. Fonts that are easy to read make the user experience much more accessible for those with vision impairments.

Accessibility considerations

Impact

This project allowed me to expand on my past project, the app version, in order to explore the different forms that a digital product might have. The website would have made this product more accessible to a wider range of users. 

What I learned

I learned a lot about the power of preparation, organization, and consistency. I experienced a lot of design headaches that could have been avoided by better organization of my groups, elements, and components. I got more great practice with every step of the design process!