Project Overview
Meals on Wheels serves Waco's most vulnerable residents—starving seniors. These people struggle to cook for themselves because they suffer from little-to-no mobility.
With the help of volunteers, the nonprofit delivers hundreds of hot meals to these at-risk seniors every week.
But Meals on Wheels Waco has a waitlist due to their lack of volunteers and funds. And the longer the waitlist, the more seniors go hungry waiting for assistance.
My design team and I voluntarily challenged ourselves to help Meals on Wheels Waco "Wipe Out the Waitlist" by increasing volunteer conversion rates.
Tools
MY TEAM
TIME
Figma, Miro, Maze, Trello & Google Drive
5 Team Members
3 Weeks
What I Contributed
LEADERSHIP
- Lead mobile-first design
- Taught teammates how to use Figma
- Oversaw the completion of tablet and desktop versions
- Led team through I Like I Wish What If, Feature Prioritization Matrix, Dot Voting Design Thinking Activities
RESEARCH
- Wrote interview questions for shoppers, users and stakeholders
- Conducted interviews for users and stakeholders
- Performed accessibility testing
- Created user persona
DESIGN
- Sketched design for mobile
- Designed low to high fidelity prototype in Figma
- Organized and maintained design system
- Transformed usability test findings into areas to iterate on
The Short Version:
Problem, Solution & Impact
THE PROBLEM
THE SOLUTION
Home-bound seniors are going hungry because of Meals on Wheels Waco's lack of volunteers due to their convoluted volunteer sign up form.
Inspiring people to volunteer through a simplified volunteer sign up process and powerful client testimonials.
THE IMPACT
Users signed up easily and without confusion. Plus they reported feeling more empathetic to the cause.
80%
70%
80%
of users found the new volunteer form more intuitive
of users enjoyed reading the new volunteer testimonials
of users liked the visualization of steps for the volunteer forms
1. Research
UX Hypothesis: Forming a Foundation for Research
Before diving into user tests and interviews, my team and I needed to create a basis for our research to rest on. Julian, Casey, and I worked together to write a hypothesis statement and after a few iterations, came up with this:
Interview Data Synthesis
I interviewed 3 stakeholders, 4 current volunteers and 5 web/mobile users with my team.
The stakeholders were completely focused on 1 thing: How to best serve their clients so no senior goes hungry.
During user tests, users struggled to complete forms correctly. The site also lacked connection for them, making them feel indifferent about the life-changing service Meals on Wheels provides.
Every volunteer spoke of the joy and connection volunteering brought not only to the seniors they serve every week, but of how much personal fulfillment they felt, too.
100%
80%
50%
Said it's difficult to get volunteers
Said it's easy to miss important information on the site
Said they want to share their story on the website
STAKEHOLDERS
USERS TESTED
VOLUNTEERS
"We became the recipients of blessings."
– Lianna Smyers, volunteer
The Heart of the Issue
According to users, there was a major disconnect from the organization's mission and what users felt when exploring the site.
Additionally, users uncovered problems that made signing up to volunteer unclear and confusing for them and potentially catastrophic for the stakeholders who desperately needed more volunteers.
USERS' WOES
STAKEHOLDERS SAID
Left fields blank on the volunteer sign up form
Rising food costs makes it difficult to meet demands
Volunteer form requires too much typing
Did not know what to expect after applying
Had trouble finding where to refer people to receive meals
Found the site boring and did not feel connected to the nonprofit's mission
Fewer volunteers means more seniors on the waitlist
Most volunteers are older with free time at midday
Volunteers are typically on a consistent schedule
Volunteers only deliver food during the week at midday
Building Empathy With Ester
With a better understanding of our users' needs and stakeholders' goals, I wanted to explore who their target users might be by creating a User Persona. Meet Ester:
Ester Collins
51-Year-Old Stay-at-Home Mom
Recent Empty Nester
About
Ester finds herself feeling isolated from the community since her son moved to college. She wants to give back to the community and use her time to make a difference while connecting to other people.
NEEDS
- A simple volunteer form with clear error prevention
- To know what the next steps are after completing the form
- A solid community to give her a sense of purpose
Goals
- To feel fulfilled by doing good
- To get out of the house and give her life structure and meaning
- To build friendships with other volunteers and clients
Painpoints
- Not super tech-savvy
- Doesn't know exactly which volunteering opportunity she signed up for
- Does not connect with the mission, so she's not sold on Meals on Wheels
Incredible User Insights
The research phase led me to understand valuable user insights that were key to determining which features I would focus on for the design.
Let's Take a 4th Wall Break
If you've made it this far, thank you so much. Sorry for all the writing; it's the curse of the English major.
If you want to dig into Definition & Ideation then Prototyping, just keep scrolling! But if you're like "Jeeze, Carmen, you write too much," I get it.
Choose as you wish!
KEEP READING
SKIP TO PROTOTYPE
2. Definition & Ideation
Focusing on Features
I completed as much research as time allowed, we began to organize data and brainstorm ideas during Definition & Ideation. As Design Lead, I established clear ways for my team to propose and discuss their opinions without hostility or disruption to our work.
One way I encouraged positive communication and collaboration was by using I Like, I Wish, What If. It helped us ideate features without judgment or favoritism. We then narrowed down ideas with a Feature Prioritization Matrix to come to a consensus on what to redesign.
Adding more info about the volunteer process
Increasing empathy for users with volunteer testimonials
Streamlining volunteer forms and adding visibility of system status
Making important information easily accessible
Straightforward Site Map
MOW's current navigation often led our users astray. Sixty percent of users struggled to find the make a referral form. There were way too many options to donate, according to 80% of users. And all of them missed vital information on the site.
We created a new site map to correct the confusion:
What's the Flow? Apply to Volunteer
One of the final stages of Define & Ideate was to delineate a simple, intuitive site map even Ester could complete.
Let's Take a Breather
Thanks again for reading! You made it through Research and Definition & Ideation with only Prototyping left. As Design Lead of this project, this is my time to shine.
So if you're enthralled, read on or skip to my clickable prototype instead.
KEEP READING
SKIP TO PROTOTYPE
3. Prototyping
From Paper to Prototype
As design lead, I completed paper prototyping and quickly moved onto prototyping in Figma. Leading the mobile-first design, I design the home page and volunteer form pages, then helped my team with the tablet and desktop variations. Check out my mid-fi prototype below:
Usability Testing: The Good, the Bad & the Bugs
As expected, usability testing proved there were some problems with my prototype. We tested 5 users, and while there were certainly some positives, such as enjoying the volunteer testimonials and appreciating the visibility of system status added to the volunteer form, they also had some constructive feedback on what to improve.
80%
65%
60%
Found volunteer button easily
Completed all volunteer form pages
Found contact information page confusing
No Save & Continue Later Button
No Back Button
Iterate Design, Mitigate Disasters
Armed with information from our users, I got to work on improving my design. I analyzed their comments, pinpointed where the problems were, then iterated on those problem areas.
Throughout the iterative process, I had to consider what our users needed balanced with what our stakeholders wanted. Users needed a straightforward volunteer form while stakeholders needed to recruit and retain these volunteers.
INCREASED EMPATHY
I iterated on the UI of the Volunteer Testimonials to make them simple, eye-catching and effective.
1st Iteration
2nd Iteration
DECREASED CONFUSION
I added "Your" to the page's microcopy since users confused "Contact Information" with Emergency Contact. I also moved Your Contact Information section up from 5 to 4 to associate it with the user's information.
1st Iteration
2nd Iteration
IMPROVED USABILITY
I included a "Back" button and a "Save & Continue Later" button to improve user control and freedom.
1st Iteration
2nd Iteration
SPRUCED UP VOLUNTEER SELECTION PAGE
I helped users make informed decisions about volunteering by including a "Learn More" section for volunteer selections. Combined with the additional "Select" button, users have a clearer understanding of which volunteering opportunities they selected.
1st Iteration
2nd Iteration
REFINED READABILITY
I helped users understand the volunteer sign up easier by minimizing copy on Volunteer Welcome page.
1st Iteration
2nd Iteration
Final High-Fidelity Prototype
Check out my clickable high-fidelity mobile prototype for the Meals on Wheels Waco redesign. My design focuses on intensifying feelings of empathy users have toward the recipients of the meals, encouraging them to either donate or volunteer by tugging at their heartstrings through powerful volunteer testimonials. Combined with the revamped volunteer flow, my design is informative, empathetic, and intuitive.
Desktop Version
And check out my desktop version I iterated on post-bootcamp. Just press play!
Final Thoughts & Lessons Learned
This project was challenging, especially with the 3-week time span. I learned a ton of valuable lessons, both what to do and what not to do (such as use the same components for mobile and desktop. Don't be lazy, Carmen, just make new ones. It'll save so much time in the end).
Along with the lessons, there are a few things I would redo or consider if my team and I had had more time.
Thank you to my team who trusted me to lead the design!
WHAT I LEARNED
Leadership and teamwork. I learned that a big part isn’t doing all the work by myself, but making sure there’s good collaboration amongst teammates and keeping us on task.
Alway go with the data. I first thought working on the Donate forms would be the most impactful. But by then, we had more data for Volunteer, which lead to a stronger case study.
Time management. I was consciously aware of how much time we had for the project, and lead my team to the decision to focus on 1 flow instead of multiple.
I would retest and iterate on the current user flow, using hard data tools such as Maze to get a more clear understanding of where users clicked.
I would iterate on the tablet version and ensure continuity between all 3.
I would research, design, test and iterate on the donation flow, arguably one of the most important parts of a nonprofit website.
WHAT COMES NEXT
Last Break, Best Break
Whether you stayed with me the whole time or just viewed my prototype, I'd like to thank you for taking the time to look at my portfolio.
Think I'd make a good fit for your team? Contact me!
CONTACT ME
VIEW NEXT PROJECT
