Food Stash Foundation redesign on MacBook
The Overview

Food Stash Foundation is a Vancouver-based nonprofit dedicated to reducing food waste while providing dignified food access across the community.

Despite its strong community impact, the organization's website struggled to communicate how users could get involved. During the FLUI Hackathon 2026, we redesigned the experience to transform a visually cluttered and navigation-heavy platform into a clear, engaging system supporting events, volunteering, rentals and donations. I led the visual design and UI system, refining the platform's visual identity, layout, and hierarchy to create a more cohesive and action-oriented experience.

The Goal

How might we design a clear and engaging platform that helps users understand Food Stash's impact and take meaningful action?

New logo
Design walkthrough
The Problem

💬 Understanding the gap

Food Stash offers meaningful programs and initiatives, but the existing website made it difficult for users to understand what Food Stash offers and how to get involved. Through a website audit, stakeholder conversations, and a community partner interview, three experience gaps emerged.

Navigation Ambiguity

Users struggled to determine where to go or what action to take.

Visual Overload

Dense layouts made content difficult to scan and reduced engagement.

Weak Calls to Action

Key actions lacked visibility and emphasis.

The Solution

💡 Our approach focused on three principles

Simplifying navigation by creating clear, action-based pathways across the platform.

Clear, thoughtful visuals that reflect on Food Stash's community impact.

Prioritize action by making key interactions visible, intuitive, and frictionless.

Visual System

I developed a visual system designed to feel approachable and community-driven.

Color, type, and layout guide attention and reduce friction, prioritizing readability, scannability, and visual rhythm.

Color Palette
#FFFCF9
#F0F0F0
#D2D2D2
#F79839
#305126
Font Families
Primary Typeface
Manrope
Primary typeface
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Secondary Typeface
Neue Haas Grotesk
Secondary typeface
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
The Process

I refined the logo to improve legibility and balance across digital contexts.

Starting from basic carrot and leaf forms, the design explored how an "S" could be integrated into the shape.

Logo sketch process
Before
Original logo
Redesigned
Redesigned logo

Then I translated concepts into mid-fidelity mockups, iterating and refining them into polished high-fidelity designs.

Mid to high fidelity wireframes
Final Designs

The redesigned platform, ready for launch.

In less than 3 days, we recreated the website, added micro-interactions, and created the rental page to make it more visible. Try our prototype to see it in action (Press "R" to restart).

Video Demo

Watch the experience come to life.

Key Takeaways

👩🏻‍💻 What I've learned

Working on such a tight timeline taught me how important it is to manage my time well and focus on what really matters so I can still deliver quality work. It also showed me the value of staying organized early and making confident decisions to keep things moving forward.

Team photo at hackathon