PROJECT OVERVIEW

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

Target objectives

 

  • 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

Timeline:  2-weeks

RESEARCH & DISCOVERY

Typeform Survey

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

Competitive Analysis

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. 

User Personas

Developing persona’s help us tell the story from the users perspective, developing empathy while keeping a users needs in mind. 

IDEATION

Affinity Mapping

 

We created various iterations of affinity maps to help us understand the following:

  • Understanding the Mental Models of Users

  • Taxonomy 

  • Start to define Onboarding process

  • Identifying crucial and MVP user flows

  • Defining the Information Architecture

Permission Levels

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.

Taxonomy Brainstorming

Below are some of my notes that further explored what information is needed and where.

WIREFRAMING

Concept Sketching

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

Wireframe Iterations

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

Mobile design

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.

© 2019 by KevinAtherton.com