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.
​​
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.
EcoServants Homepage — Before Optimization
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 — 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.