Product Design

Second Life

Our Product

A website app that helps donors easily find charities that have full transparency of where their donations go.

The Goal

How can we make the clothing donation experience easy and transparent for the donor so that they can donate with confidence?

  • The product took a total of 5-weeks to complete.

  • The team consisted of:

    • 1 UX Designer

    • 1 Project Manager

    • 1 Developer

    • 2 Mentors (Project Mentor & Design Mentor)

  • Lead UX/UI Designer for end to end product design for the Second Life website app.

SecondLife - Winter 2021 Demo Day Project Pitch

The Problem

There is an overwhelming amount clothes that end up in landfills. There are 14 Million tonnes of clothing that are thrown away annually. Even when you donate your clothing, 84% of clothes end up in landfills. The biggest concern with clothing donors is the transparency between charity and donor and where their donation will end up.

“I don’t want to be called a sucker” [for donating blindly]”
“There are too many decisions to make when donating clothes”
“I prefer to give it to someone who can use it, rather than sell it”

Research Statistics

20 participants

out of 33 participants said it was very important the org is transparent with where their donations go

26 participants

out of 33 participants said it was very important I can easily make a clothing donation to the organization

14 participants

out of 33 participants said it was very important the organization is transparent with overhead and administration costs

Problem Statement

How can we make the clothing donation experience easy and transparent for the donor so that they can donate with confidence?

My Role

I was the sole designer on the project. I had the responsibility to design for real users and iterating based on feedback to solve their problems. We had 2-design sprints in a span of 5 weeks. Some of the design and research skills used during the project are listed below:

Design Skills

UI Design, Visual Design, Wireframes, Sketches, Lo-fi & Hi-fi Mockup, Interactive Prototype, Design Iterations

Research Skills

UI Design, Visual Design, Wireframes, Sketches, Lo-fi & Hi-fi Mockup, Interactive Prototype, Design Iterations

The User

We conducted 15 interviews and a questionnaire with 33 participants to gain user research to develop 1 persona and pull insights to better understand our user and user’s needs.

User Persona

This is Angela. She is 31 year old teacher and lives in Toronto, Ontario. Click below to discover her values, motivations and frustrations:

    • Helping others who need help

    • I have more than enough so I should give back

    • Everyone should support each other (Social support)

    • Helping others is energizing and feels good

    • I want to give to causes I believe in (pet rescue, women’s shelters)

    • I want to create impact with my donations (leverage)

    • I don’t know if my money/clothing is going to those who need it

    • How much is the administration taking?

    • I don’t have the time to research organizations to donate too

    • There are so many organizations out there, who should I donate too

    • What can I give?

User Journey Map

A user journey map was conducted to better understand the Lena’s journey in the clothing donation process. We mapped out from the point of deciding to donate to a charity, to the point where the donation has been dropped off or picked up. A majority of the pain points fell within the research stage.

Key Opportunities

We decided to explore opportunities within the research stage and focus our MVP towards that. Some key opportunities included:

  • Filtering options to allow users to choose charities based on their interests

  • Providing core Information from the charity 

  • Reviews and ratings from past donors to share their experiences

  • Allow users to create lists to make it easier to track their top charities

Ideation

As a team, we went through an ideation stage and came up with a few great ideas. Some of the ideas included:

  • Conduct a survey o help find a charity aligned with their values and beliefs

  • A location based search

  • A categories first-based solution

  • A search based on photos

Some of these ideas were not feasible within the timeframe we had but definitely something we would like to include in future iterations.

The MVP

For our MVP we wanted to focus on two key opportunities that if solved would provide the greatest value to the donor. These two opportunities were: 

  1. Filtering options to narrow down organizations to simplify the selection process

  2. Providing primary and secondary information to ensure transparency

Lo-fi Wireframes

We decided to focus on features of the product that will align with the goals of the primary user. When looking at other competitors and similar websites, we wanted the overall look to be simple, direct and give users the ability to make informed decisions when choosing a charity. The content and the amount of information was key to emphasize transparency with the user.

Visual Design & Branding

The UI design is modern, simple and easy to read. When designing the website, we kept in mind the AODA guidelines when choosing the colour palette.

Mood Board

I created a mood board to get an overall look and feel of the web app. The mood board was created using Figma. I took inspiration from the colours, fonts, and design elements.

Style Guide

The Second Life branding consists of a tone that is conversational, light hearted, informative and approachable. The tone of the brand helped to develop the colour palette, typography and imagery.

Colour Palette

Primary Colour

Green Blue
HEX #2FAAB1
RGB 47, 170, 177

Secondary Colours

Deep Blue
HEX #0F3F66
RGB 15, 63, 102

Bold Yellow
HEX #F4B528
RGB 244, 181, 40

Dark Grey
HEX #4B4B4B
RGB 75, 75, 75

Text Colour

Fonts

Designing a New Logo

When designing a new logo, I started with brainstorming ideas on what our product name would be, what our product purpose is and how that can be iterated through a simple, modern logo. Here are a few sketches during the early development of the branding stage.

I used Adobe Illustrator after a logo direction was chosen at the pen and paper stage. Below is the final logo.

Usability Testing

We completed usability tests with a total of 5 participants. During the session, we asked the participants to complete a series of tasks and additional questions on the overall UI and design of the web app. The common tasks included:

  • Find the charity, Animal Outreach

  • Filter your search by location within downtown Toronto

  • Find out what items you can donate to Animal Outreach


The Results

A summary of the results are below:

  • Overall, users liked out layout because of its simplicity & clean design

  • Include a more extensive menu (before going into the categories in “trusted charities”)

  • Ensure that is it clear - this website is for good/clothing donations NOT money donations

  • Had difficulty seeing the button on the homepage

  • Suggestion to include a picture gallery to increase empathy with the users and encourage to take action

Hi-fi Prototypes

I used Figma to create the hi-fi prototypes and interactive prototypes. For the handoff to the Developer, I gave her the necessary materials needed to create the final product. That included my Figma files, images/illustrations, and icons.

The Final Product

Our developer took my designs and developed the actual product. We conducted a design Q&A to ensure all the design and UI was correctly applied. The tech stack used by the developer was MongoDB, Express, React and Node.

Validation

Our usability test results show that…. 

  • 85% of users felt assured they knew where their donations were going 

  • More than 70% of users said they be disappointed if Second Life didn’t exist

  • And an Net Promoter Score of 50 (the standard is anything above 30 is good)

What’s Next?

For our next steps, as a team we want to continue working and developing on the product. We see a lot of potential for this product to grow and be an asset tool for donors. Some of the opportunities we want to explore for our next steps are:

  • Create a portal for charities to add their own information for future donors

  • Create a portal for donors to create profiles and customize their own lists

  • Implement a ratings and reviews system for donors

  • Ability to find the closest center to them based on their location

Lessons Learned

This opportunity has enabled me to learn so so many new skills. I learned that collaboration and research is key. Every decision and feature was decided as a team and research was supported by it. I learned that when we second guess ourselves, we should look to the user research and analyze how that can help with our decision making process.