Fruition Student Loans responsive dashboard


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


  • Product Design
  • Branding & Identity

Timeframe & Type

  • 12 Weeks, Part-Time
  • Personal Project


  • User Survey
  • User Personas
  • Competitive Analysis
  • User Stories
  • User Flows
  • Wireframes
  • Mockups
  • User Testing
  • Prototypes
  • Branding
  • Design System


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.

User Survey

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.

Key Insights


do not understand student loans


debt is from a bachelors degree


average monthly payment


to $100K average total debt





Great Lakes


Sallie Mae

View survey results

Competitive Analysis

Alongside the servicers above I analyzed Student Loan Hero (recently acquired by LendingTree),,, and Intuit Mint. Three findings stood out to me:


Underdeveloped - Solves only a small portion of the problem. (


Business Model - Sustained through an ad-based model causing a cluttered product or limiting itself through exclusive partnerships with employers. (Student Loan Hero and


Motivations - Loan servicers are motivated by collecting interest and comissions.

View full analysis

Target Demographic

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.

senior icon

18-28 yr olds

highest adoption of financial apps

senior icon


projeced salary increases adoption

View full analysis

User Personas

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.

Nicole T. user persona

Nicole T.

Educational, Planning, Freshman

18 years old, PT Tailor

Penn St. Greater Allegheny, $40K in debt


  • Easy to understand loan education in one place
  • Help with researching colleges, FAFSA, and costs
  • Want to understand options for paying down loans

"I wish I had more help with my college path and loans. I worry that made the wrong choices."


  • Didn't know what she wanted to do
  • Rushed into loans with little education
  • Doesn't know how to manage loans
Jack M. user persona

Jack M.

Involved, Refinance, Working

28 years old, Software Developer

Lincoln University, $90K in debt


  • Roadmap or action items with incentives
  • Dashboard showing details such as interest, credit score, and monthly payment
  • Graphs and visuals update based on life events

"Student loans are a huge burden and hold me back from reaching other life goals."


  • Finance apps have lousy UI and auto-categorization
  • Lenders and finance apps don’t see the big picture
  • Struggle with sticking to a payoff plan

User Stories and Flows

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.

Fruition dashboard option A
Flow for a checkpoint on finding scholarships
All Stories & Flows

Sketching and Low-Fidelity

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.

Sketch of dashboard with vertical navigation
Sketch of the dashboard
Sketches of the Fruition landing page
Sketches of the landing page
Lofi wireframe of the Fruition dashboard
Low-fidelity wireframe of the dashboard
Lofi wireframe of landing page
Two low-fidelity wireframes of the landing page

Usability Testing

I facilitated usability testing on low-fidelity wireframes. At this point, the design lacked vital information that users need while navigating Fruition.

  • Clearer pricing - Landing page didn't communicate that the product is free.
  • Labeling - Users are confused by navigation labels "Loan Education" and "Chat".
  • Crumbs - Articles need to show how the user got there.
  • Set A Meeting - Users are worried about overlapping times when choosing a counselor.

High Fidelity & Mockups

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.

See all hifi wireframes


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:

Fruition dashboard option A
Option A - 69%
Fruition dashboard option b
Option B - 31%


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.

View full results

Dashboard: Iteration

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.

Dashboard Option A
Option A - 42%
Dashboard Option B
Option B - 29%
Dashboard Option 3
Option C - 29%

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.

View full test

Landing Page

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.

Option A - 57%
Sphere white version
Option B - 43%
high fidelity landing page


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.

Submitted to critique
Landing page submitted to critiique
Landing page mockup B


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.

Sphere white version
Sphere white version
View mobile designs

Usability testing & iterations

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.

Set a status before
Status before: Choosing a status while onboarding confused users about its impact on their roadmap.
Set a status after
Status after: Placed on the dashboard which increased users confidence in its impact and ability to change it.
Set Meeting Before
Set a meeting before: Choosing a counselor first made users concerned about overlapping times.
Set Meeting After
Set a meeting after: Users now scroll or search for their topic and get paired automatically with a counselor.
Add Loan Before
Add loan before: Poor experience scrolling to find a servicer in a modal.
Nate V. user persona
Add loan after: Condensed to mainly focus on "Big 3" loan servicers which covers 95% of users.
View Test & Iterations

Unhappy states and blankstates

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.

Nate V. user persona
Input feedback
Nate V. user persona
Welcome blankstate

Logo Design

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.

Nate V. user persona
Nate V. user persona
View styleguide
View Full Process

What I Learned

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.