ELaw Reskin

5 Day Solo Project

Elaw are a charity consisting of a global group of attorneys, scientists and advocates who collaborate across borders promoting to build a sustainable future by helping communities speak out for clean air, clean water and a healthier planet.

For this solo project, I was tasked with the conceptual reskin and rebranding of the homepage and one other page of my choice accross desktop and mobile view with a primary focus on the UI.

The Problem

User tests and follow up interviews conducted with a group of 6 people suggested that the pre-existing site wasn’t particularly intuitive to manouver through due to the over-saturation of text and unnessisary navigation options. It was made evident that this was the case after asking the participants to complete simple tasks on both Elaw’s website and that of similar charities. 5 out of 6 participants ended spending up to 3 fold the amount of time to undergo the tasks on Elaw’s site compared to the others. The UI was also extremely outdated and monotonous which didn’t at all reflect the progressive, dynamic nature of the charity.

The Challenge

The final site design needed to reflect Elaws’ sentiment and stand pronounced amongst it’s competitors. One of the main way in which I wanted fulfil this challenge was through the use of colour. I’d noticed that a blue and green colour pallete was somewhat of a trope amongst environmental law firms, leading the branding style of of these companies to mesh into one. I decided not to adhere to the monotonous nature of these sites and establish a more diverse colour pallete. I also wanted to steer away from the typical use of visual stimuli used in similar charities which tended to be in the form of either ropy illustrations or baseless images.

Defining The Brand

With all of this in mind, I developed on the brand values which would further aid in shaping the visual tone of the site.

These values ended up being:

Just

Authentic

Disruptive

Empathetic

I then began identifying brand affinities and focused on Lush Cosmetics, Patagonia and Milk Makeup. I chose these companies for 2 reasons:

1. Their moral foundation — All 3 companies are huge advocates for ethical and sustainable practices and base their whole ethos on being environmentally friendly. They prove this in their practices and means of manufacturing products and also all either have associations with environmental charities or/and provide customers with resources to join them in this effort of coming more environmentally conscious.

2. The UI elemnents implimented in the companies and their brand values. — All 3 are asthetically bold, daring and disruptive as a means to push their message.

Analysing brand affinities aided me in forumating goldilocks statements which I would use to influence the tone of voice of the brand:

Disruptive, but not hostile

Just, but not compliant

Down To The Aesthetics

I began mood boarding to further explore how I wanted the brand to be visually represented.

Mix of dark, light and bold colours — Dissimilar to regular law firms which tend to stick to very monotonous colour pallettes, this is done to display the against-the-grain nature of the charity compared to its ‘competitors’. Using varying tones of colour can also help in highlighting key information and make it distinguished amongst other information on the site.

Rather than shoving baseless images onto users’, I wanted to use imagery that was slightly more conceptual to plant a seed of thought and to push the serious issues the charity focuses on in a more fervent way. I did some research on this idea with 6 participants in order to ensure that it would fulfil the role that i’d intended it to. I presented them with 7 pairs of images which were all conveying the same message, one being a photo already featured on Elaw’s site, and another that I’d found online that presented the same concept in a slightly more abstract manner. I’d asked which of the 2 images had evoked more emotion upon presenting each to them, and 6 out of the 6 participants chose the conceptual imagery over Elaw’s pre existing photographs.

I also decided to explore the use of layering text on images as an efficient meant to shift users’ over to important information — Based on competitive research, i thought this would be a good means of displaying hierarchy of information on the site.

Catering To The Existing Audiences

I also wanted to identify who Elaw’s target audiences were as this would be a huge factor in determining the hierarchy of information. After doing an extensive amount of research, I ended up identifying 2 audiences and came up with ways in which I could adapt the site to meet their needs:

Primary Audience — People who want to get involved with the charity but may not have sufficient resources / knowledge to do so

Have information about campaigns that people can get involved in as the first thing that users are presented with upon entering the homepage — Would be best executed in the form of hero sliders which are an extremely bold and eye catching method of drawing users attention to a specific topic. As I was also focusing on the ‘Get Involved’ page, I really wanted to hone in on the different means in which people could help out in the simplest means possible as the current ‘Get Involved’ page was saturated with an unnecessary amount of information and external links which could be a tad overwhelming and possibly result in user drop off.

Secondary Audience — Doners

Include a ‘Donate’ button on the global nav bar which would be fixed upon scroll so users will be presented with the option to donate at any given point of their journey throughout the site. I also wanted to include a section in which users can easily donate directly on the homepage as this wasn’t currently an option on the existing site.

The Solution

I then began creating a hierarchy of which elements on the pre-existing website would be the most important to the user and sketched out a few variations of where the contents should sit within the chosen pages. Below you can see the final lofi sketches I decided upon, which then allowed me to move onto my hi-fi screens. I ensured the content of each page was extremely simple and to-the-point and only included the content that was grately needed, compared to Elaw’s current site which was over abundant in paragraphs upon paragraphs of text.

Donate buttons left right and centre, hard hitting imagery right from the get go and a simple global nav bar.

Homepage:

Get Involved Page:

HWith the hierarchy of the pages now established, I began implementing everything I’d been working on into a hi-fi prototype.

Homepage

‘Get Involved’ Page

Key Learnings

This project definitely helped me realise that experimenting with fonts is absolutely KEY in the UI process. I’d previously not done much research into which fonts pair together, until discovering my new favourite website to use in the UI phase of design, typewolf.com ! Oh, how it saved me on this project. (You can thank me later for the free promo TypeWolf..)

Next steps..

Although the main priority in this project was the UI, I’d also love to explore iterations of the UX of the site in more depth, which would entail further research and user testing. I would also like to work on rearranging a few of the responsive design elements. I was unfortunately rather pushed for time, so didn’t complete this to the standard in which I would have liked to, but alas.