replate

designing an intuitive onboarding process for a non-profit

Duration
10 weeks, Jan - May 2019

Team
Pamela Hu, Kenny Yeung,
Leanne Chan, Karen Chou

Methods

User Research, Ideation, Rapid Prototyping, Usability Testing

Overview

Through Berkeley Innovation, we reimagined an intuitive and easy sign-up flow for Replate’s recipients to request food donations. The streamlined platform will help to foster a greater sense of trust towards Replate as a middleman. For the project, I led the ideation and prototyping sprint and organized critique sessions for design iterations.

The Challenge

Replate challenged us to identify pain points in their recipient sign-up experience and reinvent a space for their recipient organizations (i.e. shelters, citizen assistance programs, and charities) to order food donations.

Project Overview

The Problem

No online form/ portal for NPOs to sign up and receive food or track their orders
No clear nor standardized sign-up flow for recipients. Organizations had to schedule pick-ups via the chat function, email, or phone call

Project Goal

Clear sign-up flow and easy-to-understand food delivery scheduling system for non-profit, food recipient organizations
Increase the number of recipient sign-ups through an intuitive flow and reduce the amount of surplus food from companies

Replate is a nonprofit technology that matches food donors with communities in need instantly. Since Jan 2016, Replate has fed over a million meals to people in need in the U.S.

Deliverables Preview

After working through user testing and receiving feedback from our client, we developed and refined deliverables for the recipient onboarding and order requesting experience. Highlighted below are the key screens.

Easy to follow sign-up form

Recipient portal scalable for bigger organizations

User Research

Competitive research
User observation

User interviews
Personas

Journey maps

Research synthesis

After getting our prompt, we drilled into the problems of the current sign-up flow and scheduling and assigned a research method to each of the three main questions.

1. How do other food donation organizations plan their sign-up flow?

2. What are the biggest pain points of the current sign-up flow?

3. What are potential clients most confused or worried about when it comes to a food donation service?

User Observation

We asked several possible recipients to walk us through the Replate website with the task of getting food donations for an event.

Competitive Analysis
We compared the user flow of competing food drives (e.g Copia, Meal Connect)

User Interviews

We conducted telephone and in-person interviews with local, non-profit, food recipients to gather thoughts on food donation platforms.

Resaerch Findings

From our research, we compiled all of our notes and observations in an affinity map to identify some key findings. Below are two of the top findings:

The majority of the organizations were unable to schedule food deliveries, or mistakenly signed up as donors.

The site had a donor sign-up flow that also involved a form. Many non-profit, food recipient users mistakenly created donor accounts and did not know how to schedule food deliveries (it involved knowing to click on the chat icon or calling).

More individualization and communication is desired.

Users really liked the phone call confirmation at the end. They felt a lot more secure in the delivery.

Synthesis & Insights

After our round of research, we found two main types of users appearing and we utilized journey maps to pinpoint high and low points of signing up:

1. Nonprofits focused on providing for those in need (e.g a soup kitchen)

2. Nonprofits focused on recreation (e.g dance collective)

We found that both user types shared a common high and low point:

We decided to focus on the above high and low points, feel free to explore the rest of the journey map. Click to zoom in!

Refined Design Question

HMW create a straightforward and informative sign-up and scheduling flow that would have food recipient users feel a sense of trust at the end?

We made a flow so we knew what screens to make, knew what potential actions our users can take, and get feedback from the client.

5dca6282dff8946b71b45761_replate_flow2_e

Once landing on the Replate homepage, the recipient will sign up and create their own portal.

After completing the signup process, the user will fill in a series of forms to request food delivery.

Low Fidelity Sketches

Based on our key insights and persona development, we came up with a series of initial concepts that helped us address the pain points for the recipient on-boarding process. The respective ideas address elements specifically for the ‘Recipient Sign Up’ and  ‘Food Delivery Request’ form.

We came up with two different form designs and decided on the one-page form since we also observed many users going back to check their previous answers before submission.

One-pager with different input sections

Carousel with separated bite-sized steps

We drafted different modes of food delivery request options with the intent to provide recipients with efficiency and specificity.

Giving the recipients more agency in their request and reimagining the power-dynamic of a conventional donation process.

Ideation

User flow

Pen-and-paper wireframes

Iterative Ideation

Iteration + User Testing

Digital prototyping (Figma)

Remote user testing

We conducted remote, unmoderated user tests through UserTesting.com in addition to some in-person testing with the interviewees from user research to find out what was intuitive and what parts we should clarify through design?

The sign-up and request forms are seen as clean. However, some users completed the form asking  "was that it?" and "was that correct?" – we needed to provide more descriptions and confirmations.

The dashboard displays multiple office locations of the nonprofits. Users highlight the intuitive and easy to use nature of the screen but thought that space seemed wasted.

The calendar was inspired by Google Calendar, which many users felt familiar with. The actions to create a new pickup were intuitive to them.

Impact and FAQ tabs are easy to understand. However, they also noted that the information could be placed in the dashboard.

After this round of user testing, we had a good sense of the changes we needed to make for increased clarity.

We needed to somehow indicate when an action is successfully done.
We would accomplish this by adding confirmation screens "Hurray your account was created!" and secondary confirmations (email or phone call confirmation).
Users preferred having more condensed info in the dashboard rather than tabs.
We thought there was a lot of information and that we needed to split it up into tabs. After testing, we found that condensing the information would give users a better overview of all the information.

High Fidelity Deliverables

Working with developers

Brand and tone

Towards the end, we had several meetings with their developers to talk about feasibility and what we needed to compile for the hand-off.

Link to a high-fidelity prototype!

5dbcb0b904f8b23e3d6bc092_ezgif.com-video

Below are some changed screens based on user testing insights and developer feedback alongside some explanations for those changes!

1. Grid view with more scalability for larger non-profits that have multiple office sites.

2. Replaced calendar with the simplified form-and-list as it was too complicated for Replate's product development timeline.

3. Confirmation pop-up for every account created and pick-up scheduled was added to help give a sense of completion.

4. We recognized that copy can help to lower the digital barrier. Subheaders are brief and followed by concise instructional phrases that help users understand the next step of the process.

5dca7a4b52043c67ff740c8b_06 Dashboard Ho

5dca7a72d358da3d9e0a9c03_08 Schedule (Mo

5dca709d475410cee98eb3e6_replate_hifi4.p

01 New Account Sign-Up

Intuitive onboarding flow

Returning Log-in

Recipient Sign-up Form

Sign-Up Completed

The updated one-page sign-up form is branded with blue to help users differentiate it from the donor’s form in green. The step-by-step approach also lowers the learning curve and adds to a sense of completion, allowing for users to easily check their responses at one glance.

02 Scalable Dashboard

Adding a new delivery location

New Office Form + Confirmation Dialogue

Dashboard Home

Dashboard Home [New Location Confirmed].

Grid-view of different office locations

03 Food Donation Request

Scheduling new delivery services

Delivery Request Form

Confirmation Dialogue

An additional food donation preference form allowing recipients to personalize their food selection and delivery schedule based on their needs and capacities. This gives recipients agency in their request – essentially reimagining the power-dynamic of a conventional donation process.

Innovation starts when you ask simple questions!

When we are prepared to challenge convention and ask "how could this be more intuitive?" a difference is made.

We knew we could never hope to address an entire food donation system.
However, we believe that sometimes posing simple interventions to the smallest of problems can make the biggest of differences, even just by simply making it easier to engage with!

Takeaways

My main focus for this project
The user testing and iteration process of the designs. By focusing on lowering the learning curve of the platform, I ensured that our design empower less tech-savvy users with a sense of completion and trust.

My biggest takeaways
Working with the developer's input earlier in the process and taking more consideration into the development process.

Metric of success
In a later follow-up, after the design was implemented, we were told that there was a significant increase in the number of recipient sign-ups and the design is constantly being modified. However, we would love to follow up on more specific KPIs such as "Growth in successful signups/ total NPOs?" and "% of 30-day active reorders?".

If given more time...

We would love to continue iterating this project and also explore ways to establish a long-term reliable partnership between Replate and its recipients.

Final Reflection

The Replate recipient portal was officially launched in July 2019. Our client loved our work and the form was a part of their site for a while! They have since iterated on the design.

Check out their current flow

Meet the Replate Team!

Though there was still a surplus of food to deliver, we were happy to see our design thriving in the wild and the Replate team continued to iterate on it.

It was a humbling experience getting thoughtful and detailed feedback from the designers, engineers, and product managers. We are also honored to help lower the digital divide for those in need!

Thanks for reading! Check out my other works.