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.
.png)
.png)
.png)
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
![06.2.2 Dashboard Home [Add new loc].jpg](https://static.wixstatic.com/media/74d2ef_1891eee41e6046d092c4675c31e94cfb~mv2.jpg/v1/fill/w_375,h_203,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/06_2_2%20Dashboard%20Home%20%5BAdd%20new%20loc%5D.jpg)
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.
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?
.png)
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.
.png)
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.
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.
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
![09 Dashboard Home Hover [New User].png](https://static.wixstatic.com/media/74d2ef_01178c8d48c0410a900a878a435810cf~mv2.png/v1/fill/w_297,h_162,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/09%20Dashboard%20Home%20Hover%20%5BNew%20User%5D.png)
![08 Dashboard Home [New User] (1).png](https://static.wixstatic.com/media/74d2ef_15415d3c17094c2c929191f076fbf42d~mv2.png/v1/fill/w_278,h_151,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/08%20Dashboard%20Home%20%5BNew%20User%5D%20(1).png)
![Dashboard Home [New Location Confirmed].](https://static.wixstatic.com/media/74d2ef_d830d0fb7d75470893858dbca0f1f5d4~mv2.png/v1/fill/w_279,h_151,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Dashboard%20Home%20%5BNew%20Location%20Confirmed%5D_.png)
Grid-view of different office locations
![08 Dashboard Home [New User].png](https://static.wixstatic.com/media/74d2ef_46d5d79bc26b42f48bb3f9e2150d5236~mv2.png/v1/fill/w_278,h_151,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/08%20Dashboard%20Home%20%5BNew%20User%5D.png)
03
Food Donation Request
Scheduling new delivery services
Delivery Request Form
![Schedule (Week) [New User] (1).png](https://static.wixstatic.com/media/74d2ef_e2e8cee65b2a4403b0fb2f5784d8662f~mv2.png/v1/fill/w_422,h_229,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Schedule%20(Week)%20%5BNew%20User%5D%20(1).png)
Confirmation Dialogue
%20(4).png)
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.
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!