mobile app and website for school supply donations

4CDONATIONS

mobile app responsive website ui/ux

My Role
Project Lead
UI/UX Design
UX Research

Team
Aubrey K. Young (Solo)

Project Duration
3 months

the situation

Schools are critically underfunded in the arts. Parents, individuals, and businesses need an easier process to support creativity in local schools.

the goal

Create a mobile app and responsive website that facilitates donations of art supplies and funds, enhancing support for children's creative development.

User Research

Research Summary

I conducted 4 interviews (3 via video call, 1 in person) in relaxed settings, each lasting approximately 10 minutes.

Goal: to understand common behaviors, experiences, and frustrations of users interested in donating to school art programs.

Participants: Ages ranged from mid-20s to mid-40s, including elementary school parents and individuals in creative fields, from diverse cultural backgrounds in metropolitan or suburban areas.

research results

Through User Study interviews, I identified key pain points and opportunities for improvement.

1

Users want a streamlined donation process

2

Users prioritize mobile app optimization but value the convenience of donating via desktop.

3

Users seek transparency regarding how their donations support children's arts programs.

personas

After analyzing the interview data, 2 personas emerged:

Franklin is motivated to support local schools by donating money and supplies, ensuring that teachers can nurture creativity in children, regardless of their financial constraints.

Nina seeks access to more art supplies to provide all her students with the essential tools needed for creative and artistic expression. She is dedicated to fostering a supportive environment where every child can explore their creativity.

Low Fidelity Design

My Approach

To prioritize a streamlined donation process across multiple platforms, I implemented a modular design. This approach reduces visual clutter and effectively guides user actions, enhancing overall usability.

User Journey

Donor Perspective: Animator Franklin
Receiver Perspective: Teacher Nina (future development)

Franklin's User describes navigating from start through Donation Choices.

Franklin's user journey — Franklin's journey from "Navigating to Donation choices" to "Sharing link on social media"

Sitemap

The 4CDONATION sitemap is inspired by existing school donation platforms, such as:

Lo-fi Wireframes

The modular approach facilitated the layout and design for responsive platforms (mobile, tablet, and desktop).

Functionality Differences:

Website: Focused on donations and general program information.
Mobile App: Centered around in-depth information on schools, teachers, and specific projects that user donations will fund.

MOBILE APP:

4CDONATIONs, lo-fi mobile app purchase page

4CDONATION, lo-fi mobile app success page

HOMEPAGES:

4cdonation, digital lo-fi desktop homepage — Desktop

4CDONATIONs, digital lo-fi tablet homepage — Tablet

4CDONATIONs, digital lo-fi mobile homepage — Mobile

DONATION SCREENS:

4CDONATIONs, digital lo-fi desktop donation screen — Desktop

4cdonations, digital lo-fi mobile donation screens — Mobile

Lo-fi Usability Testing

The following user concerns emerged after of usability testing, which I used to create my hi-fi mockups.

1

"I wasn't sure what button to press to get started."

Problem: Users expressed that they found it challenging to understand which buttons to press, leading to confusion about the app's main functions.

Solution: Instead of relying solely on symbols, I added labeling to the action buttons. This change enhances accessibility on the mobile app, making it easier for users to identify the functions of each button.

4cdonations lo-fi school select screen (mobile app)

2

"I've messed up a pay amount using sliders before, so I'm extra careful when using a slider, especially on my phone."

Problem: Users felt that the slider mechanism for selecting donation amounts was not intuitive and led to errors during the payment process.

4cdonations lo-fi donation screen (mobile website)

Solution: I replaced the slider with buttons for selecting donation amounts. This change provides users with more visual input and greater control over their donation amount, making the process more intuitive and user-friendly.

4cdonations lo-fi donation screen (desktop)

High Fidelity Design

Colors & Fonts

4CDONATION's bold primary color scheme is designed to draw the user's attention to specific modules, ensuring a streamlined experience.

#004483

#e84855

#f0fbff

#1b998b

Barlow Description: Barlow is a geometric design font that provides a modern appearance. Its sleek and straightforward aesthetic enhances the visual appeal and readability of the app.

coup de grâce: final screens

4CDONATIONS's screens below show a mobile app & responsive website that operate similarly in streamlining donations, but are different in appearance and interactive behavior. 4CDONATIONS includes both a mobile app and a responsive website.

While they both do a great job of making donations easy, they do have their own vibes in terms of look and how users interact with them.

MOBILE APP:

MOBILE WEBSITE:

4cdonations mobile website second donate screen

TABLET WEBSITE:

4cdonations tablet website second donate screen

4cdonations tablet website success screen

DESKTOP SITE:

4cdonations desktop website success page

Design Details

•FULL BRIEF•

•HI-FI PROTOTYPE•

Future Iteration Ideas:

At 4CDONATIONS, the goal is to bridge the resource gap through community engagement, bringing together individuals, parents, and businesses. I aimed to craft a user-centric platform that makes the donation process easy while nurturing a sense of community and transparency. This approach boosts support for elementary school children’s creative growth.

Here are some exciting follow-up steps:

1

User Education & Outreach

Launch an email newsletter to keep users in the loop about platform changes and improvements.

Send app notifications to engage users with updates and tips on how to maximize their experience.

2

Creating a Fundraiser

Introduce a feature that allows users to set up fundraisers through their social circles.

This could significantly boost both monetary and supply donations, making it easier for schools to get the resources they need.

3

Teacher Dashboard

A dedicated dashboard for teachers to track monetary donations and materials.

Features like donation counters to visualize support.

The ability to add new projects easily.

Options for group messaging via email, text, or app notifications to keep donors informed and engaged.