PRODUCT DESIGN / UIUX DESIGN

Hearth

Context

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 Design, UI Design

  • Carleton University: Alba Daza, community neighborhoods

  • Adobe Illustrator, Figma

  • 2025

Results

Watch a quick demo walkthrough of Hearth, going through all the pages, features, and services it has to offer.

Demo /

Process

Above are the preliminary sketches showcase our previous user flow diagram, wireframe sketches, and logo sketch ideas.

Sketches /

Above is the user flow diagram used to map out the user journey and pages required for the application.

User Flow Diagram /

While creating the logo, it was crucial to maintain the values and meaning of warmth, community, and home from Hearth.

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.

Visual Identity /

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.

Above are some low fidelity wireframes I produced as a skeleton model of the structure our pages may have. This stage focused primarily on brainstorming the most optimal structures for our application.

We took reference from many e-commerce, social media, and marketplace applications such as “Depop”, “Too Good to Go”, and “Instagram”.

Low fidelity /

User testing

Implemented categorical feature for the homepage feed to streamline search and filter function

Homepage feedback

Swapped out the vertical scroll for items within the homepage for horizontal scroll to utilize screen space efficiently

Horizontal Scrolling

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.

Improved engagement strategies

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.

Solved usability issue

Above are some samples from our high fidelity wireframes. From this, we were able to clean the pages, implement some of the feedback we were given (as noted previously), create a consistent design system, and focus on the interactive design aspect of the pages. Overall, resulting in a functional prototype of this application.

High fidelity /