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 Desktop Design

Final Desktop Design

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.

© 2025 Jamie Wang

Thank you for visiting:) Let’s connect🌟👉

© 2025 Jamie Wang

Thank you for visiting:)

Let’s connect🌟👉

© 2025 Jamie Wang

Thank you for visiting:) Let’s connect🌟