Dropxie App & Website

The Product
Dropxie is an app and website focused on helping people find donation drop boxes for clothing near them.

Project Duration
October 2021 - November 2021

The Problem
Finding donation drop boxes near a location has become a hassle as there aren’t any easy-to-use apps or websites listing them.

The Goal
Help visitors easily find donation drop boxes near them by offering an efficient user experience they can trust.

My Role
UX designer of the Dropxie app and website from conception to delivery.

My Responsibilities
Creating surveys, finding target users, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, building a design system, and iterating on designs.

Understanding the user

During my research, users agreed that finding donation drop boxes could become a hassle when trying to donate their clothes. Even though many charity organizations have donation drop boxes near their locations, such as their parking lots, not all of them do. Users also said that an app would be useful, yet most of them would rather go to a website to find donation drop boxes.

Persona 1: Problem Statement

Lucia is a busy mom and school teacher who needs to donate clothes in a fast and easy way because she wants to help the needy while also using her schedule effectively.

Frustrations

• Can’t find donation drop boxes.

• Can’t waste time looking for donation drop boxes.

• Forgetting to have a bag when depositing clothes.

Goals

• Easy way to donate clothes.

• Use technology to find donation drop boxes.

• Make sure these drop boxes are from reliable charity organizations.

Persona 2: Problem Statement

Bruce is a print shop owner who needs to donate clothes near his store because he wants to help the needy while also running a business.

Goals

• Help those in need

• Find donation drop boxes fast

• Suggest where donation drop boxes are located

Frustrations

• Hates downloading apps for one purpose

• Has enough apps on his phone

• Driving around to find donation drop boxes

Competitive Audit

Our audit showed many missing opportunities from various competitors as well as improvements needed when it came to website navigation and organization.

Ideation

I did a crazy 8’s exercise to come up with improvements based on the findings from the competitive audit. My focus was showing a donation drop box search field by location as soon as users visit the homepage.

Starting the design

Digital wireframes

After ideating on paper wireframes, I created digital wireframes for the Dropxie app. These designs focus on helping users find a donation drop box as the main feature.

Low-fidelity prototype

My low-fidelity prototype focused on users searching for a donation drop box near them, selecting one, and leaving a review about their experience with the drop box chosen.

Usability Study

Parameters

Study type: Moderated

Participants: 5

Location: Remote

Length: 10 minutes

Findings

1. Location: Users were confused about the two options for submitting a location to find a donation drop box. Highlighting one option will make it easier for users to take action.

2. Star-rated Reviews: Having an option for users to leave a star rating for a donation drop box would make it more visual for other users to understand when reading these reviews.

3. Review Anonymously: Not all users want to share their name when leaving a review, thus having the option to submit one anonymously would be a good option.

Refining the design

Mockups

Based on the insights from the usability study, I applied the design change to focus on having users enter their zip codes more prominently. The option to use the device’s location was kept but shown less prominent on the screen.

Additional design changes were made in the review screen adding the option to submit a star rating and to add a review anonymously.

Additional mockups

Design system

A design system was constructed to facilitate the creation of high-fidelity prototypes using different variants depending on the user interaction.

High-fidelity prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype. It includes the changes gathered in the usability study.

Accessibility considerations

1. The contrast was checked in different elements to be readable.

2. I used headings with different-sized text and fonts for a clear visual hierarchy.

Responsive design

Sitemap

With the designs of the app ready, I started working on the responsive website. The sitemap focuses on having a consistent user experience with the website and app.

Designs

I designed different screen variations for the website including mobile, tablet, and desktop. Each of them is modified to fit the users’ needs.

In Action

Going forward

Impact: The impact of my designs will increase clothing donations as users will have a smooth and efficient way to find donation drop boxes. These designs and features could change the donation process as it currently needs improvements.

What I learned: Through user research, I better understood what the product needs to be effective. A product like Dropxie would increase clothing donations throughout the country.

Next steps

1. Conduct additional usability studies to determine more areas of need - especially when requesting a donation drop box.

2. Compare the site features to other competitors and analyze areas of improvement.

3. Create additional versions with color variations and accessibility options.