The Face of an Organisation
Reskin of a non-profit organisation homepage
Several 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.
Project Overview
Concept Client
East West Organization, a UK based non profit organisation that offers a holistic intervention for the prevention, treatment and recovery from addictions and attachment.
Time
1-week solo project
My Role
UX / UI Designer
Techniques Used
Market Research, Brand Position, Brand Values, Brand Personality, Logo, Layout, Style Guide, Colour Scheme, Mood Board, Typography, Imagery, High Fidelity Prototype, Responsive Mobile Prototype
Tools
Sketch App: UX / UI Design
Adobe Illustrator: Visual Design
Miro: Research Material
Keynote: Presentation Material
Pen and paper: Wireframe and Sketching
Problem
I did an evaluation of the East-West website, to get an idea of the main pain areas. It became clear that there were many design challenges I would have to solve to improve the user experience:
-
The logo was poorly designed and didn’t reflect the professionalism of the organisation.
-
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.
-
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 approach
My second step in the design process started with creating a brand personality framework to help me define their values and how they’re positioning themselves as an organisation. 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 words that best described what the charity did were trust, spiritual community. I used them to create some associated words that will later help me in my design process.
Homepage of East West Organization
Overview
As a third project at G.A, the task was select one out of 5 organisations, to reskin and potentially re-brand the website without changing its core values. The one-week project focused solely on visual design, concentrating on the visual design process, responsive and adaptive design.
My Role
Started the process working as a team conducting the competitor research, but I soon realised that the rest of my team had a niche market and persona in mind which wouldn't give a realistic foundation of research. I then decided to go solo from that point and I'm quite happy I kept my mind clear from biases that would've changed the outcome of the final product.
My Key Deliverables
Discover
-
7 user-interviews to understand the real-world and online shopping habits of a wide range of demographics.
Define
-
Synthesised the findings from the interviews and created a detailed persona to underpin the design process.
-
Conducted a detailed analysis of the pet supply market, understanding the different options available to users, key features of the range of competitors, and gaps in the market.
Develop
-
Created paper prototypes that I user-tested and integrated into low-fidelity wireframes using Sketch.
-
Conducted remote user testing on the prototypes to test functionality, usability, and accessibility to create a workable, mid-fidelity product.
Deliverables
-
Competitor analysis of the online pet shop market to gain an understanding of where Pets 4 Life should aim to be
-
Usability testing to gain insight from users to inform the design of the product
-
A mid-fidelity clickable prototype of an e-commerce website, including relevant features
My Key Learnings
-
The importance of translating research findings into product decisions and feature prioritisation.
-
How to build feature analysis tools to understand what a market-specific product should, could, and won’t have.
-
The basics of user-testing, building a script, and tasks that would allow me to gain an insight into the usability of a product.
-
The necessity of creating accessible products that are mindful of the needs of users with specific disabilities.
-
The logic of navigation and site architecture and creating short paths to guarantee uninterrupted considerations of the purchase.
Recommended Next Steps
-
Develop a responsive mobile version with integration in other mobile content browsing apps.
-
Design user onboarding frames to familiarise them with features within the site.
-
User test with screens relevant to secondary users (e.g. friends and family of the pet owner persona) to further iterate user journeys and observations.
Reflection
It was an eye-opener how UX is one of the defining factors in the successful development of an eCommerce marketplace. As my first website project, it taught me to balance the user needs with the priorities of the business and the market in mind. This to keep the focus of what to include and what not. While iterating through the design process, I learned that people will navigate through your design in unpredictable ways and it’s important to get feedback from the users and implement the changes that eliminate ambiguity.
Brand values
Based on their values and the conclusive words that best describe their personality, I could then identify who they are and not. Setting this early in the process, helped me stay focused on their values and in comparison to other brands that share their brand affinities. This based on the words I selected; trust, spiritual and community. I found that the buddhist centre, Shiri Dechen Dharma Community, shared the strong community values of inclusivity. The Mindfulness App offering meditative and spiritual services and advice. A place of trusted knowledge like The London Library helped me create a clear image of what East West were positioning themselves as a brand.
When you are ready to take a step from addiction, we will be ready to go on that journey of recovery with you
Voice descriptors; A website’s tone of voice communicates how an organisation feels about its message and it enables brands to have an conversation with their users. With the help of the values and the word association tool helped me set the mood of the message I felt was right for East West. I felt that it was important to include how they have the tools to help people, but anyone with an addiction needs to take that first step themselves. Communicating community and expertise but with an assertive tone.
Mood-board
I decided to create a mood board based on the associated words, meanwhile being cautious to keep it conventional and grounded. I wanted the site to communicate the values and being mindful about the using images that gave the perception of a spa. I wanted to focus on their mission of ‘reaching out’ and ‘giving a helping hand’ as a image of community and trust. I found that holding hands gave a strong and calming definition, which led me to make own iterations of it and elaborate on combining images.
The warm hues of monks clothing was something I felt would be right as a theme throughout, but I needed a contrast in images or colours as balance between the impression of east and west.
Images that were representing the word spiritual was calm and much more relaxed, mainly in pastel shades and earthy tones.
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.
I decided to create a mood board based on the associated words, meanwhile being cautious to keep it conventional and grounded.
I selected a colour palette that was earthy, neutral hues that gave the impression of natural food and nature dyes. A darker tone of teal as a contrast together with cerulean and mustard gave a balanced touch and I felt inspired to play around with them when making my iterations, as they all work together really well.
Ideation
The previous word association exercise for the keywords of trust, spiritual, community had already pointed out at some possible shapes that could be used as one of the main design elements. They were: hands, balancing rocks and people in groups. I started to sketch some ideas to visualise the concept of my words as a journey/path using simple graphical shapes.
Logo
I choose to use a circle as the main design element, which consistently appeared during the whole process. The 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 hand, is freely positioned within the community holding on a helping hand representing the charity.
Illustrations
When I started working on the logo, it was easy to continue illustrating as I couldn't find stock images that worked well together with the aesthetics I had in mind.
Typography and Style guide
Before / After
Homepage - Donate Button / Contact
Before / After
Homepage - Navigation
Before / After
Education and Prevention Page
Final design - Mobile Prototype
Key Learnings
Improve the landing page
Sounds obvious, but this is where UX begins. A good UX design on the home or other landing pages can help ensure that visitors stay on the charity website. It can also be the difference between a brief and unproductive visit and one which ends in them making a donation.
Making sure the charity website is mobile friendly
Few things are less conducive to good UX than a website viewed on a mobile device that displays incorrectly. This may mean that navigation is difficult or impossible, or that when a visitor is finally at the point of making a donation, volunteering to help, or some other action, they are unable to do so because a form is unusable.
Ensure that the website is accessible to everyone
During my market research, most charities want to make their website accessible to people with disabilities such as visual impairment to ensure that no-one is excluded. It is important to ensure that anyone is able to visit the site, and make a donation, regardless of any disability they may have.
Next Steps
Listen to users - User Testing
The way to build up such an understanding is to listen to what they have to say about your charity website: what they like and dislike about it, what they find difficult, slow or frustrating to achieve, and what steps they think would improve things.