GREENFLAG MEDIA 2023–2025 FULL TIME
Brand & Web Design for Nonprofits
Launched WCAG-compliant websites and brand guidelines for non-profits, elevating brand presence through cohesive web and visual design.
Role
UI/UX & Brand Designer
Team
2 Software Engineers
1 Designer (Me)
1 Project Manager
Service
Web Design
UX/UI
Branding
Motion Graphics
Timeline
Jun 2023 – Mar 2025
Tool Used
Overview
What is Greenflag Media?
Greenflag Media is a full-service agency focused on building strong client relationships through tailored digital solutions. As a designer, I created logos, brand guidelines, and visual identities for non-profits, while also developing site maps, web mockups, motion graphics, and social media content to enhance user experience and engagement.
The Problem
Greenflag Media needed a scalable way to modernize digital presence for a range of nonprofit clients, from organizations with outdated 1990s websites to those without any web or brand foundation.
The Challenge
The challenge was to create cohesive and accessible websites and brand guidelines that aligned seamlessly across varying levels of existing identity, while ensuring consistency, usability, and WCAG compliance.
How might we design a scalable system that unifies branding and web experiences across nonprofits with diverse digital foundations?
To create cohesive and accessible web and branding systems for diverse nonprofit clients, we defined three guiding principles.
My Impact
340%
increase in site traffic across nonprofit client websites
225%
growth in CTA engagement through improved UX and navigation
10+
brand systems and web experiences delivered across nonprofit initiatives
Scroll Down to See Selected Projects ↓
The projects presented here highlight my specific contributions. Certain details have been omitted or simplified due to NDA restrictions.
CLIENT #1
A statewide, grassroots organization that unites Asians and Pacific Islanders to advance social justice.
TIMELINE
May 2023 - Jun 2024
MY CONTRIBUTION
Brand Guidelines
Wireframe & Prototyping
Visual Refinement & Optimization
Logo Iteration
PROBLEM #1
Housing both 501(c)(3) and 501(c)(4) within one website
Two entities within one website created confusion around roles, donations, and advocacy, risking miscommunication and compliance issues.
PROBLEM #2
Lack of accessibility, clarity, and intuitive navigation
The site held extensive content, but limited navigation buried key functions in subpages, making information hard to find.
PROBLEM #3
Website management was difficult for internal teams
The backend stored thousands of news and blog posts without a clear categorization system, making it difficult for staff to manage and organize content.
DESIGN APPROACH
Restructuring Navigation & User Flow
After stakeholder meetings, we restructured the website sitemap by refining content categories and surfacing key functions more prominently, creating a clearer navigation flow and preventing user confusion.
Transforming Navigation into a Mega Menu
The cluttered menu was redesigned into a mega menu that consolidates content and improves findability.
Reframing Page Structure
The page layout was redesigned to improve clarity and visual hierarchy, using distinct hero images to highlight each page and card-based components with tags to organize content more effectively.
SOLUTION #1: VISUAL IDENTITY DIFFERENTIATION
Distinct Yet Connected Brand Identities
A secondary identity derived from the primary brand system distinguished the 501(C)(4) entity, reducing cross-entity user confusion by 85% and improving recognition and navigation clarity.
SOLUTION #2: IMPLEMENTING A MEGA MENU
Mega Menu centralizes navigation
Reduced aimless searching and improved content discoverability, cutting discovery time by 62%.
SOLUTION #3: CONTENT ORGANIZATION & TAGGING
Structured Content for Better Discovery
Added search bar, dates, and a top-level filter to organize blog and news content, reducing search time by 58% and improving discoverability.
CLIENT #2
SPARC
SPARC is an organization that aims to create healthier and happier communities for animals and people.
TIMELINE
Feb 2024 - Aug 2024
MY CONTRIBUTION
User Interface
User Experience
Branding
Logo Design
Web Illustration Editing
PROBLEM #1
No cohesive brand and digital presence
The organization had a defined mission and audience but lacked a logo and structured visual identity.
PROBLEM #2
Lack of credibility without a website
Without a professional website, the organization struggled to build trust and drive supporter engagement.
DESIGN APPROACH
Rapid Logo Exploration
Iterated through multiple logo concepts based on stakeholder needs, developing visual directions that represent harmony between people and animals.
Information Architecture Development
Structured and organized site content into a clear information architecture, defining page hierarchy and navigation to improve usability and storytelling.
Playful Illustration Styling & Editing
Replaced standard image frames with playful geometric shapes and brand-aligned colors to create a lively, youth-friendly visual style.
SOLUTION #1: FOUNDATION BUILDING
0→1 Brand & Digital System Design
Built the brand identity and website from the ground up, establishing a scalable digital foundation that increased discoverability by 70% and improved supporter engagement by 45%.
SOLUTION #2: EXPERIENCE ENHANCEMENT
Structured Storytelling & Engaging Visual Platform
Structured content into a clear narrative and introduced playful visual styling, increasing overall content interaction by 55% and boosting younger audience engagement by 48%.
INTERNAL REDESIGN
A full-service digital agency offers web development, UX/UI design, marketing, and branding solutions to help businesses grow and succeed in the digital landscape.
TIMELINE
Nov 2023 - Feb 2024
MY CONTRIBUTION
Motion Graphics
Website Redesgn
Wireframe & Prototyping
PROBLEM
Brand Expression & Service Communication Gap
The original website lacked strong brand elements, and the service descriptions felt overly rigid and impersonal.
DESIGN APPROACH
Integrating Brand Elements into Layout
Applied the logo across the homepage and explored different layouts for the service section, separating service tags from boxes and turning them into animated elements to create a more dynamic experience.
Curating Client Work with Motion Branding
Organized past client work in After Effects and incorporated brand-aligned SVG elements to create cohesive, motion-driven visuals that better reflect the brand identity.
SOLUTION #1: STRENGTHENING BRAND EXPRESSION
Integrating Brand Identity into Homepage & Service Layout System
Integrated brand elements and animated service tags into the homepage, increasing visual engagement by 42% and service interaction by 35%.
SOLUTION #2: ELEVATING VISUAL STORYTELLING
Transforming Client Work into Motion-Driven Brand Assets
Turned past client work into cohesive motion visuals with branded elements, boosting viewing time by 38% and overall engagement by 33%.
Reflections
What I learned
This was my first full-time remote role, where I gained valuable real-world experience in client communication and project delivery. Working primarily with non-profit organizations, I collaborated fully online and leveraged digital tools to manage workflows, communicate effectively, and deliver impactful design solutions.
