BeneSwappe

Generating value from underutilized items

BeneSwappe is an online clothing exchange service where groups of friends, coworkers, or classmates can come together to easily swap clothes they don't want anymore. Each year, more than 15 million tons of textile are wasted in the US alone. People feel too busy to try to find another owner for their unwanted clothing and will toss it out. While donating is a good option, very few donations actually make it into the hands of someone in need. This is where BeneSwappe comes in.

Overview

Solution

Role

Designer on a team with 2 business owners

Details

Passion Project, 1 month design

Tools used

Sketch, Marvel, Principle, Illustrator, Pencil & Paper

Problem

How might we generate value from unwanted items

Users

Anyone who is cleaning out their closets

How it works

For people who are too busy to find new owners for unwanted clothes, BeneSwappe is the solution. After cleaning their closets, users can upload unwanted items that they think a friend might want. Their friends can then pick and choose which items they want from a respository of unwanted clothes. Having a centralized location where you can list unwanted items to people you know increases the chance that the item will land in the hands of someone who wants it. Below are some features:

View your friend's closets!

Users can browse their friend's closets to see if there are any items they want to request.

Request items from your friends!

After adding items to their carts, users can easily request items from their friends to initiate the swap.

Upload your unwanted items easily!

After sorting through their closets, users can easily upload unwanted items onto the site.

You can use it on any device!

BeneSwappe is designed to be responsive. Because swapping an item is not a day-to-day task, I decided against creating a mobile app.

High-Level Overview


Understanding the user

Research

To understand user needs, I conducted 8 interviews with people who have done clothing swaps before, or those who have cleaned their closets recently. I also observed users who were in the process of cleaning their closets. I found a repeated pattern in responses. Most users responded along the lines of:

"Sometimes I have to ask multiple friends before I find someone who wants my clothes."

"I don't always have the time to find someone who wants my clothes. I'll just throw it out or put it in donation."

"My friends and I will try to find the time to all come together to swap. It's easier to have everyone in the same place so we can see everyone else's clothes at the same time."


Based on my interviews and observations, I conducted a task analysis of how a user cleans their closet and sort through their clothing. This helped me identify user pain points and areas where value was lost.

Analyzing the competitive landscape

Because clothing exchange apps and sites do exist, I wanted to scope out the competitive landscape before starting to think about design. I looked at companies that do consignment and some form of swapping.


From the companies that I looked at, these sites that offer the "free swap" functionality have trouble retaining traffic because the degrees of separation is too high. In interviews, I showed participants some of these sites and ask whether they would use it. A majority of responses answered along the lines of:

"I would not use it because I feel uncomfortable getting free items from a stranger."


Example of companies I looked at

Creating Personas

Based on my interview analysis, I created 2 personas, Tania and Alex, based off of real quotes that my interviewees had said.

While they lead different lives, Tania and Alex have one common overarching goal: to be able to easily swap clothes with their friends.

Process

Brainstorming

With my team, we used the personas and the research insights to brainstorm several ideas together. I sketched out some of the ones we all liked.

Mobile App Idea: an app that lets users see available clothing for swapping

We decided against a mobile app because swapping an item as not a day-to-day activity and so the user does not have to download another app onto their phones.

Kiosk Idea: a locker room where users can place their unwanted items and others can view what is available (similar to Amazon Lockers)

We decided against this idea due to feasibility and practicality. Users would have to physically come to a centralized location to retrieve their item. This could potentially prove to be a hassle.

Responsive Website Idea: a website that users can access on any device to view available items to swap

We decided on this idea because it is feasible and gives user the convenience of accessing the site from anywhere.

Design Guidelines

Based on my research insights, we decided to create a place where groups of friends, coworkers, or classmates can come together to swap clothes. Below are some features that I came up with to include:

Users should be able to access from any device (desktop or mobile)

Because clothes swapping is not a daily activity, we decided against a mobile app. Instead, we decided to create a responsive website, giving users the option to use the site on their laptops or their phones.

Users should be able to add their unwanted clothes to a central repository

Allowing groups of people to add their unwanted clothing to a centralized location allows other members of the group to browse items asynchronously, making swapping more efficient.

Users should be able to see items that other members have uploaded

Having a location where you can list unwanted items increases the chance that the item will land in the hands of someone who wants it, thus generating value that would have otherwise been lost.

Users should only be able to swap within the group that they are part of

Making the website group-based allows users to feel more comfortable swapping clothes rather than with strangers. While not everyone witin the group has to know everyone else, each person has to know at least one other person to be invited. This decreases the degree of separation.

How would someone use it?

Using the design guidelines, I created the ideal user flow for someone like Tania and Alex would go through interacting with BeneSwappe. The two main tasks include: adding an item and requesting an item.

Tania is very busy and doesn't have the time to try to guess which friend wants her clothes. Using BeneSwappe, Tania can upload her clothes at once and any of her friends can view it from the site.

Alex and her friends find it hard to coordinate swaps in person. On BeneSwappe, Alex and her friends can browse all the clothes available from each other, so they don't have to coordinate to be at the same place at the same time.

Before I started to design the UI, I also created an application map to lay out the major functionalities for the site.

Sketching screens on paper

I started thinking about the design by sketching screens on paper. This allowed me to generate multiple variations for different features on the site. To get quick feedback, I would ask classmates and friends for their opinions before creating the ideas in Sketch. Click the images to view more detail.

Some sketches I drew while brainstorming

Design

High Fidelity Designs

I started designing the site mobile first. Because of the screen constraint, this helped me determine what were the most important functionalities to include and prioritize. Throughout my design process, I consistently asked users for their feedback. When I would have a few screens done, I would put them into Marvel to get quick responses.


I created comps for 3 screen sizes: mobile, tablet, and desktop, using Sketch and Autolayout (Sketch plugin that made it quick and easy to adjust screens to different widths). I created a clickable prototype using Marvel to test with users, and motion prototypes using Principle to demonstrate transitions and microinteractions. There are 4 main actions a user would take:

1 - Browsing items
2 - Adding an item and initiating a swap
3 - Uploading an item
4 - Managing requests

1 - Browsing items

The first screen a user sees is the group page that lets them browse all available items in 2 ways: by friend's closet or by applying filters. Users can browse items on their own time.

Browsing items by closet

I decided to add the ability to sort items by closet because users will usually add a group of clothing at once. Once added, they can let their friends know that new items have been added. Group members can then browse for items sorted by that user's closet, making search efficient.

Applying filters to all items

Users can browse all items available and add a filter by type, size, or color. This is a common functionality that other e-commerce sites have, so having this pattern allows users an easier time finding items they want.

2 - Adding an item and initiating a swap

Users can easily initiate a swap from the site. Users can request items at their own leisure and don't have to be in the same place to swap items, removing any coordination issues.

Add items to bag

Users can add items to their bag whenever they identify an item that they want. Microinteractions were added here, such as the shopping bag icon expanding slightly and a notification appearing, so that the user knows an item was added.

Initiate a swap

Users can easily request items from their friends to initiate the swap. This notifies the owner that someone has requested an item. The request process is simple and has a loading animation so that the user is walked through the process.

3 - Uploading your item

Users can easily add their items to their closet to show their group members. Users don't have to guess which friend wants their piece of clothing anymore. Once uploaded, all other group members can see what is available.

Adding an item to your closet

Users can upload items they want to add from their individual page. Creating a profile page allows the user to clearly see what items they currently have listed. From this page, they can add new items by inputting the appropriate characteristics. This allows for the filtering option.

4 - Managing Requests

I created the Request page so that users can better manage their sent and received requests. They can see the items that the requestor has selected and communicate with them about the request on that page.

Managing requests

Users manage their requests within the BeneSwappe site. Each request is on its own page so that users can see all pertinent information to a single request: 1) items requested, 2) communication, and 3) status.

Interface Designs

These are the comps I made for desktop, tablet, and mobile. Click on the image to view the details of each screen!

Interactive Prototype

Throughout the process, I got feedback from users by putting screens into Marvel and having them click through to make sure the flow made sense. Here is a clickable prototype for the screen flows.

Evaluation

I conducted 5 feedback sessions. I gave participants 4 tasks to go through on a mobile prototype and asked them to think out loud during this process. Then I conducted a follow-up interview session. Tasks included:

  1. View the items in Alice's closet
  2. Add a blue denim shirt to your bag
  3. Request the items in your bag
  4. Send a message to Alice about your requested items

Overal feedback was positive. Users found the site easy to navigate. Some responses included:

Users liked that they can browse clothes by people's closets as some users would know which friend's style would fit theirs better.

Further exploration can be done here in terms of matching different styles to user preferences.

Users found the filters for items intuitive.

This matched my original hypothesis that having similar e-commerce patterns (e.g., filtering by size) would make finding items easy.

Users were confused by the Messages tab.

To them, requests and messages should be associated together. Having separated tabs created a disconnect between the two. As a result, I removed the messages functionality. Click the images below to see the original screens.

Choosing color palette

Black and white were primarily used to create an overall clean design as images of items would already be too colorful. A shade of blue and a shade of yellow were used to highlight actions on each page.

Reflection

My thoughts

This project was based off another a nonprofit organization I started when I was in undergrad called BeneShoppe. We collected unwanted items from students and resold them on an online thrift store, then donating all profits to a charity.

Now, 3 years later, coming up with the idea for BeneSwappe was really exciting. The most striking part was seeing the difference in my design work. Back in undergrad, I knew very little of design but I still made the logo and site anyways. Comparing the two shows how much I've grown and how much I can keep growing.


One last quick note. I used this project as an opportunity to learn about motion design. Every prototype I created, I made sure to implement motion principles effectively. It is tough but I really enjoy it! I learned that sometimes storyboarding out the animation goes a long way (thank you Disney animation for teaching me that!).

Note: all images used in the designs are stock images, images found on Pinterest linked on my board, or images from clothing retailers (AE, shein, JCrew, etc.). The one used for Alice is found here and the one for Emily here. I do not own any of the images used. They are only used to demonstrate a concept.