Overview
This project addresses the challenge arising from the differences in currencies and tax systems, which hinder people’s ability to efficiently manage their finances when shopping in Canada for the first time. It aims to offer a more convenient shopping experience for visitors and new residents in Canada by converting prices from Canadian dollars to a currency familiar to the user, while calculating the total cost of the shopping trip and providing users with an overview of their spending in specific product categories.
Software
Adobe XD, Figma
HTML, CSS, JavaScript
Timeline
Mar - Apr 2022 (6 weeks)
Jun 2023 (Figma prototype, 1 week)
The Challenge
Newcomers and visitors are likely to encounter difficulties while shopping, primarily due to the differences in currency. Managing time and finances becomes more time-consuming as shoppers struggle with unfamiliar currency and sales tax system. While there are shopping calculators tailored for Canadian users and mobile currency converters available, these applications usually operate separately from each other. Consequently, users are required to switch between them to view currency conversions while shopping. Existing support tools tend to address individual aspects rather than the overall experience.
During my research into how people adapt to new currencies, I found that the most common advice offered is to "give it time, and you'll get used to it." However, amidst the challenges associated with relocating, this additional obstacle may inadvertently heighten stress.
How might we design an application that will help newcomers and visitors in Canada navigate the difference in currency and sales tax system?
The Solution
This mobile application combines a shopping calculator and currency converter into a single platform. In addition to helping people familiarize themselves with a new currency and sales tax system, this solution serves as a tool for increasing financial literacy. The user can:
Adjust the settings to see the sales tax in their province.
Convert from Canadian dollars to the currency they are familiar with.
Preview the conversion as they shop and see where the sales tax should be applied.
View the breakdown of their expenses.
Save their shopping history to better track their spending.
Research
Competitor Analysis
Before I began designing the application, I looked at the current tools available. I couldn't find one that combined both the calculation and conversion functions, but there are many that do either one.
Calculating discount or tax: Many web calculators only calculate the discounted amount and the tax being applied. The user enters the original price, the discount, and the tax rate. In addition to showing the discounted price, some of these tools also provide the amount that the user would save.
Shopping calculator: Most of these apps allow users to add, edit, and remove items to their list before calculating the total. The users can choose to calculate by quantity or weight. When they're done, they can save this list and start a new one. Many also let users calculate discounts and tax rates. With a few of these apps, before the users remove the item completely from their list, they can uncheck it to preview the change in total first.
Converting into different currencies: Convert from one currency to another using real time exchange rates. These are made available by banks and independent developers. Users can easily swap the direction of the conversion and view both the original conversion and the rounded value.
On their own, these applications are already beneficial tools. Combining them together can increase the convenience and ease of use should people require many of these functions at once.
Conceptualization
User Persona
Conceptualization
Ideal Features
Based on the research and user personas, the solution should have these outlined features:
Calculate the sales tax based on the province and the type of products: Provinces in Canada apply different sales tax rates. The type of product being brought determined whether it is taxable, since sales tax generally isn't applied to basic groceries and medical products.
Convert from Canadian dollars to another currency: The user should be able to see the prices in the currency they're familiar with and preview the conversion before adding the item to their list and checking out. An API can be used to retrieve the conversion rate in real time and applied it to the calculation.
Edit and delete items on the list: Like many other shopping calculators or e-commerce apps, the user should be able to edit the item they've added onto their list, or remove it from the list.
Sort the products into separate categories: Categorizing the products would make it easier to calculate the sales tax. This feature would help users familiarized themselves with the sales tax system as well as track their spending habits. The total of each category would be calculated and shown in addition to the total of the entire list.
Save the list: While I want to focus on the calculation and conversion features, allowing the user to save and track how much they've spent would be a useful feature to build financial literacy.
Conceptualization
User Flow
Development
Paper Prototype
I began by sketching low-fidelity wireframes to visualize the layout. The first challenge I encountered was accommodating all the content onto a mobile screen given my limited knowledge and skills at the time. My goal was to display the user's choices (currency and province), the shopping list, and the total cost on a single screen. However, attempting to show two currencies simultaneously meant I had more information to fit into a confined space. Additionally, I couldn’t determine which information was more important and deserved more emphasis.
I used the the sketches to create a paper prototype for quick usability tests. The feedback from users was generally positive. To address the layout difficulty, one person suggested allowing the user add what they are buying first before converting them all afterward.
Development
Initial Iterations
Based on the paper prototype, I recreated the wireframes using Adobe XD. These iterations were intended for a coded prototype, which would serve as the end product. due to my limited coding skills at the time, I had to omit the edit feature from the user flow and paper prototype. Additionally, the delete function was eventually removed.
Throughout the development process, I realized that the initial screens prompting the user to select their province and preferred currency may be unnecessary. Instead of having that step-by-step instructions, a brief pop-up instructing the user would suffice.
Development
Coded Prototype
As previously mentioned, this project was intended to be a coded web app. I recreated the design using HTML and CSS, and then implemented the functions using JavaScript. An API was used to retrieve real-time conversion rates. Since my knowledge of backend databases was limited at the time, the save function was achieved using local storage, allowing users to view only two trips in their history at a time. The prototype was hosted on Replit; however, due to recent complications with Replit and the API, it is currently unavailable.
Nevertheless, encountering this obstacle inspired me recreate the prototype in Figma, building upon the previous iteration.
Development
Redesigned Layout
While maintaining the same general layout, adjustments were made to accommodate larger screens. Additionally, the redesign better accounts for the native UI components found in majority of recent smartphones. Two additional pages were introduced: one to display all settings, and another to be displayed whenever the user starts a new list.
Refinement
ColourS & Style
Refinement
Mockup & Prototype
Using the high-fidelity wireframes, in Figma, I prototyped the interactions users would have with the application to demonstrate the intended functions. This is a walkthrough of the user flow.
Takeaway
This is the first web application I designed and prototyped. I was new to designing user experience and front-end development, but I was ambitious and tried to fit as many functions as I wanted. Although I already omitted some before moving onto the code, re-evaluating the features and the user's priorities could have led to a more cohesive application.
The Figma prototype opened up the opportunity to design a more comprehensive application. The process of adapting the previous wireframes showed me where and how the user's experience can be improved. Further testing and iterations would have greatly benefit the development process and the final application. It's also important to account for other UI components and possible constraints each individual users might have.
I hope to revisit this project again in the future to recreate the coded prototype with more extensive functions, in addition to revising the features as people's needs change and my skill set expands.