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 Design
TOOLS
Adobe Illustrator, Figma
TIMEFRAME
January - April 2025
People are often overconsuming and purchasing products they often don’t need or could rather just borrow
The problem:
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.
⭐ The first step in this task is to create an identity for our mobile app and map out the features we would want to include.
Project planning:
Above are the preliminary sketches for our wireframe, user flow diagram, and logo sketch ideas.
From this I was able to create a logo proposal to show to my team
Visual Identity:
While creating the logo, it was crucial to maintain the values and meaning of warmth, community, and home from Hearth.
Logo proposal:
For that reason, 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 System:
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.
Prior to creating the wireframes on Figma, my team and I conducted our own market research on our competitors and similar applications. This allowed us to approach the wireframing with more thoughtful and intentional design.
Based on our research, we decided to proceed with a interface similar to what you’d find on applications such as “Depop”, “Too Good to Go”, and “Instagram”.
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.
Now we had to start on the low fidelity wireframes
The challenge:
Low fidelity wireframes:
User testing:
As expected, we hit a few user 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.
Results:
Now for the fun part — all that was left was to polish our wireframes using the design system we had set and add interactions
Final high fidelity wireframes:
Video Demo:
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.