EW front CS.jpg

East West Organization

Redesigning the landing page for a nonprofit organization

TEAM

Solo

FIELD

UI Branding

YEAR

2020

DURATION

1 weeks

TOOLS

A BIT OF CONTEXT

During the UX course in General Assembly, I had one week of intensive Visual Design classes with an expert in the field teaching Design Principles.

Alongside the classes, we had a workshop where our task was to improve the UI of a nonprofit website.

We had to completely ignore the UX process and concentrate only on the visual aspect of the website while maintaining its function.

EAST WEST ORGANIZATION

I picked East-West Organization, an NGO providing treatment for people recovering from substance abuse by organizing the transfer to Thamkrabok monastery in Thailand to help them recover from addiction.

 

How to Design for an NGO

THE FACTS

Now I am a big fan of facts and statistics so I couldn’t help but research something that would help me in solving this issue.

 

When I think about the general behaviour that people have towards charities they don’t know is mistrust, they don’t know where the money will end up. This will favour big NGO that has a name for themselves now and smaller organizations will suffer. Following this idea, I had to make the website as reliable as possible and this fell easily in the visual design.

 

ATTRACTIVENESS BIAS means that we attribute unrelated positive qualities to beautiful things. It’s true for people, architecture… so why not for nonprofit websites? 

 

YouTube UX Researcher Javier Bargas-Avila determined in a 2012 study that people form aesthetic reactions to a web page in the first 17 to 50 milliseconds after exposure. These impressions might not register, but they do impact behaviour. For example, if a site loads slowly and the brain reads the first items that load as "off-topic" the user may navigate away immediately rather than wait for the site to load.

Also according to Blue Corona, 48% of people cited a website's design as the number one factor in deciding the credibility of a business.

WHAT NOT TO DO

It soon dawned on me that this wasn’t just an exercise in making something pretty, but a nonprofit website had to follow certain rules. It had to convey the idea of a charitable organization first, it always had to have a DONATE button very easily accessible and something that felt was relevant to this case was that it could not fall in the category of hip and trendy yoga retreat. I wanted to steer away as much as possible from that idea and if people happened on the website and were confused for a bit whether it was an East London Meditation studio or a nonprofit, I would have failed in my mission.

Rebrand and Identity

 

THE BRAND

The first step was finding a voice for the brand, deciding what it was and what it wasn't through a quick brand definition exercise. I wanted to convey the idea that it was something inclusive, but that at the end of the day, it was up to the people undertaking this journey whether they wanted to carry it out completely.

Moodboards really helped me figure out the direction I wanted to take. I wanted to have a feeling of rebirth and relaxation, I wanted to concentrate on the new possible life for the people that would have undertaken this path rather than their past life.

STYLING IT

The inspiration for the colour palette came while browsing the current website. I came across these mineral paintings created by patients of the Monastery. 

The colours are produced from minerals extracted from various rocks and stones that are found in the mountains surrounding the Monastery and the effect is striking.

This unique art was developed by the late Luang Por Charoen the previous Abbot of Wat Thamkrabok in Thailand.

It was my first time deciding a colour palette for pretty much anything, and I'm not ashamed to admit that I had thought it was a much easier task than it actually turned out to be. I went back to it many times throughout the project, changing the colours until I finally felt that what I had in mind reflected what I could see on the screen.

I found out I genuinely have fun naming colours, for this, I’ve started using Coolors.co, I find them using the same website for my naming needs helps me with consistency throughout projects.

The typography was a whole new world. I didn’t feel as comfortable with typography as I did with colour schemes. My past as a photographer already trained me in creating moodboards and good colour combinations so I was more comfortable in that field.

This was a 1 week-long project so I couldn’t delve into the world of typography and learn about it as I wished, so I decided to go for something understated and simple. In doing it, I made myself a promise to get to know more about the world of typography.

What I could do concerning typography was making sure that everything so readable, thanks to a Sketch plugin, Stark, I could very quickly check if this was the case. I made sure everything was Triple A compliant so that I could provide an inclusive UX.

 

The Iterations

PLAYING WITH VECTORS

This was very much a project for experimenting, so I decided to take to Sketch one of my all-time favourite tools in Photoshop, the vector tool.

The original website had a sunrise over a landscape in its banner and I liked the continuity of that message. I decided to create a vector landscape to symbolize rebirth.

I added gradients to the shapes later, when after seeing how the version with block colours was a bit too harsh for what I had in mind.

USER TESTING

This was one of the first screens that I tested and almost everyone I tested with advised me to get rid of several elements. My personal taste always veers towards the Baroque ideal of Horror Vacui and further away from minimalism, so I knew they were right.

 

Sometimes it's hard to get rid of something you feel strongly about, but I hope I'll never be as complacent as to believe that my first idea is the best and final one, and so far it was only through deleting and redoing that I got to some work that I was actually proud of.

 

I created 3 screens for this project, the desktop and mobile homepages and one of the pages explaining the research behind the organization.

What I’ve learnt from this project

This project gave me a great direction at what to concentrate on. It might sound cliche but I love learning, but when you are in a new field, sometimes it is even hard to know what to learn and where to do it. This week spent immersing in Visual Design gave me so many tips and doubled my reading list. I can happily say that I am reading up and experimenting now with typography (reading “Just My Type” by Simon Garfield and doing the “36 Days of Type” challenge.)

I’ve learnt that my previous experience as a photographer is much more useful than I thought. I am already trained to notice small details, to show my work to other people and get feedback from it and create compositions, not to mention finding a nice balance between what clients want and what is actually possible. 

This was eye-opening to the power of research and testing. Following the brief, I didn’t do any user research and then I tested it when it was already somewhere between mid and hi-fidelity. This was supposed to make me save time, but the time that I supposedly saved in not doing research, I gave back in redoing big chunks of the work. It was a great teaching experience and I hope I’ll remember it if I ever think about taking shortcuts to get to the solution faster in the future.

Thanks for your time!

I always appreciate any feedback and I would love to hear what you think :)

Say Hi!

I love chatting over a cup of coffee.

(or over Zoom)

Drop me a line and I'll get back to you :)