DESIGNER'S NOTE
This project was done for a startup that is currently in stealth. As a result, I am unable to use the company's name and logo. I will use a placeholder for the logo instead.
Many people today under age 35 struggle with financial literacy. They often spend more than they earn and build up credit card debt.
People in debt have tried previous solutions such as taking out loans to pay off their debts, taking online financial literacy, and signing up for programs that teach financial literacy by dictating their spending.
The user takes out a loan to pay off debts. Now their debts are paid off and they only have to worry about one loan to pay.
The user finds themself drowning in more debt, and struggles to pay off the new loan.
The user signs up for an online class to learn financial literacy. They watches videos online.
The online lessons are long and boring, so the user loses interest and does not complete the course.
The user signs up for a program to dictate their spending. They give the program all of their financial information, and the program tells them how much money to spend every month so they can get back on track and pay off their debts.
The user feels uncomfortable having their life dictated by a robot.
Although the stakeholders already did some user research, I felt it would be useful to look at other products that teach and/or engage. I looked at other education platforms, even if they did not specifically teach financial literacy to see how they teach; social media platforms to see how they engage, and grab/hold attention; and video games to see how they engage and be fun for the users. Mario is a personal favorite :)
Social media sites and apps are known for their infinite scroll function, which keeps users scrolling through content with no seeming end in sight. In education platforms, users often browse through organized sets of videos. While this can give a feeling of structure, it can feel tedious, boring, or intimidating. However, the infinite scroll keeps the user engaged, often curious to see whats next on the list of things to look at.
I considered using an infinite scroll as a way of browsing through financial literacy lessons. This way, browsing through lessons feels more natural, and can be fun.
One issue I discovered with online courses is that videos are long and users often lose interest. On the other hand, social media sites give users bitesize pieces of content. Users feel less intimidated when they see they need to watch a bitesize video rather than a long video. Additionally, users have to physically interact with their devices by scrolling in order to progress to the next image/video. This is another way of keeping the user engaged.
In Super Mario Odyssey, the player must explore each level and collect "power moons" in order to progress to the next level. The player must cash in their moons to power up their hot air balloon, which then takes them to the next level. However, the player needs to cash in a certain amount of moons in order to progress.
Cashing in moons gives the player a feeling of reward for their hard work. It also gives a feeling of satisfaction that is similar to cashing in a large amount of loose change at a bank. I considered using this concept in my designs in order to give users a sense of reward and satisfaction, while also giving them a good feeling about their progress.
Together, the stakeholders and I created a solution for incentivizing and rewarding users to continue with the financial literacy platform. As the user completes lessons and modules, they receive in-game currency in the form of coins. Then, they can cash in their coins to increase their score, which can give them an upgrade, similar to leveling up in a video game.
These upgrades were only represented in symbols. For the time being, they only give the user a feeling of progress without any real world benefit. In the future, the stakeholders intend to offer a financial incentive to users. The company would offer the user a loan to pay off their debts. Then, as the user would increase their score, their interest would decrease.
Before jumping into the mid-fi wireframes, I always like to draw my ideas on a whiteboard and/or sketch my ideas with pencil. For the project, I was lucky enough to brainstorm ideas along side my stakeholders. This helps keep the ball rolling. After drawing out my ideas, I made lo-fi wireframes and the interactions.
The following drawings are for a module that teaches a method of budgeting known as the "50/30/20 rule".
DESIGNER'S NOTE
These designs are for a website. The stakeholder's research showed that many users would use mobile. We decided to design for mobile first, and then design for desktop afterwards.
Before jumping into the iterations, I created a color palette for the designs from scratch. I first took into account the stakeholder's preferred color, then I thought about how the users should feel when going through the product. I wanted the users to feel excited and uplifted while going through the lessons. Additionally, I wanted the users to have a feeling of growth; and finally, I wanted them to feel like they were in good hands since they were handling finances.
I tested the prototype on 8 users. I had them go through the 50/30/20 rule module. This test was more about understanding, feeling, and general use, as opposed to ease of use.
Once the prototype was done, I worked with the front end developer to flesh out some of the interactions so it could be pitched to investors.
Users like to use digital products that they understand and connect with, but the details are where users fall in love with a product. Adding personality to designs can strengthen them, and these details can be overlooked at times. At the same time, a designer should be strategic about where and how they add personality. Personality should enhance the product without distracting the user.