Changing the Scenery
A one week project sprint to re-brand and re-skin an environmental charity website
The Brief
My challenge, during a one-week visual design sprint, was to rebrand and re-skin two pages from an existing charity website, make it responsive across three devices (mobile, tablet and desktop) and produce a style guide.
I chose Environmental Law Alliance Worldwide (ELAW), a charity that “helps communities speak out for clean air, clean water, and a healthy planet.”
I was the sole UI designer. My responsibilities included competitor research, forming brand values, a brand personality, mood boards, high-fidelity wireframes and a style guide.
The Website
Analysing ELAW and selecting two pages to redesign.
My search for ELAW took me to their website. First impressions — not great. It felt outdated, with grainy images, a confusing layout and text…so much text. I selected the two pages I would focus on, seen below:
Creating brand values and giving ELAW a personality
Producing 5 brand values, goldilocks statements and finding brand affinities
Competitive research into direct and indirect websites helped produce 5 brand values.
To articulate these values, I formed Goldilocks statements (used to ensure the site fell within certain margins, as opposed to reaching extremes).
- Determined but not obsessed.
- Knowledgeable but doesn’t show off.
- Passionate but not obsessive.
- Making a difference but not forceful.
- Resourceful but not boastful.
Brand Affinities
According to UX Matters, a positive user experience has a direct correlation to positive brand perception. Taking this into consideration, I used a brand affinity exercise to help define ELAW.
Mood Board
Gaining inspiration for overall the overall look and feel of ELAW.
Using the brand values and affinities I created a mood board. This would help inspire design decisions, colour palettes and typography.
My key words produced a lot of dark shades, with some lighter reds, greys, blues and greens, and bold typography.
Darker tones usually give impressions of strength, elegance and sophistication. Subtle lighter colours, such as a green, are often associated with generosity, peace and support.
Giving ELAW its makeover
Initial, sketched, wireframes helped me figure out a new layout for the website:
High-Fidelity Wireframes
With time at a premium for this project and wanting to create the highest quality outcome I progressed straight onto high-fidelity wireframes. The mood boards, brand values and competitor research helped with the overall design.
Iterating to improve
Developing the logo and “Latest News” layout
Several changes were made during the process, beginning with the logo.
Using the original ELAW logo as a base, my idea was to have earth held in the palm of a helping hand. Unfortunately, especially on mobile, this logo became unrecognisable when shrunk.
After much thought and development, I came up with the final logo. Something simple but with a deeper meaning. I used a white circle to portray earth. The light green represents ELAW aiding the health of planet, one small step at a time. Still a long way to go, but with donations from people, they can accomplish their goals.
Changes were made to the layout for the “Latest News” section, making all the imagery consistent and including a more welcoming message.
The Final Wireframes
After gaining feedback and iterating, the final design was produced:
I then created the second page, “Mission and History”. I reduced the overwhelming siege of text from the original page with a more visually appealing timeline:
The Style Guide
Helping Communicate the design standards in a succinct way to future designers.
As part of the brief I produced a style guide, as seen below:
Next Steps
If I were to further develop the website, I would:
- Usability test the site navigation.
- Add a back button and breadcrumb navigation.
- Iterate, iterate, iterate.
Conclusion
Overall, a really awesome project. Initially, I felt apprehensive about my UI skills — producing a responsive website and using colour in a way that would work across all screens, providing the right message, would be a challenge. However I quickly found that using tools such as the brand values, creating a brand personality and producing mood boards helped more than I could have imagined. Once high-fidelity wireframes were complete I was confident ELAW could safe the planet.
Key Learnings
- Responsive design — Using proportion-based grids to rearrange content made for quick mobile, tablet and desktop design updates and layouts.
- Style Guides — Producing a style guide was something new to me. But learning that producing these can be incredibly useful for future designers and developers coming to the project will ensure I always keep track of what I am producing.
Please feel free to connect or message me on LinkedIn!
