top of page

WeActForEnvironmentalJustice

A UI Case Study | Solo Project | 
Project Overview

Project length: 1 week sprint

 

Goal:

Redesign the user interface for WeActForEnvironmentalJustice (WeAct), focusing on reimagining the organisation's visual identity across different screen sizes while maintaining existing functionality and content. I had creative freedom to transform the aesthetic to match the company’s mission of empowering communities of color through environmental justice.​

Roles:

  • UI/Visual Design

  • Branding and Identity Design

Tools:

  • Figma 

  • Optimal workshop

  • Google Forms

  • Adobe XD

DISCOVER

Research – Understanding the Why

Why I Started with Research:
I knew that to redesign WeAct’s website successfully, I needed to first understand its mission, its target audience, and its position in the broader landscape of environmental organisations. Without this foundational knowledge, I risked creating a design that didn’t resonate with the community it serves.

​

WeAct’s Mission:

WeAct advocates for environmental justice, focusing specifically on communities of colour. This focus sets WeAct apart from competitors who usually take a more general, global approach to environmental issues. Understanding this allowed me to design a site that reflects the unique needs of their community.

​

Competitive Analysis – Why I Did It:​

I analysed competitors to understand what made their websites effective. This helped me recognize common design trends in the environmental sector and assess what works. I quickly identified that while their designs were modern and functional, they often lacked warmth and accessibility for a broader audience.

Key Findings:

  • Competitors’ Websites: Many of them followed similar design patterns: dark palettes, minimalist typography, and a sense of urgency.

  • WeAct’s Difference: The existing WeAct site was missing a visual identity that spoke to the community-first approach that sets them apart.

This gave me a clear sense of why the redesign was necessary: WeAct needed a fresh visual identity that maintained the seriousness of their mission but also felt more accessible, human-centered, and engaging.

DEFINE

Why I Focused on WeAct's Community-Focused Mission:

Knowing WeAct’s core mission of empowering marginalised communities allowed me to design a website that was warm and welcoming, yet professional and action-oriented. I knew that the design needed to balance seriousness with approachability to resonate with both activists and everyday individuals.

Brand Personality Map – Why It Was Key:

I created a Brand Personality Map to clarify WeAct’s tone and positioning. This exercise helped me articulate the organisation's personality traits:

  • Friendly and Comforting – for community members who may feel excluded by the traditional environmental discourse.

  • Serious but Accessible – communicating the importance of the cause without overwhelming users with complexity.

By mapping out these traits, I could ensure that the design would reflect both WeAct’s mission-driven values and its local, human-centric focus.

Why I Used the Brand Personality Grid:

Using a Brand Personality Grid to compare WeAct with its competitors gave me insights into where their current website stood. It helped me position WeAct’s new identity in the market. WeAct needed to stand out as both trustworthy and community-focused, while not losing the seriousness of their work.

DEVELOP

Colour Palette – Why I Chose Earthy Tones:

I selected earthy tones like deep greens and soft beiges, inspired by nature, to evoke feelings of calm and growth. These colours not only spoke to the environmental focus of the organisation but also communicated trust and warmth—essential for a nonprofit serving communities often left out of the conversation.

The muted yellow and red accents were chosen strategically to highlight calls to action (CTAs) and draw attention to key areas without overwhelming the user. I wanted the colours to not just stand out, but to feel organic and purposeful.

Typography – Why I Chose a Balanced Typeface:

Originally, I considered a playful font, but after reconsidering the demographic—activists, community members, and environmental enthusiasts—I knew the tone had to strike a balance. The rounded sans-serif font I chose communicates approachability and clarity without sacrificing professionalism. It feels friendly, yet serious, which was important for establishing trust and ensuring accessibility.

User Flow & Layout – Why I Prioritised User-Centered Changes

In redesigning the homepage and news page, I kept one key principle in mind: the users’ journey should be clear and intuitive.

  1. Homepage:
    The original homepage buried the “Our Mission” section too far down. I elevated this to the top to ensure users immediately understood the core purpose of the organization. This change was grounded in the importance of first impressions—users needed to feel connected to the cause from the moment they landed on the page.

  2. News Page:
    News is central to WeAct’s mission, yet it was hard to find. I simplified the navigation structure, breaking down news into digestible sections with larger images and clearer CTAs. This was done to ensure that users could quickly access the information they care about most—whether that’s the latest environmental policy updates or upcoming events.

I didn’t just change the layout; I made strategic content decisions to ensure the site communicated WeAct’s work more effectively and powerfully.

DELIVER

UI Prototyping – Why This Approach?

Once I had crafted the wireframes and UI components, I used high-fidelity prototyping to bring the designs to life. But why did I prototype instead of just showing static mockups?

  • Interactive feedback is essential in understanding how users interact with a website. By developing the prototype, I could simulate the user journey and ensure my design decisions weren’t just theoretical—they needed to be tested in real-world scenarios.

Iterative Design

I wanted to test my designs, even within the tight timeframe. By seeking feedback from peers and reviewing the usability of key elements, I identified areas to refine. For example, I adjusted button placements and text hierarchy based on feedback that users were struggling to find key actions like donations and event sign-ups.

​

​

Next Steps & Ongoing Considerations

Given the 1-week sprint, I didn’t have time to conduct full user testing, but I definitely prioritized it as the next step. Why? Because user feedback is critical. It would allow me to:

  • Validate design choices to ensure that the website is intuitive for WeAct's diverse user base.

  • Ensure accessibility for all users, including those with disabilities, ensuring WeAct’s message reaches everyone.

If I had more time, I would also conduct A/B testing on specific elements (like the CTA buttons) to see how small tweaks might increase engagement.

 Key Takeaways – Lessons Learned

  1. Design Decisions Are Driven by Strategy, Not Just Aesthetics
    Every design choice I made—from colour selection to layout adjustments—was grounded in user needs and WeAct’s mission. I learned the importance of designing with intention, focusing on both the visual identity and the user’s journey.

  2. Adaptability is Crucial
    The project taught me how to adapt to tight deadlines and how to pivot when needed. I had to make strategic decisions about where to focus my time—like improving navigation over unnecessary design flourishes—because clarity and functionality were paramount.

  3. Collaboration with Users is Key
    Even in a short sprint, iterative design and user feedback are essential. They allow for improvements that ensure the design is intuitive and meets user needs effectively.

Thank You!

Thank you for reading through my case study. I’d love to hear your thoughts on the design decisions I made and any suggestions for future iterations.

​

​

​

bottom of page