HEARTH
Designed a mutual aid app addressing overconsumption
Hearth is an application that will serve as a platform for neighborhoods and communities to connect; offering services, trading or donating unused items and excess food, and building stronger relationships. By encouraging collaboration, the app aims to bring people together, and create stronger connections and systems of support among communities.
PRODUCT TYPE
Mobile application
ROLE
Product Design, UI/UX Design
TOOLS
Adobe Illustrator, Figma, Maze
TIMEFRAME
January - April 2025
Project Objective:
Our task is to address a civic issue that is present in our everyday lives and present a solution to raise awareness or take action.
We decided to create a mobile application that could create a seamless and efficient way to trade, receive, and give non-monetary goods, items, and services.
We began this project from this one statement: People are often overconsuming and purchasing products they often don’t need or could rather just borrow
1. Research
Before we could really start on our conceptual mobile app for this topic, we first had to…
Research the relevancy of this as a civic issue
Analyze similar applications out there
Conduct a short survey to understand our users needs and current perspective
Secondary market research: How is this relevant as a civic issue?
This background research would reinforce Hearth’s position to address current environmental concerns and mitigate these issues.
Collective responsibility refers to the shared duties and commitments individuals have within a community to contribute to its overall well-being.
Historically, Indigenous communities have long embodied collective care and responsibility as core principles of their governance and way of life in which communities actively manage and prioritize the well-being of their members through shared responsibilities, fostering resilience, mutual support, and overall wellness. This model has demonstrated long-term benefits, including improved health outcomes and sustainable environmental practices.
Main findings:
Studies show a strong link between community belonging and mental health.
Weaker community ties are associated with poorer general and mental health, especially among adults aged 40–59 (Michalski et al., 2020).
Collective responsibility is often activated in crisis (e.g., COVID-19 pandemic, natural disasters), but should be an ongoing societal value.
Despite its benefits, only 45.7% of Canadians feel a very or somewhat strong sense of local community belonging (Government of Canada, 2022).
Average Canadian household wastes 140kg of food/year, equating to $1,100 in expenses.
2.2 million tons of food go to waste annually in Canada.
A 2015 study found that household item production is responsible for 60% of global greenhouse gas emissions (Davidson Environmental, 2022).
Competitor analysis: First our team had to discover applications out there had a similar concept to our idea
This would help us map out what features we would want to include, identify the pain points from the users of these similar apps, and how to set ourselves apart in the market.
Short survey research: We needed to understand our audience and user perspectives now in order to empathize with their needs
A quick short survey was conducted between 6 young adults that often bought goods and items for themselves. These questions ranged from multiple choice, single response, and short answer responses.
Questions:
How often do you find yourself with extra items or food you no longer need?
What do you usually do with items or food you no longer need?
What usually stops you from giving away or sharing unused items?
How comfortable would you feel meeting someone locally to give or receive free items?
What would make it easier or more appealing for you to share or give away what you don’t need?
When you imagine a community built around sharing and helping each other, what would make you feel most connected or valued as part of it?
Main pain points from insights
People regularly find themselves with excess goods or food but lack convenient, trusted outlets to redistribute them.
Most people give only to friends/family, showing a need for structured, local, non-monetary platforms.
Users want drop-off spots, easy coordination, or middleman systems to reduce effort.
Neutral comfort levels show users need reassurance through verification, safe meetups, or reliable pickup systems.
Seeing impact (“my item helped someone”) and community recognition make people feel valued and more likely to participate again.
Overall takeaway
From the secondary research, competitive analysis, and survey combined, its clear this is an issue that is not only important to address in a civic perspective, but one that offers an opportunity to design an application that can focus on our users needs and wants.
A common frustration throughout our insights would be that our users want an an effortless and easy way to receive and give away their goods. While surprisingly the idea of being able to see the impact they make was a desire that our users wanted access to as well.
We were then able to think of a user persona to be able to guide us in our development
2. Define
Having this conceptual persona allowed us to focus on what our audience was and who we were designing our application for.
To ensure that the journey our users would experience through the application would be clear, establishing a simple user journey summarizing the start-to-end goal that we wanted our users to reach would help contextualize our concept and vision.
User Journey
Through a brainstorming session, we were able to organize the different features overall that we wanted our user to have and be able to do within the app. We organized them based off priority to ensure that we were able to know where to place the right amount of effort depending on the impact it would make for our application within our timeframe.
Feature roadmap
We then were able to roughly map these features through a user flow diagram to view how these pages would interact with one another
User Flow
Sketching our ideas on paper allowed us to be flexible with how we initially envisioned the structure of our interfaces
3. Ideate
Before working on the wireframes, we went to look through some similar applications for inspiration on how we could approach organizing our information and content.
Inspiration
Low/mid-fidelity wireframes
My team and I were able to ideate and brainstorm some potential pages and I was able to lead the low fidelity wireframes as seen below.
Pivots: As expected, we hit a few issues along the way — some pages had to be scrapped, and new ones were created in response.
Made changes to the homepage: Implemented categorical feature for the homepage feed to streamline search and filter function
Replaced with horizontal scrolling: Swapped out the vertical scroll for items within the homepage for horizontal scroll to utilize screen space efficiently
Improved engagement strategies: Included additional chat features for faster reaction and efficient response and tracking systems. This would include quick and accessible emoji reactions, the ability to add orders to your calendar via chat, to view those said orders and their details, and to also request a calendar event via chat as well.
We wanted to ensure that the chat was capable of streamlining features to ensure overall convenience for users to navigate and organize their events.
Solved usability issues with our original systems: The main issue with our original system was inefficiency—users had to click through several pop-ups just to place an order. It also wasn’t designed well for rescheduling, since it focused on the lister’s availability instead of the buyer’s. On top of that, there was no easy way to track orders or events.
To fix this, we created a simpler, more efficient system for scheduling, rescheduling, and tracking. We added a calendar page with a clear monthly view of all orders and combined the location, date, and time selection into one page to speed things up.
In the updated system, scheduling now prioritizes the buyer’s availability. The lister can accept the proposed time or suggest a new one, avoiding conflicts and making the process much smoother for everyone.
Logo proposal
When you break apart the logo itself, you’ll be able to see a sun that symbolizes warmth, a heart that symbolizes care, a home to symbolize our neigbours, and then all that put together is a person to symbolize community.
Along with the typography of Hearth itself, you can see the letters kind of connecting all together to show connectivity which is exactly what we hope to achieve with Hearth and the app.
Design systems
In terms of the choice of colours, we chose a majority of colours on the warmer side. However, for buttons within the app itself, we settled on Salmon Red.
“Geist” was chosen as the typography for the overall body to ensure readability.
Included are the icons, assets, and components used throughout the pages.
4. Prototype
Now for the fun part — all that was left was to polish the UI of our 56 wireframes using our design system and add interactions
5. Results
Now that our prototype was complete, I took the initiative to run it through usability testing to view how our users would navigate our main pages
An unmoderated usability test was conducted with nine participants using Maze. The heatmap results are shown below.
At the end of each task, participants were asked to rate how easy the experience felt. Overall, 56% of users found the onboarding and navigation “very easy”, while 44% rated it as “somewhat easy.”
For the scheduling system and checkout process, 38% of participants rated the experience as “very easy,” and 63% described it as “somewhat easy.”
What I would improve if I had more time
I would have…
Expanded the Define stage by incorporating a secondary persona to represent different audience needs.
Included more research participants in both the survey and usability testing to increase the reliability of the findings.
Conducted user interviews for deeper qualitative insights.
Made further refinements after usability testing. While the overall experience was smooth, the heatmap results highlighted areas where certain clicks revealed opportunities for more intuitive and seamless interactions.
Implemented A/B testing to validate and strengthen design decisions.
Here’s a quick demo walkthrough of Hearth, going through all the pages, features, and services it has to offer.
Thanks for watching!
Still here? Check out my other projects 👀
Keep reading
BERRYSOUP
Re-designed a website that showcases desktop wallpapers
Improved the UI design and completed the brand concept of BerrySoup across all webpages on the site while addressing previous user feedback.
CANADA AGRICULTURE AND FOOD MUSEUM
Built a fun, educational game for children at the museum
Created an educational game to engage visitors and children to interact with museum activities through a scavenger hunt.