Creating a user experience for Social Good
This is a 7 min reading.
The Problem:
From those just starting in life to those nearing retirement, the financial situation of individuals is a significant source of stress. With rising costs of living and the ever-changing landscape of the economy, it is becoming increasingly important to be proactive in managing money. Common questions that people have are: How do you manage your money in a responsible way and in line with your goals? How do you build a portfolio of investments that will help to grow your wealth over time? How do you make wise decisions regarding future savings, such as retirement or college planning? Therefore, it is essential to be informed about personal finances and make decisions that are right for you and your situation.
The Goal:
The goal is to create a web app and website that enable users to gain foundational knowledge of the financial world through simulation.
My role:
UX/UI designer designing a web app and a responsive website.

Responsibilities:
-
Conduct interviews
-
Paper and digital wire-framing
-
Low and high-fidelity prototyping
-
Usability studies
-
Account for accessibility
-
Iterate on designs
...designing for Good
-
Design for inclusivity: This includes ensuring that all people, regardless of race, gender, or socio-economic status, have access to the app and can benefit from the resources it provides.
-
Design for Equity: This means ensuring the app is built with users’ needs in mind and addresses existing inequalities and injustice.
-
Design for sustainability: This means that the app must be designed to reduce its environmental impact, and that it is built with an eye toward long-term sustainability.
When designing the E-Fama app, it was important to incorporate these 3 principles. We made sure to build the app with an intuitive user interface and easy-to-follow content to ensure it is accessible to all users regardless of their background or experience. The app also provides comprehensive and unbiased information resources that are easy to understand and use. Additionally, the app was designed with sustainability in mind to reduce its environmental impact.
To further promote inclusivity, equity, and sustainability, the app also incorporates gamification to make the learning process more engaging and enjoyable. This helps to motivate users and keep them focused on the task at hand.
By incorporating these principles into the design of the E-Fama app, users from all backgrounds can benefit from the app’s comprehensive resources and use it to make sound financial decisions and reach their financial goals.

MVP for social app
When designing the minimum viable product for E-Fama, it was essential to consider the users' needs. Through interviews and surveys, we discovered that the data most users had access to was biased toward service providers and difficult to access, indicating a need for further investigation.
It was also essential to create an intuitive user interface and easy-to-follow content that would make it simpler for users to access the financial literacy resources they need. This led to the conclusion that there was a need for more in-depth research and education about financial literacy.

The design of the minimum viable product had to consider the project's goal: to provide users with access to foundational knowledge of the financial world through simulation. To ensure users had access to the data they needed, the app had to provide comprehensive and unbiased information and resources that were easy to understand. Additionally, the app had to be designed with an intuitive user interface and offer simple, step-by-step guidance.
The app also incorporated gamification to make the learning process more engaging and enjoyable, helping to motivate users and keep them focused on the task at hand. By providing users with the tools and resources they need to understand the financial world in Canada, E-Fama is an excellent way for users to make the most of their money and reach their financial goals.
User research summary
For this project, I began by interviewing potential users and putting together a survey. The majority of participants who responded to the survey were not familiar with where to look for information pertaining to financial literacy. After comparing the survey results to the preliminary interviews, we discovered that accessing the necessary data was extremely difficult and the information was segmented and only available to certain service providers.
The research process provided two critical conclusions. Firstly, the initial assumption and goal of the project were both validated. Secondly, we were able to uncover the fact that the data was divided and hard to access, which meant we had to find a way to make that information more readily available for users. This led us to come up with a comprehensive solution that would make it simpler for users to access the financial literacy resources they need.

“As a newcomer to Canada, I want some tools that allow understanding the financial system in Canada so that I can get the most of it advantage of the systems.”
Ahmed Harrad is a software developer who needs to gain knowledge about the Canadian financial system because he wants to maximize his income.

“As a first-time homebuyer, I want access to tools that will help me better understand the mortgage system, so I can make the best choice when buying a house.”
Ana Gracias is a teacher who needs to gain feedback on the mortgage system because she wants to buy his first house.

“As a full-time worker, I want to gain insight into creating a secondary source of passive income to generate additional funds for my family.”
Randy Campbell is a welder who needs to learn how to implement a viable passive income because he has a different source of income.
Pain points:
One of the principal pain points in an financial literacy is the difficulty of accessing quality information. This is especially true for those who are not already familiar with the available resources and are unable to navigate the complex landscape of the financial industry. To make sure that users can access the data they need, the app must provide comprehensive and unbiased information and resources that are easy to understand. Additionally, the app should be designed with an intuitive user interface and offer simple, step-by-step guidance to ensure users can easily access the content they need.
Paper wireframe
The ideation phase starts with napkin sketches, where I project the visual image of what the app should look like. From there, I continue with some structural wireframes and elements to develop further in the next phase.


Site map
This comprehensive diagram is a representation of the website's site map and illustrates the overall structure of the content for the app. It provides an overview of the hierarchical structure and organization of the content, allowing users to quickly navigate between different sections, subsections, and pages of the app.

Digital Wireframe
The first wireframes were created by combining the initial sketch with the web flow analysis.




Low-fidelity prototype
The prototype is based on the previous user flow to reach the necessary complexity level to test this first phase with real users.

Testing wireframes
I conducted two usability studies - the first was a usability test to measure the architecture of the login screen and the second one was an A/B test to test different variants for the stock market simulator.
For this test, I interviewed 25 people and ran a 45-minute usability test, which included a complete survey and an analysis of the pain points that had been identified. For the A/B test, use 20% of the participant as a control group. All data was reflected in a heat map based on user interaction and the relevant focus point.
The key metrics used to evaluate the success of the A/B test were click-through rate, conversion rate, and bounce rate. The click-through rate was measured by tracking the number of clicks on deferents parts of the app, while the conversion rate was measured by monitoring the number of users that completed a task or purchased stock. Finally, the bounce rate was measured by tracking the number of users who left the app without engaging with the content.



The key findings of the test are that users face some issues. Firstly, many users are struggling to remember their forgotten passwords. Secondly, they are having difficulty understanding the sell-buy dynamic in the stocks simulator. Moreover, users are also confused by the progress bar. In addition, the conversion rate in the glossary area is surprisingly low. Lastly, users are finding it difficult to switch between different modules. All of these issues are having a negative impact on the user experience and should be addressed as soon as possible.
The design system, elements, and consistency throughout the design.


The design system, elements, and consistency throughout the design.



