Work | Michaellefioreux

Currency Conversion App

Currency Conversion app is for travelers of all ages.

This user friendly App helps folks traveling abroad convert currencies in real time with ease, so they can spend more time making memories while they travel.

As the Lead UX Designer and Researcher on this app,

I was responsible for User research, wireframing, prototyping and testing.

We created the app itself as well as its Responsive Website.

Project Duration:

3 Months for App

1 Month for Responsive Site

When there is a Problem...

Joe is a world traveler who needs accurate conversions while making purchases, especially in busy or crowded areas because he wants to ensure he and his family can enjoy their trips to the fullest.

We create a Goal to find the Solution

Our Currency Conversion App will let users quickly convert values in different currencies which will affect folks who are traveling abroad of planning to by seamlessly calculating fluctuating currencies on the fly. We will measure this effectiveness by Reviews, downloads, site and blog visits.

Getting to know our users with Research

In person interviews for 3 users of varying ages
Our users were approaching the app with concerns from a traveling perspective, rather than a financial one
Comparative analysis with other travel and finance conversion apps
The market itself had the most effective apps catered to finance

It could be beneficial to bridge the gap for the users as they are looking for something to better enjoy their time abroad and not worry as much about the monetary aspects,

they just want to be sure they are making accurate calculations.

Pain Points

Not being able to get accurate conversions efficiently

Being bombarded with ads/paywalls

Confusion when mixing currencies for vendors who accept more than one form of payment.

Option for larger text for older users and children

Meet Our
Persona: Joe Smith

Age: 45

Education: Masters Degree in Education

Hometown: Westchester, New York

Family: Wife, 2 children aged 9 and 12,

Retired Parents

Occupation: High School history teacher

Goals:

Traveling with family with the least amount of hassle
Focusing on the memories with his loved ones and their shared adventures

Frustrations:

Having to pull up a browser and waiting for it to load when the connections aren’t the best in foreign countries.
Going into finance apps and either being hit with a paywall or too many features that are confusing to explain to much younger or older family members.

"Travel Far, Travel Often."

- Joe Smith

Joe goes through a series of emotions while using the app/website. He is initially excited and nervous as he plans for his trip, satisfied and hopeful once he makes his first purchase in his destination, and then analytical and inquisitive while figuring out the conversion differences. Once he’s able to successful use the site he feels accomplished and satisfied. After he factors in his expense into his trip’s budget, he is relieved, alert and glad at how simple it was. After, he is content and excited to explore his next destination!

Site Map

Indicates how to access each page. All pages can be reached via Header and navigation bar.

Wire Frames

Paper Wire Frames

My main focus was to include the calculator on the homepage, I knew I wanted to have the option of selecting the countries that users would be converting to and from as well.

Besides that, it was a matter of playing around with the navigation buttons for other decisions that could be made in the app.

These wire frames were designed for a desktop or laptop format, each is the final version of 4 previously drafted paper wireframes where only the best elements are included.

Paper Wireframe

screen size variation(s)

Final paper wireframe for mobile homepage of responsive site. Combination of best elements from 4 paper wireframes. Based off of the final paper wireframe for desktop/laptop formats.

Digital Wire Frames

This would be the home page for The Currency Conversion App.

An Easy to navigate, functional page.

The header and footer should be consistent throughout the app.

This is the Menu/Settings page, this would be what is visible in order to alter the text and parental controls on the app. Here you could get information about the app/company, and check out FAQ or reach out to customer service for questions.

The main idea of the responsive site is to have everything accessible on the homepage, or more in depth on the additional site pages, still honoring the customization of the mobile app but on a larger scale.

Digital Wireframe

Screen Size Variation(s)

The digital wireframe variation for the homepage had slight modifications in order to make more vital features visible on one screen without scrolling. Follows the format of the digital wireframe but is more condensed and enlarged for better visibility on smaller mobile screens.

Low Fidelity Prototypes

Usability Testing

The first round of user research we found mostly compositional issues;

Showing us we needed to reformat and relabel to make the app more clear and accessible. Most users had trouble navigating the mix currencies feature, arriving at 2:42 seconds or 1:41

Time on Task 1st user took 1 Minute and 20 seconds for Mix Feature after Round 2 of testing.

After our iterations we found…

Round 1 Findings:

Navigation bar needs to be moved down for better access
Calculator pages need to be formatted without scrolling
The user path needs to be more clearly labeled in the low fidelity prototypes for folks who need accessibility accommodations

Time on Task:

1st user was 1 min. 41 seconds for Mix Feature

Round 2 Findings:

When the icons were labeled more clear the users had less trouble
Users were interested in seeing a more polished/final prototype after seeing the improvements post iteration
Navigation icons being highlighted gave users a better idea of the user path

Time on Task:

2nd user went straight to Mix Feature at an impressive 5 seconds

Mock Ups

Our Homepage for the mobile app maintained most of its initial features. There were more improvements made for the icons up top to make it clear where you were while navigating between icons, and we made it more clear where the drop down menu was to select the preferred currencies.

Before the Usability study I had a separate page all together for the “About Section of the site that could be accessed from the Hamburger menu. To save space for the mobile app, make it more accessible and the user flow easier to follow, a partial drop down menu made much more sense.

Users always prefer to see the most polished iterations.

Here we added similar calculators from the app next to their respected types. The website allows us to eliminate the tab from the homepage and have everything laid out which is beneficial for certain users:

Page selected is high lighted in dark green so it is apparent yet still in high enough contrast with the background for accessibility needs, similar to the app which was pointed out. More information is provided and space is utilized. Large Icon Images are helpful for further page selection.

Original Screen Size

Mockups: Screen Size Variation(s)

For the Mobile Version of the responsive app, it was found to be more beneficial to add a Hamburger dropdown menu and a tab to toggle between each calculator to save space on the homepage. With these types of options we are able to utilize more space for users on mobile browsers.

High Fidelity Prototype

Accessibility Concerns

By using the specific color palette, there are enough contrasting colors to increase visibility and decrease challenges

Icons change color to indicate what page the user is on

Changes made to simplify app's number of icons and pages to make the user flow easier to follow and to maximize the space on mobile devices

Customizable size and text of buttons through parental controls in menu icon

Impact

Our participants really enjoyed seeing the development of the app itself.

Their curiosity challenged some initial decisions made for the better and they were pleased with the final product. The compositional issues were accessibility ones we were able to resolve with design iterations.

Minimized the Time on Task by 1 minute and 15 seconds amongst users after our 2nd round of testing for the most challenging feature on the app.

What I learned

The level of research and revisions especially for an app that takes accessibility for all ages into consideration, makes for an interesting final product that you may not have necessarily imagined.

As my user research was done with three different age groups and the app itself was designed with accessibility In mind, I will definitely operate as a designer with more of a sense of intention and simplicity.

Next Steps

Work with Front End Developers to make the drop down menus and calculators more functional in the high fidelity prototype
Get more feedback from others in the field for any suggestions in terms of design, function, or practicality
Launch, Go Live and Reiterate as needed!

Thank you for reviewing my case study!

Let's Connect!

To contact and/or review more work please reach out via email at info@michaelleux.com or by visiting www.michaelleux.com