Case study: A visual rebrand & reskin for the Emily Harris Foundation
An individual four-day visual design sprint to rebrand and reskin 2 pages of the Emily Harris Foundation’s existing website. The high-fidelity images should be responsive across 3 viewports: mobile, tablet and desktop.
Tools Used: Pen and paper, Sketch, Miro
My approach
While this was primarily a visual design project, I decided to use key UX tools to focus my attention on identifying the most appropriate pages to reskin and understanding what site users would want from the site.
Discover: Gaining insight into the user’s needs
The Emily Harris Foundation is a small charity that was set up in memory of Emily Harris by her parents. The charity’s main aims are to:
- make life a little easier for families with sick children in the neonatal unit of the King’s Mill Hospital.
- Support the staff to develop their knowledge and skills.
From analysing the existing site, I identified three core users:
- Parents with sick children in the neonatal unit.
- People who would wish to donate to the charity.
- Staff in the unit who want to carry on their training.
Mindful of the project timescales, I decided to create a proto persona for someone who would wish to donate, including their motivation. Michael captured the essence of this use case.
Define: Considering the Foundation’s Brand
What do other similar sites offer and feel like?
To understand what other ‘direct competitors’ did to serve their users, I carried out a short competitive analysis. This focused on other neonatal and children’s hospital charities, including Great Ormond Street Hospital (GOSH), Bliss, Cosmic and Rainbow Trust.
They all have consistent elements that I wanted to consider as part of the rebrand and reskin:
- Muted but not sombre colours.
- A warm and friendly feel.
- Rounded and accessible typefaces.
- A supportive tone of voice.
- Clearly placed Call-to-Action donate buttons.
What is the Foundation’s Brand?
After reviewing the site, and with the competitors and Michael in mind, I carried out an evaluation to consider descriptive words that would summarise the essence of the charity’s brand values, arriving at these five:
Building on these words, I next considered brand affinities. If the Foundation was a person, would they want to be seen alongside? This helped me identify other organisations with shared values and could provide ideas to influence my creative processes:
With these in mind, I created some ‘goldilocks statements’ to capture the brand personality. These are powerful in helping to define the boundary of the brand’s values:
With these values, affinities and personality in mind, I was able to consider how the Foundation would want to ‘sound like’ in terms of its tone and style of writing, as well as the look-and-feel of their site. With personal experience within my family of engagement with a neonatal unit, I was also able to capture my emotional feelings in the tone of voice:
“We are here for you when you need us. We are compassionate, friendly and supportive, and work hard to make things a little bit easier for you. We adapt to your needs, so we love to chat when you want to chat, or listen when you just want to talk. We’re here to give you a virtual hug when things are tough — we’ve been there.”
Expanding my thinking and ideas
While I had keywords from my work so far, using word association allowed my creative thinking to expand to consider new ideas. Starting with the brand’s values, I quickly built out a network of interlinked connections.
The theme of bubbles, as in support bubbles, thought bubbles and bubbles being sensitive, began to resonate, as did the ideas of sensitivity and embracing. These were to be critical elements as my process continued.
How do I create and capture all of this visually?
Creating a moodboard allowed me to think about colours, patterns and images that both capture the essence of the Foundation, but also provide ideas to spark my creative imagination further.
It was during this process that the idea of those bubbles and the repeating circular patterns that I associated with embracing and support circles, became the core idea for my work:
Develop: Ideating and Iterating
How would evolving the existing site help the Foundation?
From a heuristic and content analysis, I realised that the site does not provide information on who it supports on the homepage but it’s hidden under the menu item of ‘Use of Funds’. I decided to split this into ‘Supporting Families’ and ‘Supporting Staff’ to raise its profile. Also, the donate Call-to-Action is not as obvious as on competitor sites.
So, to satisfy Michael’s requirements, I focused on reskinning the Homepage and this new ‘Supporting Families’ page.
Evolving the Logo
I wanted to refresh the existing logo to make it more contemporary and powerful while keeping the core value of the existing heart and rainbow. Influenced by my research, and focusing on the children and those who support them at the heart of the Foundation’s work, I created and iterated ideas for the logo:
While I liked the ‘hand-drawn’ feel of my original logo typeface, I found it was hard to read, so I moved to use the clearer Montserrat typeface which continued the embracing circular style. By presenting this on a lightly coloured background, I was also able to help the white in the logo ‘pop’:
Reskinning the Site
The Homepage
My aim for the homepage was to allow it to tell the Foundation’s story using a simple repeating box layout, focusing on mobile-first and providing a clear CTA for donations. The evolution through the design, by incorporating the circles, muting the colour and the positioning & style of the donate CTA was based on feedback I received when carrying out testing at each iteration:
As the visual design evolved, I created the tablet and desktop viewports, making the most of the larger layout but keeping sufficient space:
The final iteration received positive feedback:
- “I love the new hero image”: the neonatal unit’s new circular building.
- “Great and clear images on the fundraising events”: encouraging participation.
- “I can see what the charity does from this single page.”
Second page: Supporting Families
The supporting families page was created using the design elements from the homepage, providing consistency across the site and requiring only 3 iterations to reach this version. In hindsight, I would have reduced the copy text I took from the original site to simplify layout and make it easier for the user to read.
Design Style Guide
As I discovered in creating the second page, creating the design style guide both speeds up the process and ensures consistency across the site. It also provides a clear guide for the Foundation’s future publications and merchandise.
Next Steps
There are several elements I would wish to consider:
- Are the round typefaces the most appropriate for the site?
- Would moving the circular images further into the rectangles increase the feel of the embracing concept, rather than balloons that may fly away?
- Test the new logo to see if it’s as effective as the existing one.
- What would the next page be for reskinning? Donation?
- Could a different colour palette increase the site’s visual appeal?
What Have I Learnt?
The subject matter for this project is one that really resonated with my family history, so I felt invested in helping to improve the effectiveness of the site.
The use of the brand ‘tools’, allowed me to realise that my creative side has been latent for too long! I was surprised and excited to see how using word association and sketching images really powered up my visual design creativity.
Fundamentally, this project allowed me to put into practice skills I’d been working on and demonstrated that I can be visually creative, and that practice is key to improving.
Thank you for reading!
I’d love to know what you think and welcome your comments; all feedback will help me develop and hone my UX skills.
If you want to know how I can help you, please drop me a line!
