Teens for Food Justice Web + Mobile Overhaul

Role: UX / UI Designer, Content Strategist

Timeline: July 2019 – June 2021

PROJECT OVERVIEW

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.

Main Goal

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.

The Problem

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.

The Solution

Through research and social media analytics, I successfully:

• Updated TFFJ’s design system

• Formulated an improved marketing and content strategy

Product Analysis

TFFJ required a cohesive design system that aligned with branding marketing, and the organization’s identity.

I discovered that:

• 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.

DISCOVER

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

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?

DEFINE

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.

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.

DEVELOP

Wireframe Sketches

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.

DELIVER

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.

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

REFLECTION

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!