UI/Branding case study for the non-profit organisation website redesign

Kate Sniegocka
Apr 23 · 8 min read

UI/Branding case study for East-West Organization charity website re-design

Image for post
Image for post

OVERVIEW

Total project time: 5 days

Location: General Assembly, London

Challenge: The brief was to improve user experience and accessibility for East-West Organization charity existing website by developing branding and visual style.

EAST-WEST ORGANISATION

Many charity websites are poorly designed due to the lack of funds, but like any other websites, they are the face of every organisation. They aim to communicate what are the goals of the organisation and find people that would support and get involved in helping to achieve them.

Image for post
Image for post
East-West Organization original website

Problem: Looking at the East-West website, quickly became clear that there were many design challenges I will have to solve to improve the user experience:

  • The brand was very poorly defined; brand values were not clear and users had to read long paragraphs of text to understand what the charity does and who are their clients and supporters.
  • No personality would communicate through the website; images were very small and often too direct, there was no colour scheme and consistency throughout the design.
  • The website was very text-heavy and the priority was placed on the text with hardly any visual support.
  • The logo was poorly designed and didn’t reflect the professionalism of the organisation.
  • Hierarchy of the information wasn’t very clear; important elements like “join us” and “donation” buttons were misplaced and easily missed by the users.
  • The overall feedback from the users was, that this could be a website of many other organisations; religious organisations, meditation classes providers, travel bloggers at it lacked clarity in a way the information was presented.

HOW DID I APPROACH THE PROBLEM?

Image for post
Image for post

BRAND VALUES

My design process started with creating a brand personality framework to define what were the main values for the East-West charity, and how it should be positioned as an organisation.

Who are they?

Going through the process of trying to defined and name their main brand values brought me to the conclusive few words that best described their personality: Community, Discovery, Openness, Support and Trust.

Who are they and Who are they not?

community but not an institution

discovering but not expressing

open but not spontaneous

supportive but not parental

trusty but not nurturing

BRAND POSITIONING

How is East-West positioned as a brand?

Image for post
Image for post
Brand positioning chart research exercise

My key discoveries were; the brand had an informal feel, its look and tone of voice were simple and gentle. It looked traditional, warm and quite colourful. The single words that best described what the charity did were holistic intervention. I used them to create some associated words that will later help me in my design process.

Image for post
Image for post
Words association that helps to define the look and feel of the brand

MOOD BOARD

I decided to create a mood board based on those the associated words and was curious what kind of look and feel this will create. As a result, I now had two different types of imagery. One, based on the word interventions, was very much people-focused and based on skin tone colours. There were warm; hues of brown, yellow and orange, but at the same time, some had that slightly disturbing feel, especially proximity portraits images. The second one representing word holistic was calm and much more relaxed, mainly in green and blue colours and pastel shades.

Image for post
Image for post
Mood board associated with the word “interventions. ”
Image for post
Image for post
Moodboard based on the word “holistic. ”

This process resulted in the idea of holistic intervention as a journey or a path that people take on while they receive support from the charity.

COLOUR SCHEME

There was a clear colour theme created from the mood board; a lot of repetition of green shades and their gradients with accents of natural beige and brown hues. Based on which, I started to define the colour scheme for the brand and website.

Image for post
Image for post

TYPOGRAPHY

The East-West Organisation combines two different methods to help people heal from addictions: conventional western treatment with eastern philosophy and meditation. My thought was to best reflect that within the design, typography should be quite simple, minimalistic and have a light feel. I chose Barlow as the main typeface, slightly rounded, non-serif font with a large family option.

Image for post
Image for post
Barlow font test on different colour background assessing different options for font sizes

IDEATION

The previous word association exercise for the keywords of holistic intervention has already pointed me out at some possible shapes that could be used as one of the main design elements. They were: a circle, a group of circles, sun etc. I started to sketch some ideas to visualise the concept of holistic interventions as a journey/path using simple graphical shapes.

Image for post
Image for post
Brainstorming sketches

Logo Design

Original East-West charity logos

Based on the sketches and colour scheme, it became clear that I already had everything I needed to convey brand values into a logo design. I have chosen to use a circle as the main design element, which consistently appeared during the whole process.

The bigger circle represents the community, which supports the individual in his journey to recovery. Also, there is an element of trust and community not being parental or nurturing. So the individual, which is represented here as a smaller circle, is freely positioned within the community. The letters e and w are written in a style of the Easter calligraphy. Those letters support the small circle (an individual), which freely lands on it, but not quite.

Image for post
Image for post
Logo re-design ideas
Image for post
Image for post
The final new logo design

Wireframes

Having my branding and design elements in place, I could now start thinking about the website layout. I sketched some ideas and create digital low-fidelity wireframes. I have decided to keep consistency with the circle theme throughout the pages. As a result, I placed images inside a circle shape cutouts. I also wanted to have a lot of white space within the layout to give the feel of lightness and position paragraphs of text quite freely within the grid, rather than fill the whole columns with text in a very restrictive way.

Image for post
Image for post
Wireframes prototypes in different stages

PROTOTYPE USER TESTING

Testing low to mid-fidelity prototype design

Problems discovered during the testing of the prototype:

  • No clear indication of where the users are on the site at any time.
  • Support us button placed on the left-hand side was standing out too much and wasn’t blending into the rest of the design.
  • Logo positioning below the global navigation.
  • Paragraphs of text to short within the prototype design to be able to reflect the actual length of text that will then need to be implemented.

Solution:

  • The breadcrumbs were added onto each page to help users navigate confidently through the pages. I found the inspiration for this navigation element within the journey theme and decided to place it alongside the left corners of each page and make it continue as you scroll down.
  • Support button was moved to the right side of the global navigation options and kept on top of the content hierarchy by using the outline in saturated contrasted colour.
  • Logo positioning was changed to sit within the global navigation bar and placed to serve as a home button for the users to always be able to navigate quickly back to the top page.

High-fidelity prototype design and testing

When moving onto the high-fidelity prototype, the biggest challenge was to show the brand personality while keeping the website design simple and clear at the same time. I decided to use blurred background images to create a mood and texture, place the main focused imagery within the consistent circles’ cut-outs and show the content flow as a process.

So when the user scrolls down and goes through different pages, it will be taken on the journey from East-West Organisation introduction, through research information about the problem, treatment options page, down to the final recovery. The mood of the pages will also change depending on the content.

Image for post
Image for post
Getting feedback on high fidelity prototype

NEXT STEPS

Based on the feedback, I will be changing the design and positioning of the search button, which was difficult to find by the users. I’m also planning re-adjusting the text on breadcrumbs to start from the top and move them towards the bottom on next pages. Also, make the logo to sit in the left corner of the navigation bar, and work on the footer design and typography.

Once creating a clickable prototype, I will need to consider how each page locks down within the prototype, so the flow of the pages is clear and global navigation bar sticks to the top of the page while scrolling down.

Final Design

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

UsabilityGeek

Be a usability geek: Make better products, apps, websites…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store