Drop Five
PROJECT OVERVIEW
Drop Five is a non-cash donation service created to help New Yorkers make fast and easy donations. It offers a pickup service in collaboration with charities across the city for a more efficient donation process.
About Drop Five
As the UX/UI designer, I was responsible for the full design process. I interviewed New Yorkers, mapped the IAs, created interactive prototypes, conducted usability tests, and finalized the designs.
My Role
Final Interactive Prototype
Screener Survey, Interviews, Affinity Mapping, Empathy Mapping, User Personas, Sitemap, User Flows, Usability Testing, Sketches, Wireframes, Logo Guidelines, Brand Identity, Style Guide, Prototypes, Animations, Interaction Designs, Usability Testing, Presentation
Deliverables
Tools
Figma, Figjam, Miro
The Challenge
When people are moving or cleaning their homes, they often find items that they do not need anymore. They may want to donate these items but may not have an accessible or convenient way to do so. As a result, items that are still in good condition can end up in the trash.
The Problem
•Identifying the most important user needs and wants
•Narrowing down which problems the app will solve
•Creating a simple and functional interface for users
Design Challenges
User Research
In order to learn about the real experiences people have had with donating items, I recruited 5 participants for user interviews. Here, I focused on asking open-ended questions about their experiences to learn as much as possible about our users and validate my understanding of them.
Interviews
1. Why do people donate?
2. What services do people look at when they need to make donations?
3. What are the obstacles to making donations more frequently?
4. Why do people want to make donations?
Interview Goals
I interviewed New Yorkers aged 18-35 who use web services regularly and want to make donations.
Who?
After each interview, I created an affinity map by writing down notable insights. From these notes, I created an affinity map that highlighted a common pattern.
Synthesize Insights
Key Insights
People donate to clear out space, help those in need, and preserve the environment.
It is challenging to find donation services that are close by or organized.
People do not want to spend too much money traveling to a donation site.
From the key insights and observations I gathered, I created empathy maps to visualize the insights and observations I have gathered. Empathy mapping allows me to better understand users’ goals, feelings, thoughts, and behavior.
Empathy Map
I was then able to create two user personas to guide me through my design process–Cathy and Ben. Cathy represents users who often donate for multiple reasons. Ben represents busy users who are only willing to donate through an effortless method.
User Personas
The Solution
From the insights gathered came the questions:
How might we improve the donation process for New Yorkers?
How might we motivate people to donate more?
How might we optimize donation locations across New York?
How might we help users locate donation centers nearest to them?
How might we help users feel good about donating?
How Might We…?
A donation service in collaboration with charities across the city to help New Yorkers make fast and easy donations!
The Solution
User Stories
After writing 25 unique user stories and the tasks/outcomes associated with each, I ranked each story by priority. The stories with no.1 priority are:
As a New Yorker, I want to donate unwanted clothes and furniture so that I will have more space at home.
As a New Yorker, I want to donate unwanted clothes and furniture so that I will have fewer belongings when I move.
As a user I want to...so that
I decided that users care most about efficiency and conveniency. Therefore, these are the factors I need to focus on in my design.
Findings
Information Architecture
With the solution in mind, I created a sitemap that is easy to navigate and identified key red routes.
Sitemap
User Flows
Next, I created a user flow to dive even deeper and get a better understanding of the overall journey my users would be taking throughout the app. I wanted to better empathize with the scenario they may be in and the different paths they might take to complete the key tasks I identified.
Sketches
Using my understanding of the user, our goals, the architecture, and the user’s interaction with the app, I made informed decisions on designing Drop Five’s screens by sketching low-fidelity wireframes.
Making sketches
Wireframes
Now that I had sketched out my ideas, I wanted to test my decisions and ensure that the app's structure and flow are intuitive for our users. Therefore, I wanted to first make sure that the design was functional by creating the wireframes on Figma from my sketches to provide an outline for my prototype. I further grouped my wireframes by the significant flows I identified.
Desktop Wireframes
Building a Style Guide
Colors
Typography
Prototypes Round 1
Desktop Prototypes
User Flow 1: Finding a Donation Center Near Users
User Flow 2: Logging Into Your Account
User Flow 3: Selecting a Donation Center and Making a Donation
Usability Tests
After creating a research plan and test script, I conducted 5 usability tests with users who fit my website’s target demographics. By testing three different tasks, I was able to collect data across platforms regarding unintended task sequences or unclear icons.
Research Plan & Test Scripts
Assuming you are a first-time user interested in this service, create an account.
Now, enter your address to find donation locations near you.
Finally, select a location and make a donation.
Tasks
Usability Issues by Priority
I ranked each issue by priority and created solutions for each.
There is no “return to home” button, so users were stuck on the page after creating an account.
Critical Issues
Solution
I added a home button on every page so users could always return to the starting page.
After users add donation items to their cart, it is hard to find the button that takes them to view the items.
Major Issues
I added a bag symbol next to the original “view my donations” button so users can find it easier.
Solution
Minor Issues
One user suggested that I could change the background color for better contrast.
Solution
I added a white background in addition to the original background for improved visibility.
Final Interactive Prototype
After learning about the flaws of my original design, I revised and fixed all the problems found in my prototype. I further added more UI designs to make the prototype more developed.
Reflection
Drop Five was my first project as a UX/UI designer. During this process, I went from being an inexperienced designer to conducting interviews, creating wireframes, running usability tests, and designing an interactive prototype.
My biggest takeaway is the importance of research. In order to have a useful product, designers need to understand the users’ emotions and needs first. I conducted primary and secondary research for this project to form user personas. From that, I created a product that fit their needs.
One main challenge I faced during this process was learning to use the different prototyping functions Figma provided. However, from scrolling through the Figma website to watching YouTube tutorials, I learned how to build animations that made my prototype come to life. Although there are more functions I would like to have, I am pleased with the ones that I have mastered for now. I now understand the full scope of a design process and all the crucial steps it includes.