Finance Friend is a project I worked on as a front-end developer with three other students
for a Human Computer Interaction Class. Finance Friend is a proof-of-concept web app
that helps novice traders learn more about key financial concepts.
Cryptocurrency Observations
To start the project, we searched for similar web apps that teach financial concepts.
We found a crytocurrency bot online and had non-developer students test it out.
The most common feedback was that although the interface was nice
and simple, the bot was a "one-and-done" kind of site — users would not
return to the website after looking through it once. They also stated that the content
was not presented simply enough, and that they would not recommend it for people who have no
prior knowledge of economics. From these observations, we determined that we needed to create
something that the user could return to, helping them grow in their financial knowledge.
Incentivizing Features
After we conducting user observations, we determined our essential features. We wanted our site to be
simple, since it would be teaching complex concepts. We also wanted to create a points
system so that the user could track their learning progress. This would incentivize users
to return to the web app instead of just visiting it once.
"Paper Prototyping" Test
After we decided our features, I created a "paper prototype" to test on users while the rest of my team
members facilitated the user testing. We printed each screen on a separate piece of physical paper and
had a user "navigate" the site by clicking through it.
During testing, we discovered that users prefer to pick their skill level after they have
already made an account, rather than at the beginning of creating an account. We also found that
the user wanted a home screen that they could come back to at the end of each lesson.
Friendly Branding
As the name suggests, we wanted to design a logo that was friendly and approachable for users. Since I was in charged of branding, I chose a blue color as
a neutral value, for its familiarity and professional nature.
I chose a rounded font, again to not intimidate users. I also chose a light pink and blue - since the darker blue
was more professional, I wanted more pastel colors to soften to look of the interface.
Computer Prototype
Once we had a color scheme and feedback from user testing, we started on the computer prototype.
The class was structure so that the teams had a week to implement each feature. After each feature was implemented,
we received feedback from the class TA and from other students in the class.
Feature 1: Learn About Key Terms
Once I had the color scheme, I started on the first feature. I created a "key terms" page which included a flash card and a list view of
basic financial terms. The user could either learn with flashcards, or see all of the terms grouped in the list view.
The "key terms" card view is a Bootstrap carousel. This feature is intended to be an introduction to basic financial
terms, so that the user will have some background when they dive deeper into more complicated concepts.
Since many people learn differently, there is a "card" view and "list view". The button to toggle between the two different views has a background
of our secondary color in order to make it stand out. The list view is also separated into two columns in order to organize the information.
The list was originally not grouped into subtopics, and were simply in alphabetic order. However, after receiving feedback from the class,
we decided to split the terms up according to different financial topics.
Feature 2: Learn About Stocks
In the next prototype iteration, we implemented the feature of learning basic concepts about stocks. I took the information written by one of my team members
and styled it so each section of text had its own page. We then added financial graphs so that the user could understand the information on a visual level.
Each vocabluary term is bolded, and has a hover message that reveals the definition of the word. This allows the user to understand the content more
by giving them a broader context.
Feature 3: Create An Account
In the next prototype iteraction, we implemented the feature of creating an account. I designed the interface of our landing page, which includes a section
to sign up for an account. I also designed the login page and home page where the user can navigate between the various features. The rest of my team members
hard coded the points system and account information.
Final Product
Check out our GitHub or the video below to view our final prototype!
