Goals
The goal of this project is to design a website that provides young adults with the ability to take multiple courses and learn key financial concepts through knowledge checks and quizzes.
Problem
There are not many courses today to teach young adults important financial literacy concepts. They then go off to college or start their careers not equipped with the financial tools to succeed.
Project Background
This is a case study from my Google UX Design course. The goal was to come up with a project that has a social impact. I decided to create a course to teach high schoolers entry level concepts in financial literacy.
Time Frame
4 weeks
My Role
UX + UI Design, Visual design, Branding, User flow, Research, Prototyping, Testing, & Design Lead
Tools
Figma, Canva, Wix
The Challenge
While not everyone goes to college, and if you go to college to study, how will you retain the information for years to come? Also, I lot of students will go on to take loans out to college. What tools are out there to teach young adults about college loans?
My Design Process
Competitive Audit
I began the project conducting background research of current market trends and user needs. I conducted a competitive analysis of 3 other direct and indirect businesses. All three competitors had varying features and catered to or met diverse needs.
Consumer Finance
Pros:
-
A lot of great content available for young adults: buying a car, moving into a new house.
-
Content is fun and engaging for a younger audience.
-
Contains a lot of pictures and charts for easy to digest content.
Cons:
-
Content is hard to find (many clicks).
-
Too much information is linked to other sites and not found on the actual site.
Finaid
Pros:
-
Goes in depth on how to pick and choose between different loan options.
-
Helpful feature to project how much your college tuition will cost.
Cons:
-
Content is not at a beginner level to understand.
-
Information hierarchy is off. It asks you to calculate the interest term on a loan first, and then farther down the page it gives you the definition of the terms.
ASFA
Pros:
-
Has resources in different languages which is very inclusive.
-
Has development programs for continual learning.
-
Has local events where young adults can attend seminars.
Cons:
-
You need to pay for basic features and content.
-
Videos are 30 seconds or less and then asks you to sign up and pay.
Pain Points
Personas
I gathered the data found from our competitive analysis and our pain points to create two user personas that represent our whole target audience
How Might We create a fun and engaging website that teaches young adults smart financial literacy habits that they will utilize for the rest of their lives?
Information Architecture
User Flow
Design System
Paper Wireframes
I started out generating a bunch of different layouts and even used the Crazy 8's exercise to get an idea of the features that would be included in the website.
Low-Fi Mockups
High Fidelity Designs
First Usability Study
I conducted a 30 minute unmoderated usability study with 5 participants. I was looking for user error rates, drop off rates, and product enhancements.
Main user pain points were:
-
The main home page was confusing and it did not feel like you were actually taking a course.
-
Build out the chat feature more instead of having one long chat feed per course.
“Everything about this website feels like a real course…except the home page”- Anonymous
Paper Wireframing 2
After our Usability Study, I went back to the drawing board to come up with designs that addresses these pain points.
Key Designs & Iterations
1. Changed the Sign-in page
I determined the sign in page did not capture the essence of our website. The blue color made it hard to see our text and the sign in page did not show our primary colors enough. I changed the page to be horizontal and make the text boxes rectangular to align with the rest of the elements on the page
Results: Our Sing-in page now aligns with our brand awareness and objectives.
Before
After
2. Changed the Login Page
Our feedback let us know that the home page was not that intuitive and confused our users. I decided to make it more course like by adding the following pages: courses, assignments, grades, resources, messaging, and instructor bio.
Result: User satisfaction with our website increased. Users were more likely to use our website with the added pages and features.
Before
After
3. Changed the Messaging feature
Our feedback was that a messaging feature for students to ask & answer questions was very helpful, but the initial chat feature was not intuitive. I decided to build it out by adding different categories for users to narrow down their searches
Result: Users loved the separation of threads. They particularly liked the “Troubleshooting thread” and the “FAQ’s page”.
Before
After
4. Created Interactive Learning Game
A main problem I faced was how will our high schools retain the text-based information, especially if they are not immediately joining the workforce right after high school? I created an interactive game to test users financial literacy concepts.
Result: Users said our game cemeted the knowledge they learned from the course and were more likely to recommend this course to others.
Next Steps
Build out the “All-Activity” feature to show how many hours per week spent learning, how many in course rewards you earned etc.
Lessons Learned
This was a large project and large projects have the ability for scope creep to occur and its very important to keep track of what is necessary for the Minimum Viable Product and that’s it.