Teens for Food Justice

Web + Mobile Overhaul

Timeline: July 2019 – June 2021

Teens for Food Justice (TFFJ), a non-profit organization empowering youths in NYC and beyond to build hydroponic farms in their schools and combat food insecurity, my focus is on redesigning and rebranding the existing website to enhance user experience and create an impactful online presence.

Project Overview

  • The main goal for this project was to optimize the existing product by creating compelling user experiences that encourage visitors to donate and learn more about TFFJ’s mission, resulting in increased engagement and support for the organization.

  • Frequent users found the website confusing and encountered issues with its outdated design and usability challenges.

    Users sought to connect with TFFJ staff through the website to learn about next steps for bringing hydroponic farms to their schools. However, the outdated web design, particularly the confusing navigation bar, discouraged visitors from exploring the donate page and discovering ways to support TFFJ.

  • TFFJ required a cohesive design system that aligned with branding marketing, and the organization’s identity. Through research and social media analytics, I successfully:

    • Updated TFFJ’s design system

    • Formulated an improved marketing and content strategy

  • Our competitors utilized similar UI web design patterns. This insight influenced our decision to structure our website outline similarly, resulting in an organized navigation bar.

    During TFFJ’s rebrand, we maintained consistency by incorporating our primary colors (orange, blue, and green) throughout the website and other design assets.

Competitive Analysis

I conducted competitor research to analyze the strategies and approaches of TFFJ’s competition and identify successful practices.

From my competitive analysis, I observed 3 key findings:

  • Concise and straightforward navigation that was user-friendly

  • Prominent and eye-catching logos used by competitors

  • Attention-grabbing colors on call-to-action buttons

User Statistics

I discovered statistics that provided valuable insights for my team and prompted us to reevaluate our design decisions.

Stats provided by John Kramer Marketing

Who are our Users?

I sought ways to reflect this content in our designs. The content board served as a mood board that mirrored TFFJ’s mission and the content we aimed to showcase on the new website.

Content and Market Strategy

Determining our content strategy played a significant role in the project. We deliberated on what to highlight for users when they land on our home page and what content to display. This initiated the define process for the project.

I was responsible for TFFJ’s socials and I focused on delivering evergreen content, which are continually relevant for viewers/readers over a long period of time, that aligned with our mission of building community through youth-led advocacy and student-grown hydroponic advocacy and student-grown hydroponic greens to combat food insecurity.

Primary Personas

Secondary Personas

  • Nancy and Angelé were frequent users of the website, and we identified the opportunity to enhance the content organization for easier navigation.

    They were highly interested in TFFJ’s mission and sought resources to support bringing the mission to their schools.

  • We had the opportunity to enhance user experience for our secondary personas to increase their website visits and engagement.

    Patrick, a dedicated supporter who actively participates in annual Gala and monthly social media campaigns, needed clear and prominent visibility of the donate button as he was not tech-savvy and had limited time for navigation.

    Lucy, who conducts extensive research for her podcasts, prioritizes contacting the staff. Streamlining website navigation was crucial for her to effectively utilize her time in research rather than struggling with website navigation.

Wireframe

Based on our research, I created wireframe sketches that guided my collaboration with the development team to produce a working prototype. Fortunately, our competitive analysis provided valuable insights, saving us from having to start the homepage design from scratch.

Delivery

TFFJ Logo

We modified the original logo to align with TFFJ’s mission of promoting food security through youth advocacy and hydroponic farming, symbolizing the nourishment of minds, bodies, and communities.

We replaced two of the circles, which originally had people icons, with a light bulb and a leaf.

The light bulb symbolized the mind, the person represented the youth/community, and the leaf represented hydroponic farms for the communities.

Design Strategy

Considering that our most frequent website users are students and teachers, their interests were centered around the following categories:

  • Advocacy

  • Community service

  • STEM programs

We dedicated 3 tabs on the navigation for each of these categories.

The primary goal for our secondary personas, like Lucy, are finding the key people to speak with and learn more about TFFJ’s mission, Thus, adding an informational icon next to the “About” tab would catch their attention.

Donors visit the site to donate money, read news, or sign up for the newsletter. Based on our research, we followed the same formula as our competitors by highlighting the call-to-action button on the navigation.

The icons from the new logo were used in the navigation bar to reflect the message and mission, while maintaining consistent branding.

Design System

After several iterations, we finalized a design to initiate the project. To ensure cohesive visual content on the TFFJ website, I edited our content master list to connect all the dots.

The final product incorporates:

  • Features that cater for all users

  • Maintains a consistent tone and language throughout the site, and

  • Prominently displays TFFJ’s mission and message wherever you visit.

Youth Advocacy

Youth Advocacy

OUTCOME

We successfully launched the new website in Spring ‘21 and celebrated during our weekly team meeting!

The project had a significant impact, including:

  • Increased site visits and engagements,

  • Raised over $600k during our annual gala through prominent placement of the donate button, and

  • Created a seamless and user-centric user experience

Lessons Learned

Although the new website looked great in its first launch, I learned:

  • The importance of setting realistic goals. We had weekly goals and tasks to complete, which impacted the website’s launch date due to other project demands,

  • How crucial it was to consider the user’s needs and expectations during meetings,

  • This project would not have been successful without the power of teamwork, as teamwork truly makes the dream work!