UI/Branding case study for the non-profit organisation website redesign
UI/Branding case study for East-West Organization charity website re-design
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.
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.
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?
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
How is East-West positioned as a brand?
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.
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.
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.
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.
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.
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.
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.
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.
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.
- 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.
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.
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!