Tender
A responsive website that allows users to compare and exchange different currencies as they travel the globe.
Dan Hubsher
Lead UX Designer
January - June, 2024
User Research
Concept Ideation
Wireframes & Mockups
Prototyping
Usability Testing
The Problem
Spending with local currency adds unnecessary stress and complications for people traveling abroad.
The Goal
Allow travelers to spend more freely without worrying about wasting money or being taken advantage of.
User Research
Research was conducted through remote interviews. These interviews focused on the challenges people face spending money while traveling abroad, and identifying frustrations people experience when exchanging currency.
Pain Points
Process
Travelers usually exchange physical currency at banks or airport vendors. This takes up valuable time before and during the trip. The app should remove this inconvenience by completely digitizing the process.
Confusion
Understanding exchange rates and the relative values of different currencies is not easy. The app should be able to convey this information in a simple and straightforward manner.
Math
Calculations during a transaction whether it's tallying up items or determining the tip are difficult. Doing so abroad, even more so! The app should feature a calculator function that addresses this.
User Personas
Inaccurate exchange rate information, complicated calculations, possible scams. Vacations shouldn't be this stressful!
Andrea, 31
Marketing Manager
My parents are paying for this semester abroad as a gift, but I want to show them that I'm responsible and not wasting their money. That's not always easy in a foreign country.
Tariq, 20
Student
User Journey
Tariq has arrived at his new apartment in Buenos Aires after a cab ride from the airport.
So he pulls out his phone and opens up Tender.
The meter says the fare is 7800 Argentine Pesos. That seems like a lot!
By simply plugging in the currencies and the amount, Tariq sees that 7800 ARS is only $9.32. What a relief!
Tariq is worried and confused. He hasn't exchanged currencies yet and he doesn't know the rate
Tariq pays his fare and heads into his new apartment, ready for his semester in Argentina.
Information Architecture
This map lays out the hierarchical order for the information and content on the website.
Paper Wireframes
The biggest challenge was to adapt the design elements from the app and refit them to a responsive website that users access via computer, tablet or mobile phone.
Laptop
Tablet
Mobile
Digital Wireframes
As the layout concepts come into focus, design elements are refined to better address the pain points discovered during user research.
Laptop
The site's design takes the process of converting currency and completely automates it, exchanging money directly into and out of the user's bank account.
The site's design allows the user to track exchange rates for easy reference.
Tablet
Finally, the app's design includes a calculator function allowing for instant currency conversion.
Mobile
Design Elements
Colors
Images
Icons
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Mockups
The final designs incorporate everything that was learned during user research and usability testing.
Laptop
Tablet
Mobile
Prototypes
Screen designs are linked together and animations are added to create a high-fidelity prototype.​
Laptop
Tablet
Mobile
Usability Studies
Two usability studies were conducted to determine how improvements could be made. Participants were asked to complete basic tasks with the site and share their opinion on its functionality.
Round 1 Findings
1.
Users seemed confused by all the buttons in the currency tile, so the options were scaled back and some functions moved to other screens.
Round 1 was conducted on a low-fidelity prototype consisting of linked up wireframes.
2.
Users had trouble progressing through the exchange screen, so the "next" button was given more emphasis in mockups.
Round 2 Findings
Round 2 was conducted on a high-fidelity prototype consisting of linked up mockups.
1.
Users were confused about how to start the comparison process. By adding an alternate user flow this problem was easily solved.
2.
Users were confused about how to start the tracking process, and always hit the error message. This was solved by moving the entire process to the tracker screen.
Accessibility Concerns
1.
The color scheme was designed to meet WCAG standards. It also serves to minimize screen glow from brighter colors. This should help reduce eye strain and headaches, which are common problems with excessive screen use.
2.
Because this is a site designed for travelers the world over, there will be a number of language options in the settings section for non-English speakers.
3.
Two sans-serif fonts (Inter and Roboto) were chosen because they are more legible for those with reading disabilities.
Moving Forward
The greatest priority for the site moving forward is to continue adding different currencies from around the world. This might also include crypto currencies like Bitcoin and Ether.
​
Additionally, there is the potential to expand the site's use to digital spending similar to Venmo and Apple Wallet.
​
Besides this, continued usability studies will be commissioned to refine the site's functionality.
