Case study: Redesigning the UI for a charity website
A visual design case study | Unique Home for Girls charity, who take in abandoned children in India
The Brief
In the second week of Visual Design teaching, I was working on a 4 day sprint for a concept project to re-skin two pages for a charity.
We were to keep the functionalities, structure and content the same as the site, and only change the UI and branding, redesigned for 3 viewports.
I decided to choose a charity I have personal connections with, and planned to visit during my sabbatical year but Covid-19 restrictions meant this was not possible!
The Charity
Since 1980, over 40 million girls have been classed as ‘missing’ in India, they are selectively aborted, neglected or even murdered. 11 million children are abandoned in India every year, 90% of these children are girls. The driving force behind these staggering numbers is the heavy burden of a wedding dowry, which many poor families simply cannot afford.
Unique Home in Punjab, India, was set up in 1993, and has taken in and is raising over 60 abandoned, unwanted or orphaned girls. Unique Home has established a safe home for the girls where they feel loved and cherished, and are given everything they need to thrive.
Unique Home has a dedicated UK website, which is run by volunteers based in the UK, and allows for donations in GBP (rather than Indian Rupees, which their India website requires.) I decided to focus on this website for this project.
How did I approach the problem?
Many charity websites are poorly designed due to lack of funding. As it is the face of the organisation and a destination for donations, it needs to reflect the goals of the charity and encourage people to get involved.
The existing site
Looking at the existing Unique Home for Girls website, it was immediately clear that there were many design challenges to focus on in my redesign.
- The brand is poorly defined, and brand values are not clear. The charity goals are not set out on the home page, you need to sift through a lot of text and pages to find them.
- The only image on the homepage is blurred over with text, and is partially covered with a video.
- It is really text heavy, with hardly any visual support.
- The hierarchy is poorly defined, with the Logo and Donation button almost floating at the top of the screen.
- Overall, the structure does not make users want to read through and looks dated.
Defining the problem
My design process started with creating a brand personality framework to define what were the main values for the Charity. I used word associations to best describe their personality: Acceptance, Care, Credible, Trustworthy and Impactful.
I focused on the following key concepts for the charity:
- Easy to donate
- Share the message of saving the girl child without being boring or preachy
- Bright and colourful, to represent the spirit of youth and the vibrancy of the country. Also to reflect life being enjoyed to the fullest
- Trustworthy site, as they are asking for monetary donations
- Promote awareness of the cause, and encourage people to support them
Mood board
I decided to create a mood board to explore the concepts I wanted to focus on, and I was curious to see what look and feel this could create. I liked the idea of bringing the personality of children into the site, and also playing with bright colours associated with India.
I went on to create a Style Guide for the site
Colour schemes
There was a clear colour scheme created from the mood board, a lot of bright colours, in red and pink hues but also the trustworthy shades of blues and greens. It has a friendly, feminine edge without being girly. These were all checked for accessibility, to ensure people with visual impairments would be able to view the content.
Typography
For typography, I had a mix of serif for the headings and a san serif typeface for the body. This would allow for titles to stand out and break up the text, but also keeping the body text easy to read. I used Libre Baskerville in a variety of weights for headings, and Open Sans, a light, slightly-rounded, friendly typeface for the body.
Spacing and Iconography
This was my first project where I really understood the value of preparing your designs for the next stage of development. By having clear rules and guidelines for spacing and alignment, the designs would be consistent and also would be easier for a developer to replicate in code. It was also much easier for me to design, without just going by eye!
Iconography was used throughout the designs, and for reference they are below. I used clear line icons to represent particular themes, and also broke up the text and imagery with playful blobs to reflect the childlike nature of the charity. I created a simple new logo using my colour scheme and lines to represent a safe home.
Developing a solution
Having the branding and design elements in place, I focused next on the website layout. I was designing for three viewports, however I designed in mobile first. Mobile first design is a design philosophy that aims to create better experiences for users starting the design process from the smallest screens. This helps ensure that my user experience is seamless on any device.
Initial Sketches
I wanted to ensure the content was engaging, and the call to action (to donate) was clear. I decided to showcase the charity values and interesting information on the homepage.
After testing these with users, it was clear this was too much information, which meant the message was getting lost. I tackled these issues in further iterations.
Iterations
Through iterating my designs, I was able to tackle the following problems:
- More space between elements
- Clearer call to action buttons to donate
- Logo and menu positioning to make it easier to users to navigate the site
- Paragraphs of text were kept short, and introduced the charity first, as that message was the priority
Delivering the final designs
Moving to high fidelity
When moving to high fidelity, the biggest challenge was designing for all three viewports whilst still keeping consistency. I wanted to keep the designs simple and clear, but also give information about the charity to engage the user immediately.
For the small viewport, I changed the image size to the full width of the screen, and this progressively changed to taking up half of the screen for the medium and large viewports.
In addition, the text over the hero image was not clear on the small viewport, so this was changed to be underneath for the small viewport.
I also created a second page, the ‘About Us’ page, seen above. This page was also designed mobile first, and reflected the same brand image and personality. I needed to keep this page informative and clear, and broke up large text again with imagery and block colours. The team pictures were placed into the blobs to keep with the homepage theme and also to give them a friendly look.
My final designs can be seen in Figma here, this is a non interactive prototype of static screens.
Next steps
I would like to continue to design the other pages of the site, and test this with more users. In particular I would like to test out the donation user flow and ensure this is easy and intuitive. I would then be develop the designs further to produce a clickable prototype, for the whole site.
I currently have no connection with the UK charity, and I would love to take my designs to them and offer my services.
Takeaways
I really enjoyed my second project in Visual Design and I appreciate the intricacies, methods and processes involved in developing the UI. I look forward to developing these skills in the future.
