EcoServants Case Study — Homepage Revamp, Icon System & Visual Direction
Case Study Overview
I led creative direction with a team of web developers and graphic designers for EcoServants’ homepage redesign, introducing the core idea for a purpose-driven icon system and restructuring the content architecture to make the site more intuitive for volunteers, educators, donors, and institutional partners.
Letter of Recommendation by EcoServants Project©
Problem
EcoServants’ homepage struggled to communicate a large amount of information in a structured, user-friendly way. The layout was cluttered, the hierarchy unclear, and the primary pathways (updates, programs, resources, etc.) were difficult for users to navigate efficiently.
Solution
I proposed a purpose-driven icon system—paired with a reorganized homepage layout—to make the platform more scannable and intuitive. By designing icons tied directly to EcoServants’ most important sections (such as Education, Forestry, Resources, and Community Programs), I introduced a visual navigation method familiar to users of all ages.
This system became the backbone of a cleaner user flow, helping visitors immediately understand where to go and how to engage.
Rationale
I led the visual direction by establishing a clear, accessible iconography system that anchors the homepage experience. Each icon was conceptually linked to EcoServants’ pillars—nature, learning, restoration, and action—offering a simple, emotionally intelligent entry point into the website.
Paired with refined typography, color adjustments, and intentional spacing, the new visual language helped transform complex, text-heavy content into an approachable and educational browsing experience.
Process Overview
My process began with moodboarding—mapping visual territories that balanced ecology, education, and trustworthiness. I then refined the existing color and type selections to create a cohesive and professional foundation for the redesign.
From there, I developed a custom series of hand-drawn icons using a 10B pencil. Though playful in origin, each symbol was digitally refined to feel polished and aligned with EcoServants’ mission. This tactile-meets-professional approach brought warmth and authenticity into the platform while supporting the organization’s credibility and long-term goals.
EcoServants Homepage — Before Optimization
EcoServants Homepage — Final Result
Explorations, Trials, & Iterations
1. Initial Wireframes: Compact, Minimalistic, Purpose-Driven
My early wireframes focused on minimizing cognitive load by removing non-essential information from the homepage. The goal was a clean, modern landing space where users could instantly scan EcoServants’ most important updates and pathways.
This minimalistic direction helped clarify the brand’s message, but internal feedback revealed that a highly stripped-down look didn’t meet the needs of EcoServants’ wider audience—particularly donors, partners, and grant reviewers who expect comprehensive access upfront.
2. Playful Paperback Prototype
To explore alternative engagement methods, I created a low-fidelity paperback-style prototype. This concept leaned into the idea of EcoServants as an approachable, community-driven educational organization.
Inspired by field journals and ecology notebooks, I introduced lightly hand-drawn textures and pencil-inspired icons.
This direction resonated strongly with younger audiences and volunteers, but the organization ultimately opted for a more corporate-friendly aesthetic—something simultaneously approachable and authoritative.
3. Balancing Casual Warmth with Professional Trust
EcoServants made it clear that they needed a visual identity that appealed to:
-
Community volunteers and families
-
Environmental professionals
-
Corporate sponsors
-
Government grant evaluators
-
Angel investors and long-term philanthropic partners
4. Rebuilding the Information Hierarchy
Drawing on EcoServants’ past experiences (including unsuccessful attempts at minimalization), I decided to respect what the organization had learned over years of trial and error.
Instead of stripping away information, I restructured it.
That led to my key insight:
Use icons under the homepage hero as intuitive, universal navigation anchors.
Since users across all age groups understand icon-based navigation (thanks to mobile apps), this method created a simple, confidence-building interface—one that clearly signposts the website’s essential categories.
This decision ultimately became the backbone of the new homepage structure, influencing typography, spacing, layout, and the design system used across the rest of the website.
Creative Director / Art Director Relevance
This project showcases my ability to guide visual direction through conceptual reasoning, research, and iterative exploration. I blended storytelling, user flow strategy, and nonprofit brand intelligence to deliver a design solution that strengthened EcoServants’ clarity, credibility, and community impact.
My contributions supported both immediate improvements to the homepage and long-term enhancements to the organization’s ecosystem—helping EcoServants better communicate their mission to volunteers, schools, donors, partners, and environmental stakeholders.