ProDUCT Design

donateNYC Web Application

An enterprise level web portal for NYC local community groups, business and government agencies easily donate or find used goods and unwanted food products

Role
User Research, Interaction, Visual design, Prototyping & Testing
Date
2018 - 2019
Overview

About the donateNYC

donateNYC provides vital support for New York City’s reuse community, helping nonprofit organizations and local reuse businesses increase and promote their reuse efforts. By donating and reusing goods instead of discarding them, New Yorkers can greatly reduce waste, conserve energy and resources, save money, and help provide jobs and human services for New Yorkers in need. donateNYC is an essential part of NYC’s 0X30 initiative, helping New Yorkers reach the goal of sending zero waste to landfills by 2030.

THE MISSION

Create a donateNYC food and goods portal, a digital tool connecting businesses with excess edible food to organizations throughout NYC

Key Feature 1

Directory Map

An interactive map shows all vendors lists and locations in one place to navigate faster. Users can filter the information based on the location, donation type, and donation categories to find the right vender quicker and easier.

Key Feature 2

Food Donation Matching Notifications

A food matching process between donors and recipients to increase food donation chances. A countdown timer is added to ensure that all 25 recipients on the list have enough time to communicate with the donor and to accept/decline the food listings.

Key Feature 3

Multi-Platform Integrated Messaging System

An integrated messaging system that allows donors and recipients to correspond through the system.  The messaging platform that streamlines or mirrors user communications to ensure quality service and accurate transaction/tonnage data.

Key Feature 4

Exchanging Listing Cards

A thumbnail of material exchange listing cards shows each listings' title, status and deadline.

Key Feature 5

Scheduling System

Open windows of availability for pick-up/ delivery and donation organization info to easily match the food donation based on the two parties preference such us the types of food they need/have.

ChalLenge

How might we enhance the usability to allow multiple users to use new enterprise accounts to post and respond to donations?

QUICK PEEK TO THE SOLUTIONs

Improve the Enterprise Account Registration Process

Solution 1

Two-Step Registration

In order to encourage the business to become an active user, two-steps sign up was added to the registration process. The first-step signup form is to get the necessary info of organization details. The second-step of first-time login form is to get the food donation matching criteria information.

Solution 2

Enterprise Level Account Management

Each business entity will be able to have multiple branches to organize different locations and users. Managers can assign many sites to staffs within the same business account to getting notifications of donations.

Give Goods Find Goods Do Goods

Design Process

Thinking in Products, not only in Features

Throughout the whole year of developing our platform, we followed the User-Centered Design (UCD)process to make sure that we not only thinking in features but also users to build the right products. We did user research, brainstorming, designing multiple solutions, and delivering high-fidelity interactive prototypes for developers to meet the client’s requirement.

Research

Understanding the donateNYC scope

I partnered with 2 designers and 1 product manager to explore how the customers were setting up the product. We conducted interviews and secondary research to understand the current food and goods related organization in NYC and how do they work. From the user interview, we realize there are few issues of registration for the previous version. I was responsible for registration for both UX and visual design. From the stack holder and user interviews, I found out there are several issues of the existing registration process.

Insights Gains from the Research

01
Users data was not clean

There were many duplications data such as locations or company information.  For the city government side, data looks messy and it is not easy for them to organize.

02
One business had only one user account

All members of staff shared one login account. For an enterprise level business with many store locations, it wasn't easy for staff members to manage stores they weren't familiar with.

03
The sign-up form was too long

We lost users in the registration process because there are too many information need to fill in.

Ideation

Brainstormed the possible UX for Improving the Enterprise Account Registration Process

To improve the enterprise account registration and solve the problems we found from the user research, the first thing I tried to do is to identify the target users and also which key features they would be using.

Identify Target Users
Identify Key Features

Finalize the User Types

There are six key stakeholders in NYC associated with current and possible future rescue, donation and distribution efforts: donors, food rescue organizations, facilitators, recipient agencies, associations, and government agencies.  As the product needed to scale up to handle billions of donations of goods and foods, we simplified the enterprise level donation platform. Based on the functions for the above six users types, we decided to group it into three different types: donor, recipient and government agencies.

Design Direction

Design Decision  #1 - Two-Step Sign Up

For the first step of the sign up form, users only need to fill in the necessary information for the admin to approve it. Simplify the registration flow so that we can keep more users to sign up and get to the final steps.

Enterprise Account Registration Flow

Brainstorming about the flow
Iterating about the flow

Wireframe

First-step - Sign Up
Second-step - First Time Login

Prototype

After knowing the user flow and the lo-fi design, I moved to the visual design based on the design library I created and also worked on the responsive UI. Prototype Link:  Sign Up  First Time Login

First Step - Sign Up
Manager Sign Up
Staff Sign Up
Second Step - First time Login In
Vendor Info Data Fill In
Food Preference Data Fill In

Design Decision  #2 - Enterprise Account Management

SiteMAP

Setting up Information Architecture

DEFINING PATTERNS

Design Style Guide

Takeaways

Overall Impact

I designed the business requirements from the beginning of conceptualizing to the end of the visual designs for desktop, tablet and mobile versions. The complicated structure and the intensive process made it an excellent experience for me. I faced many challenges such as how to build a product, how to communicate with the development team and how to be a good liaison between developers and the product team.  One of the biggest challenges of the project was to understand the business requirement. This was a  government project for business products with a different conceptual model with regular donation platforms.  I was able to leverage research and user journey mapping to understand it and successfully revamped the project, even when the tasks became more and more complicated. I believe a professional product designer should not just try to solve problems but should also take into account the users' perspectives.