top of page
1.png
1.png

Elaw

Rebrand And Reskin 

I worked in as the solo UI designer to rebrand and re-skin an existing environmental law charity website, elaw.org

Mockup.png

My Role: Researcher, UI Designer

Tools: Sketch

Duration: 5 days

If you'd like to read the full 7 minute case study on Medium..

The Challenge

​

Rebrand and re-skin two website pages from the current ELAW website. Use a responsive web approach to design across two viewports, focusing on mobile first. 

​

​

The Problem

​

Improving the UI of charity website, ELAW, to make it more approachable and trustworthy for users.

Deliverables​

​

  • Competitor Analysis

  • Brand Values

  • Brand Personality

  • Brand Affinities

  • Word Association

  • Mood Boards

  • Low-Fidelity Wireframes

  • High-Fidelity Wireframes Across 2 Devices

Outcomes

​

  • Responsive website design for 2 pages completed across 2 devices in the space of 5 days.

  • Project completed on time.

  • Positive feedback: 'I loved how you used colour as a point of difference and to aid in the idea of disrupting nature. And your want to include hard hitting conceptual imagery that again gave your outcomes a very different point of view it showed how you’re a lateral thinker and this will always win in my opinion.'

Overview

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.

I was the sole UI designer for this project. Competitive analysis on direct and indirect competitors helped give an idea of how other responsive websites were laid out. Creating brand values helped identify key words which aided in creating mood boards and, ultimately, create final high-fidelity wireframes for the rebranded and re-skinned ELAW website.

Rectangle.png

Discover

The Current Site

I began by identifying the potential areas of improvement. Analysis of the website, user tests and follow up interviews conducted with a group of 6 people helped me pin point the main necessary areas of change:
​
  • Unintuitive navigation
  • Inexpressive colour scheme
  • Lack of hierarchy
  • White space imbalance

Competitive Analysis

The final site design needed to reflect Elaws’ sentiment and stand pronounced amongst it’s competitors. In order to do this, I needed to steer Elaw away from some of the tropes which i’d noticed amongst environmental law firms which the branding style of of these companies to mesh into one.

Those tropes being:

1. Blue and green colour pallete 

​

2. Use of visual stimuli used in similar charities which tended to be in the form of either ropy illustrations or baseless images.

1*phI7H4kufMwLIWnI9r8bXw.png
Rectangle.png

Define

Following research, I sought to outline ELAW's values which could give the organisation a personality. I chose 4 words which I believed the brand was emblematic of and should wholly represent on their website. The words I was satisfied with were: 

​

Just, Authentic, Disruptive, Empathetic

​

​

​

Brand Affinities

I began identifying brand affinities based on these defining words 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 elements implemented in the companies and their brand values  —  All 3 are asthetically bold, daring and disruptive as a means to push their message.

Screenshot 2021-01-21 at 13.29.21.png
Rectangle.png

Develop

Analysing brand affinities aided me in forumating goldilocks statements which I would use to influence the tone of voice of the brand. The statement I settled upon was:

​

'Disruptive, but not hostile. Just, but not complaint.'

​

This aided me in further exploring how I wanted the brand to be visually represented which I did through the means of a moodboard.

Mix of dark, light and bold colours 

​

  • 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.

 

Conceptual imagery

​

  • Helps push the serious issues the charity focuses on in a more fervent way.

  • Research conducted with 6 participants clearly indicated that this means was indeed successful in fulfilling this role.

​

Layering text on images 

​

  • Efficient meant of shifting users’ over to important information. Based on competitive research, this would be a good means of displaying hierarchy of information on the site.

elaw moodboard 2.jpg

Catering To Elaw's 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 

- Hone in on the different means in which people could help out in the simplest means possible on the ‘Get Involved’ page

 

Secondary Audience -  Doners

-  Include a ‘Donate’ button on the global nav bar which would be fixed upon scroll — users will be presented with the option to donate at any given point of their journey throughout the site

- Include a section in which users can easily donate directly on the homepage as this wasn't currently an option

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. 

Homepage

'Get Involved' Page

elaw homepage lofi.png
elaw get involved lofi.png
Rectangle.png

Deliver

With 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

elaw11.png
ELAW 3.png
ELAW 2.png
elaw 4.png

Next Steps 

Although the main priority in this project was the UI, I’d love to be able to itterate further on the UX of the site accross the 3 different platforms as I believe there is always room for further iteration in this regard. This 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. 

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. Trying to find a font that paired with Bebas Neue consumed around 3 hours of my time until font wolf aided me in making a decision within a tiny fraction of that time! (You can thank me later for the free promo TypeWolf..)

bottom of page