SUPPLY THE LOVE
CONNECTING CLASSROOMS WITH LOCAL DONORS
Supply the Love is a non-profit company dedicated to providing a platform for classrooms to post supplies in need & connect them with generous community donors. This project was in conjunction with the web development class and UX immersive class through General Assembly
Classrooms can view available donation materials from local community and businesses
Classrooms can post supply needs
Community members and businesses can view classroom needs and donate directly
Community businesses can post donations being offered
Ability to coordinate delivery and pickup
Team: 3 Designers, 3 Web Developers
My Role: User research, customer journey mapping, information architecture, user flows, wireframing, testing.
Tools: Slack, Pen and Paper, Google Drive, Excel, Typeform, Sketch, Invision App, Adobe Illustrator, lots of Post-it notes
RESEARCH & DISCOVERY
UX Research is essential. We started our research and discovery process by putting together a survey for both teachers and donors with questions that targeted our initial assumptions but also allowed them to tell us their pain points and experience with receiving and providing donations. Around 30 reachers responded and 5-6 donors. This was enough to tell us the following:
Survey Insights: Teachers
73% of classrooms are in need of supplies
50% preferred cash
Volunteers often needed
Majority need donations anytime of year
73% of donations go to teachers, 38% to PTA
Budgets from administration don’t last
More technology needed
Half of donations from parents, other half from PTA
Only 4% from local businesses
Survey Insights: Donors
Finance Dept. keeps track of items that could be donated to classrooms
Willing to donate if they received a tax write-off
Want to know the impact donation will have on the classroom
Recognition for generosity
We researched competitive sites and reviewed them for their strengths and weaknesses. We used this information to determine what features we could include into our product and discover voids that are currently not being fulfilled in the market.
USER GOALS & OBJECTIVES
Customer Journey Map
I order to create a better understanding of our users, their pain points, and emotions, we collaborated to create a Journey Experience Map. This strategic map helped us visually capture and communicate the user’s process and their needs, perceptions, and interactions. This led us to discover a few additional ideas to include, such as a notification affirming the donation and how the communication works after a donation is made.
Developing persona’s help us tell the story from the users perspective, developing empathy while keeping a users needs in mind.
We created various iterations of affinity maps to help us understand the following:
Understanding the Mental Models of Users
Start to define Onboarding process
Identifying crucial and MVP user flows
Defining the Information Architecture
Although the content will vary depending on the user, we determined it was possible to have similar profile pages for donors and classrooms. This made the job for developers easier and provided a consistent look across multiple pages. The viewable information would vary based on permission levels .
The chart helped define what information is shown based on the user.
Below are some of my notes that further explored what information is needed and where.
In order to quickly develop wireframe ideas, we hand sketched various layouts before moving into Sketch to develop them further.
A few of my sketches for the profile pages
Using the bootstrap framework so that our site could be fully responsive, I started designing our wireframes on a desktop layout to make sure we had all the information we wanted to show on the profile pages
Donor profile page wireframe
To aid in the communication with the Web Development team, we laid out several pages on mobile so the fully understood how it responses to mobile.
Searching for a classroom and making a donation
INTERACTIVE MOCKUP & TESTING
One of the designers developed a high fidelity version of the wireframes that we added to Invsion as a working prototype
We tested the interactive mockup on a handful of users and demonstrated the mockup to the web development team. We provided them with annotative notes to assist their efforts in building the working prototype.