Kicking Off
We Act For Environmental Justice are a charity who's mission is to help people of colour and those from low-income backgrounds to have a say in the creation of environmental health and protection policies in New York City.
To begin the project, I reviewed We Act's existing website, as well as some comparative sites, in order to understand their design language, brand identity, and the existing design precedents of sites for environmental charities:
Understanding Identity
I created a design brief to help me scope in what this project would mean to me, then explored what the brand could mean through word associations and mood boarding
What am I making?
A homepage for WE ACT, a charity focused on environmental justice
What is my target audience?
Lower-income people and people of colour in New York
Why am I making it?
To communicate the message of the charity more clearly
What are the main aspects of the brand tone?
Community spirit, empowerment, informant, determined, natural, environment-forward, modern, confident
Who are our main "competitors"?
https://apen4ej.org
https://climatejusticealliance.org
https://labucketbrigade.org
What differentiates us?
Primarily differentiated by location and target audience; the others focus on different geographical areas - WE ACT is very focused on NYC + people of colour/low income people
Ground Zero
Next, a style guide was created, and I mocked up some initial ideas for what the site could look like, designing with a mobile-first mindset. I drew all of the colours from the moodboard I created earlier on in the project.
Above: I experimented with a couple of layouts for the hero carousel section on mobile.
Below: I also created a prototype for a donation section!
Above: A section of the desktop low-fidelity mockup containing the footer
Feedback and Iteration
I partook in a critique session with some of my fellow course mates, where I received a lot of feedback on my designs and emerged with a clear understanding of what I had to improve
Cecile
"Lovely and sleek, but unsure that without the text I would know it was for We Act"
Lester
"I think the Read More button feels a little lonely and floaty on the right - it might be more comfortable with the titles on the left"
Chloe
"I like your colour palette - feels like you're in the middle of a forest"
Tom
"Could you try making this section not split in the centre? Just a little out of centre might look nicer/less rigid"
Sapphi
"Could the Stay up to date section stack on top/underneath like it does in the mobile screen? - feels like it doesn't need as much of the screen space and could give the donation sections more space"
Lucy
"The hierarchy of this isn't quite working for me, I am not sure I would not know what the site is immediately if I didn't look down to the 'our mission' bit - maybe a one line headliner would be useful?"
Above: A progression of iterations of the donation section of the mobile version of the site
Above: Desktop mockup of the hero section
Below: A revised version of the newsletter subscription section
Below: I also tweaked some of the colours in the colour scheme. I wanted the yellow colour - "Immolation" to look more akin to an NYC taxi, so I made it brighter and more saturated to reflect that
Final Designs
I partook in a critique session with some of my fellow course mates, where I received a lot of feedback on my designs and emerged with a clear understanding of what I had to improve
