Quilted
Developing belonging and identity through memories and traditions
Project Overview
Using design to address cultural erosion
During a 48 hour design-a-thon - a design sprint where small teams investigate a theme and propose and create possible solutions - hosted by the Design Club at the University of California Irvine, my friends and I challenged ourselves to create a tool to decrease and prevent further cultural disconnect.
TIMELINE
48 Hours
May 17-19 2024
TEAM
Ethan Zhao
Sun Graham
Jocelyn Le
Alexandr Shor
ROLE
User Experience Researcher
User Interface Designer
TOOLS
Figma
Context
UCI Design-a-thon 2024
In Spring 2024, I participated in UC Irvine's annual Design-a-thon, where the design prompt challenged us to "create a product that fosters creative expression for a more inclusive society".
Our team's solution, Quilted, is an app that aims to cultivate community and identity through the preservation of memories and traditions. It stood out amongst 200+ competitors and took home 3rd place!
Problem
Cultural practices throughout the United States are at risk of being lost as younger generations become increasingly disconnected from their heritage.
📉
Cultural erosion
is the decline or disappearance of cultural practices. As a result of mixed-identities and societal pressures, a growing number are disconnecting from their heritage.
👥
~ 25% of Gen-Z
has a parent who is an immigrant. Gen-Z are also the most racially and ethnically diverse generation in America, nearly half are non-white (48%).
🌍
> 70 million immigrants
have come to the United States from nearly every country in the world since 1965!
Solution
Our team created Quilted, an app
Our mobile app would allow people to:
Search for communities near them needing help with waste management
Get directly involved and volunteer for community clean ups
Donate to their community to support supplies and stipends for volunteers
Participate in community forums to engage with members, boost cleanup involvement, and give feedback
User Research
Understanding our users
Due to physical and technical limitations, we were unable to directly connect with Bangalore community residents. So, we consulted Emma Zhang, who shared her extensive fieldwork insights on waste management in low-income communities in India. Our team also reviewed past and ongoing research papers on Bangalore's waste management, solid waste systems, and the informal waste sector, as well as analyzed Emma's community visit notes from Koramangala and Madiwala, two neighborhoods within Bangalore.
To better understand our client and community members' needs, we focused our research on two goals:
Learn about residents’ current behaviors, motivations, and pain points with waste management
Explore the roles and capabilities of community volunteers and explore how EPIC can provide support.
After our initial meetings and discussions with Emma, we gave her interview questions for her to ask Bangalore community members about their current situations during her on-site visit, allowing her to promptly provide us with their responses.
An important note we discovered was that because residents in these areas mainly used Android phones with 5G connection, our priority became creating a mobile platform that would be optimized for low bandwidth content and high visibility.
Ideation
Defining product requirements
Our team then held several meetings with Emma and EPIC India to establish a roadmap and list of product needs and features to keep in mind during the design process.
Required Features:
Nearby Community Cleanup List
View details and information about cleanup initiatives in nearby communities.
Volunteer Sign Up
Register/onboard as a volunteer and provide basic contact information.
Send Donations
Support supplies and stipends for volunteers to successfully clean up a neighborhood.
Community Forum
Engage with nearby neighbors in discussions about managing and maintaining waste.
Organizing structure and basic layout
Before diving into the design, our team created a framework that organizes content and functionality, ensuring seamless navigation and clarity for the users.
Our team decided that the most efficient approach was to divide into pairs to address the pages collaboratively. My partner, Teresa, and I were assigned to work on the home page and the donation flow pages. Each pair began by mapping out a user flow specific to their assigned pages and then moved to creating some basic wireframes.
Our Four Main Pages
Home Page
is for community members to easily understand EPIC India’s mission and find out how to get involved.
Donation Pages
are direct and intuitive so that community members can clearly know where their donations are going.
Volunteer Pages
are location based so community members have a place to learn about or join a cleanup as a volunteer.
Forum Pages
are for community members to interact with their neighbors and raise awareness about waste issues.
Style Guide
Prioritizing consistency and simplicity
As we moved towards mid-fidelity and high-fidelity prototypes, we came back together and met as a team to collaborate on creating a design system for our application so that all of our pages could look cohesive.
Iterations
Cleaning it up!
We conducted user testing of our mockup designs on UserTesting.com, where 15 users provided us with comprehensive video feedback. Additionally, we were fortunate to have our client, Emma, on-site in Bangalore. She was able to moderate 4 more in-person user tests to Bangalore residents using our updated prototypes to give us more feedback.
The following is how we modified our designs based on this feedback:
Home and About Page
After conducting our first round of user testing, we realized we needed to separate out some of the information from the home page and put it in an about page to keep the main page less cluttered.
We designated the home page as a broad introduction and the about page for more detailed information about the project.
We also reordered sections to create a smoother flow and simplified some of the information to reduce redundancy and avoid overwhelming users.
"I felt that the information on the main page was a bit repetitive and I might clean that up a bit."
- Anonymous User Tester
Donations Page
After our first round of user testing and a couple of client feedback meetings, we found that some users expressed a desire for more information, particularly regarding where the donations would go towards.
Following the feedback, we included an additional FAQ section as a part of the the donations page to explain how the donations would be used.
We also updated the wording of the confirmation page to be warmer and more appreciative.
Volunteer Page
Again, after our first round of user testing and a couple of client feedback meetings, we realized that the volunteer page could be modified to include more information about the project.
To be more clear, we included a brief description of the project outlining physical work requirements, a small map for the exact location, and contact details for the project lead. Additionally, we made the number of current volunteers (out of the maximum allowed) and the amount of donations raised more prominent.
We also improved the confirmation page to display all relevant information clearly, including the time, location, date, physical expectations, and an easily accessible cancellation button for users who may have changed their plans.
To speed up the process, we also implemented a feature for logged-in users to auto-fill previously entered details.
"I would want to see more information about the project before I sign up."
- Anonymous User Tester
Final Deliverable
A spotless solution!
01
Clean and simple information
Home page - browse the organization’s mission and overview.
About page - understand the bigger picture and why it matters.
Learn about how to get involved with CTA to easily maneuver the platform!
02
Browse community projects and sign up to volunteer
Community projects list - view cleanup initiatives in nearby neighborhoods.
Project page - easily view specific project details and join as a volunteer or send a donation.
Autofill information - logged in users can volunteer for projects easily
Profile page - sign up and keep track of volunteer history
03
Donating to the cause
Send a donation to support supplies and stipends for volunteers to successfully clean up a neighborhood!
FAQ section and preset donation amounts are to outline exactly where the money is going with full transparency.
Profile page - sign up and keep track of donation history
04
Connect with your community
Engage with neighbors in discussions about managing and maintaining waste in your shared community.
Encourage participation and raise awareness for cleanup initiatives.
Testimonials
Sweeping success!
Our team successfully designed a simple and streamlined platform to address EPIC India’s vision of improving and maintaining waste management practices in Bangalore. Our design is now handed off to developers and when it is officially launched, this platform will have the potential to scale and impact hundreds of low-income communities.
Across feedback from 20 users, we achieved:
100% completion and success rate across all the tasks completed in our usability tests
97% user satisfaction across all the tasks from our user tests
15 users praised the platform and described its design as “simple”, “straightforward”, and “easy”
In-person user testers indicated their desire and need for this type of crowdsourcing/cleanup platform for their own community:
“This is an awesome app, well designed and intuitive and easy to use. I wish I had it in my area.”
- Anonymous Bangalore Tester 1
“I really like the idea and would love for something like this in my area”
- Anonymous Bangalore Tester 2
“Loved the idea, the simplicity won me over and made me feel like I was going to help a good local cause. Love the theme!”
- Anonymous Bangalore Tester 3