Fruition is a responsive web application focused on educating borrowers through the entire student loan lifecycle. The product provides a loan dashboard, counseling, and personalized roadmap which allows borrowers to make informed decisions, reduce debt, and plan a brighter future.View Desktop Prototype View Mobile Prototype
Over 60% of borrowers lack confidence in their knowledge of student loans. Misinformation and biased counseling are leading borrowers further into debt.
Educate borrowers through the entire loan lifecycle to allow for more informed decisions and a brighter future.
I gathered data from a survey of 340 borrowers. The core group of borrowers, age 25 to 34, consistently cite poor counseling, inexperience, and pressures to attend college as their reasons for taking on student debt. Close to 90% want the option of having unbiased counseling through student loans.
do not understand student loans
debt is from a bachelors degree
average monthly payment
to $100K average total debt
Alongside the servicers above I analyzed Student Loan Hero (recently acquired by LendingTree), Unbury.me, Tuition.io, and Intuit Mint. Three findings stood out to me:
Underdeveloped - Solves only a small portion of the problem. (Unbury.me)
Business Model - Sustained through an ad-based model causing a cluttered product or limiting itself through exclusive partnerships with employers. (Student Loan Hero and Tuition.io)
Motivations - Loan servicers are motivated by collecting interest and comissions.
According to the 2016 Consumers and Mobile Financial Services report by the Federal Reserve, adoption of financial apps is highest by a young educated demographic. However, with 44 million borrowers the data only provided a vague understanding of a possible target. To have a more precise target demographic, I wanted to answer two questions:
Through an annual report by LendEDU, it turned out that Pennsylvania is ranked number one in both categories. During this project, the highest ranked colleges in Pennsylvania were Lincoln University, Penn State Hazleton, and Penn State Greater Allegheny.
highest adoption of financial apps
projeced salary increases adoption
I interviewed participants from Pennsylvania followed by states ranked 2-10, such as New Hampshire, Delaware, and Connecticut. In short, the majority of borrowers want a product focused on loan counseling and details of their student loans. The two personas below show each end of the target demographic.
Educational, Planning, Freshman
18 years old, PT Tailor
Penn St. Greater Allegheny, $40K in debt
"I wish I had more help with my college path and loans. I worry that made the wrong choices."
Involved, Refinance, Working
28 years old, Software Developer
Lincoln University, $90K in debt
"Student loans are a huge burden and hold me back from reaching other life goals."
After developing user stories, I created seven user flows and a sitemap focused around the roadmap, counseling, and dashboard. The direction research took me meant the product would require a much larger team of counselors, writers, and finance professionals. I understood my job would be to create a reusable and straightforward design that made content easy to implement and consume.
Before sketching, I considered a mobile-first or desktop-first approach. Although mobile-first is my preferred method, the limitations it posed for core features would make most of the product unusable on mobile. For that reason and a short timeframe, I prioritized desktop for the MVP while working on mobile at the same time.
I facilitated usability testing on low-fidelity wireframes. At this point, the design lacked vital information that users need while navigating Fruition.
Moving into high-fidelity wireframes, I focused on the two most viewed pages of Fruition: the landing page and dashboard. I used the decisions and iterations made on these screens to guide the interface of the roadmap, messages, articles, and profile.
Ascend was a temporary name I gave the product while running five tests on the dashboard. An initial A/B test on navigation showed a preference for the horizontal navigation bar shown below. Through this test and a design critique I found four main preferences and issues:
F-Pattern - Users preferred the natural direction of Option A and were more comfortable with small cards on the left.
Button - Easy to find, and I began to use its placement on every page with primary buttons.
Graph - In critique, a senior designer mentioned this graph was not informative and needed refinement.
Progress - Meter was generic and the lack of information confused users.
While working through iterations, I struggled to balance the navigation bar with active data. I ran three inconclusive colors tests. The fourth and final test below led to a more precise direction for the dashboard.
Although Option A won the preference test, feedback from users and designers swayed my choice to Option C. The dark and neutral navigation bar anchored the page better than A or B and allowed the data to come forward. I also made the following changes to the dashboard based on user feedback.
Credit Rating - Redesigned the credit section to be more organized and informative.
Line Graph - Enabled users to hover over specific dates and provide a tangible indicator of progress.
While the dashboard was evolving, I ran an A/B test on the landing page wireframes. The results and written feedback showed a preference for specific aspects of Option A that B didn’t provide as effectively.
CTA Form - The shorter form performed the same job as longer forms.
Personalized Path -Users consistently stated they liked having more detail in each roadmap section. With an option to click and read more.
Testimonials -Users preferred having only two testimonials.
Hero - Dropped hero down to fill 80% - 90% of users viewport. Allowing users to concentrate on content.
Personalized Path - Created more space between each element.
Other changes - Altered spacing and placement of bump in the hero, about, and resources page.
Designing for mobile and desktop at the same time was very challenging. Tests I was running on the desktop version of Fruition always made mobile inconsistent and fixing them required more time than I had available.
To improve consistency and make better use of my time, I had to rethink my approach. While bringing mobile up to speed, each decision I made had to work at scale. Flows were restructured to look and behave the same, and if I hid any information on mobile, I made it obvious to find. Sticking to these principles resulted in very consistent outcomes in final usability tests and a more enjoyable experience for users.
With little time left, the goal was to make sure users could complete tasks with as little hiccups as possible and then launch, test, and iterate more accurately. These are some of the changes I made from the second round of usability tests.
Throughout the project, I made sure I was designing for empty states and error states. Backed by research like the optimal placement for input feedback in responsive applications.
The branding for Fruition came later in the process of this project. I started sketching ideas related to students and the loan process but struggled with its form. After some thorough analog and digital sketching, I landed on a graduation cap made out of two F’s. The wordmark uses the same typography found inside the application. I put together a style guide detailing its proper use and other aspects of the Fruition system.
Since mobile-first is a relatively new approach, I learned so much about the challenges companies have trying to scale down their products. It's one thing trying to distill the product down to make it usable on mobile and an entirely different one being mobile-first while ensuring the product can accommodate a multi-device future.
I also learned a lot about managing a broad scope. After interviews with users, it was so easy for the project to get out of hand by focusing on unnecessary features. By saying no and always coming back to core features that were defined through interviews, personas, and stories, I was able to zero in on the solution.
Lastly, what I learned about managing scope taught me a lot about reaching "good enough" on a large project. With little time, it's so essential knowing where to focus your efforts and when to stop. Part of what helped me is leaning on user research and a team (design community) to work my way out of challenges. While Fruition has a long way to go, it's absolutely a solid jumping off point and always better than an unfinished "perfect" project.