Contents

Hearted
A social enterprise turning surplus produce into soups and stews, building community impact with love, care and purpose.
Visual Design
Responsive Web Design

Hearted
A social enterprise turning surplus produce into soups and stews, building community impact with love, care and purpose.
Visual Design
Responsive Web Design
Project Overview
Hearted is a social enterprise inspired by the Canadian company “Goodly”. The brand transforms surplus produce into soups and stews while creating community impact through employment and food donations.
This project involved reimagining the brand identity and designing a responsive website to share its story, highlight its social impact, and present the business in a clear and engaging way.
Hearted is a social enterprise inspired by the Canadian company “Goodly”. The brand transforms surplus produce into soups and stews while creating community impact through employment and food donations.
This project involved reimagining the brand identity and designing a responsive website to share its story, highlight its social impact, and present the business in a clear and engaging way.
My Role
Visual / UI Designer
Visual / UI Designer
Tools
Figma, Adobe Illustrator, Photoshop, Procreate
Figma, Adobe Illustrator, Photoshop, Procreate
Skills
Prototype, Responsive Design, Interaction Design, Branding
Prototype, Responsive Design, Interaction Design, Branding
Brand Concept & Discovery
Brand Concept & Discovery

Context
Context
I chose this brand concept because my mother’s side of the family are farmers. The market has very strict standards for how produce should look, so they often deal with a surprisingly large amount of surplus food. They give out buckets of cucumbers and other vegetables to relatives and friends so they don’t go to waste, but it has always been a hassle.
“Goodly Foods Society” stood out to me because they are a production facility in Vancouver that transform surplus produce into delicious soup, while creating employment opportunities for people facing barriers to work, and donating meals to those in need. Their mission resonated with me deeply, which is why I chose to reimagine their brand through this project.
I chose this brand concept because my mother’s side of the family are farmers. The market has very strict standards for how produce should look, so they often deal with a surprisingly large amount of surplus food. They give out buckets of cucumbers and other vegetables to relatives and friends so they don’t go to waste, but it has always been a hassle.
“Goodly Foods Society” stood out to me because they are a production facility in Vancouver that transform surplus produce into delicious soup, while creating employment opportunities for people facing barriers to work, and donating meals to those in need. Their mission resonated with me deeply, which is why I chose to reimagine their brand through this project.

Brand Identity
Brand Identity
With a clear blueprint of the concept, I defined the key characteristics and values that would guide the rebranding.
With a clear blueprint of the concept, I defined the key characteristics and values that would guide the rebranding.
Hearted is envisioned as a welcoming, cozy organization where all action we take is driven by love, care, and empathy. At its core is a desire to create a world “filled with hearts”, one built on community and kindness.
Hearted is envisioned as a welcoming, cozy organization where all action we take is driven by love, care, and empathy. At its core is a desire to create a world “filled with hearts”, one built on community and kindness.
Brand Character
Environmental
Heart-warming
Community-driven
Authentic
Joyful
Environmental
Heart-warming
Community-driven
Authentic
Joyful
Target Audience
People who care about sustainability, food waste reduction, and supporting ethical, community-driven businesses.
People who care about sustainability, food waste reduction, and supporting ethical, community-driven businesses.
Visual Design System
Visual Design System
Hearted’s visual identity reflects warmth and care with a touch of playfulness. Red and green balance emotion with sustainability. I created a simple logo to present an approachable, trustworthy personality.
Hearted’s visual identity reflects warmth and care with a touch of playfulness. Red and green balance emotion with sustainability. I created a simple logo to present an approachable, trustworthy personality.



Sitemap
Sitemap
Since the goal was to be informative, I focused on what users would want to know and where they’d expect to find it, structuring content to be clear, digestible, and not overwhelming.
Since the goal was to be informative, I focused on what users would want to know and where they’d expect to find it, structuring content to be clear, digestible, and not overwhelming.



Wireframes
Wireframes
These are the early wireframes. I added heart-inspired shapes and soft curves to create a welcoming, approachable look. The goal was to create a visually engaging layout while maintaining clarity.
These are the early wireframes. I added heart-inspired shapes and soft curves to create a welcoming, approachable look. The goal was to create a visually engaging layout while maintaining clarity.
Home


About Us


Products


Final Prototyping
Final Prototyping

Interactive states
Interactive states
I learned there are many interactive states to consider, and creating organized lists helped me maintain consistency.
I learned there are many interactive states to consider, and creating organized lists helped me maintain consistency.








Final Mobile Design
Final Mobile Design
Reflection 🤔
Reflection 🤔
Through this project, I learned practical ways to create designs that feel consistent, expressive, and engaging. Some key takeaways were:
Through this project, I learned practical ways to create designs that feel consistent, expressive, and engaging. Some key takeaways were:
Consistency can be achieved through modules and components, building trust and making the experience feel polished.
Brand expression involves translating its personality into visuals, shapes, and layouts to communicate its character and mission.
Interactive states play a big role in making the product feel alive and providing feedback to users’ actions.
Consistency can be achieved through modules and components, building trust and making the experience feel polished.
Brand expression involves translating its personality into visuals, shapes, and layouts to communicate its character and mission.
Interactive states play a big role in making the product feel alive and providing feedback to users’ actions.
Overall, I realized design isn’t just about aesthetics. It’s about creating systems that are usable, inclusive, and enjoyable.
Overall, I realized design isn’t just about aesthetics. It’s about creating systems that are usable, inclusive, and enjoyable.


