Collegefund App and Responsive Website

Project Overview (Case Study):

The Product Collegefund is a university-based crowdfunding platform I created focused on empowering education. It is a tool to connect students in need to those in their local community and beyond who are willing to help them pay for tuition and other educational expenses while attending college..

Project duration May 2022 - June 2022

• Problem A study by the Ohio State University's National Student Financial Wellness organization found that 72% of college students feel anxious about paying tuition and other bills. I've noticed that students want to connect with people in their community who can help them with financial and social issues, but they have a way to do so.

• Goal Design an app where students can set up a campaign, set a goal, and collect donations from friends, family, and the general public. Donations are made through a credit or debit card, and donors can leave a message with their donation. Once the goal is reached, the funds are typically transferred to the campaign organizer via PayPal. Collegefund.com is a non-profit organization motivated to drive positive change in society and relies on the generosity of its users. There is no limit to how much money can be raised.

• Role UX designer from concept to delivery.

• Responsibilities Conduct research, interviews, sketch, design digital wireframes, and low and high-fidelity prototypes, conduct usability test, account for accessibility, and iterate on designs based on feedback.

• Visual Design Elements: Layout, Illustrations, Color, Imagery, Interactivity, and Typography.

• Softwares: Figma, Sketch, Adobe Illustrator, and Photoshop.

Understanding the User

• User Research

• Personas

• Problem Statement

• Competitive audit

• Ideation

User Research

Summary

I analyzed the research and began developing interview questions for user interviews with students from California State University Los Angeles. I assumed most interview participants reported feeling stressed about experiencing financial matters stemming from the fear of being unable to meet tuition costs and monthly expenses.

I also assumed that students were embarrassed to seek help. However, the feedback from my research made it clear that students would be open and willing to work towards meeting their financial goals if they had an easy-to-use, affordable, and accessible tool to help guide them.

Personas

Problem statement - Liam is a working student who needs a solution that will allow him to receive funding outside of student loans because they typically stress out and can't concentrate on school when they don't have enough money to pay for school-related expenses.

Problem statement - Cam is a student at a local college who needs a way to connect to more people in her community because she needs to fundraise money for school.

Competitive audit

An audit of a few competitors’ products provided direction on gaps and opportunities to address with the Collegefund app.

Sitemap

I then began working on the Information architecture for the website. For a cohesive experience across all devices, I created a sitemap to guide the organizational structure of each page to ensure a cohesive and consistent experience across devices.

Starting The Design

• Digital wireframes

• Low-fidelity prototype

• Usability studies

Digital wireframes

After ideating and drafting paper wireframes, I created the initial designs for the Collegefund app. These designs focus on delivering personalized guidance to users to help find students who need funding in their area.

Low-fidelity prototype

To prepare for the first round of usability testing, I created a low-fidelity prototype allowing users to view a campaign, check out, and donate.

View Collegefund’s low-fidelity protoype

Usability Study

• Study type Unmoderated usability study

• Location California State University, Los Angeles - CSULA

• Participants 7 participants

• Length 30-60 minutes

Findings

After I conducted two rounds of usability studies, I used the findings from the first study to improve the designs. While conducting the second study, I created a high-fidelity prototype, and it revealed what aspects of the mockup needed refining.

Round 1 findings

1. Search People want to connect with students who need help, not just locally.

2. Privacy Users wanted an option to donate anonymously.

3. Misconduct People wanted a way to report a fundraiser in the event something wasn’t right.

Refining The Design

• Mockups

• High-fidelity prototype

• Accessibility

• Key Performance Indicators (KPIs)

Mockups

Based on the insights from the usability studies, I applied design changes like adding a "donate anonymously" button that will allow users to donate without displaying their name publicly on the student's campaign.

Additional design changes included adding a “Report fundraiser” button, allowing users to report if something isn’t right and request a refund for their donation.

High-Fidelity Prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.

View the Collegefund high-fidelity prototype

Accessibility

Considerations

• Text is accessible and readable for visually impaired users who have difficulty reading dense blocks of text.

• Clear labels for interactive elements.

• The initial focus of the home screen is automatically personalized recommendations and helps users effortlessly define the primary task.

Responsive designs

Collegefund has multiple responsive screen size variations, including mobile, tablet, and desktop versions.

Key Performance Indicators (KPIs)

I considered a few KPIs that can be used to evaluate the success of the Collegefund’s mobile app:

• Daily Active Users:  The number of unique users who accessed the app each day.

• Orders per Day:  The number of donations made through the app each day.

• Customer Satisfaction:  A measure of how satisfied users are with the app, typically collected through user surveys.

Going Forward

• Takeaways

• Next steps

Takeaways

Impact Users shared that the app made fundraising easier and more accessible.

One quote from peer feedback "Collegefund app is innovative and easy to use. The platform helps bring awareness to the needs of many students who need financial help because they struggle to meet their basic needs, impacting their ability to succeed in school."

What I learned This experience taught me that despite the scale of the problem I was addressing, following each step of the design process enabled me to approach the problem with the user's needs in mind and generate innovative solutions.

Next Steps

• Conduct research on the app's success in reaching the goal of helping more students connect to people who can help them fund college.

• Add more educational resources for users to learn about fundraising.

• Implement a feature allowing universities to raise money for charitable projects or events.