Rebrand & Reskin
A fresh look for a Neonatal Charity's Site
Project Type: Concept | Team: Solo | Duration: 1 Week | Role: UX Designer & Visual Designer
The Brief
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. It also supports the staff to develop their knowledge and skills.
-
An individual four-day visual design sprint.
-
Rebrand and reskin 2 pages of the Emily Harris Foundation’s existing website.
-
Refresh and update the logo.
-
The high-fidelity images should be responsive across 3 viewports: mobile, tablet and desktop.
My Role: UX research, competitive analysis, insights, persona creation, brand values, brand affinities, brand personality, word association, moodboard, sketching, low-fidelity and mid-fidelity wireframing, high-fidelity prototype, usability testing
Tools Used: Pen, Paper, Sketch, Miro, Google G-Suite, Zoom & Slack
Mind Mapping of Concepts
Mood Board
My Process
Discover
Competitors & Pain-Points
After reviewing the existing site and re-reading the brief, I wanted to establish who would use the Emily Harris Foundation site.
I identified three user roles:
-
Parents with currently sick children in the hospital
-
People who wish to donate to the charity
-
Staff who may want support to carry on their training.
To give focus to my visual design work, I created a proto-persona, Michael. His son had been in the hospital 15 years earlier, and now he wanted to help financially, but couldn't easily see how his donation would be used.
In order to understand how other similar charities work, I carried out a 'direct' competitor analysis. The findings influenced gave insight into common patterns that I would want to consider introducing.
Concepts included:
-
clearer call to donate
-
muted colour palettes
-
warm, friendly and supportive language
Define
Defining the Brand
With the insight of other sites, and considering the Foundation's purpose, I started writing down descriptive words that came to mind to capture the spirit. I identified the brand values as:
-
Thoughtful, Supportive, Sensitive and Compassionate
I then used these words as the seeds for a word association to identify other words and imagery that could contribute to the brand.
I also considered other brand affinities who, while sharing values were in different markets, settling on the Co-op, Samaritans, Nationwide and GOSH.
These sources helped me to formulate the brand personality's 'goldilocks' statements to help define the limits of the brand.
The tone of voice was important to get right, but drawing on family experience, I was able to balance this between emotion and support.
Finally, with the creative ideas, words and images, I collated images that would influence my rebrand and reskin.
Develop
Ideating & Iterating
Using the ideas from the brand and tone of voice, and being mindful of the existing logo's heritage, I sketched some initial ideas which over the next day I elaborated, refined, user-tested and iterated.
A strong image of circles, suggesting holding and encompassing, continued to resonate following the logo's creation, so this became a major influence in my design, starting with the mobile viewport.
I focused on the homepage and a new supporting families page as these would be key to supporting Michael's decision to donate. My aim was to make sure the Foundation's purpose could be fully determined from just scanning the home page.
With user feedback, I constantly iterated the homepage, and only once this was settled, I started on the second screen. Consequently, this was much quicker to develop.
Creating the tablet and desktop viewports, building on the mobile work was next.
The final stage of the development was to construct the design style guide to capture all the critical design elements to ensure further developments would feel consistent.
Deliver
The High-Fidelity Screens
With the 3 viewports for the two pages complete, it was time to carry out a further round of user testing.
Key findings:
-
The site was consistent, friendly, accessible and clear.
-
The circular design was carried into the choice of the typeface.
-
Fundraising and the donation button were now prominent.
-
The split of the Use of Funds menu into Supporting Families and Supporting Staff enabled the homepage to finally tell the whole story.
Creating and iterating the new logo
Evolving the mobile homepage through early iterations
Conclusion
To Improve
Next Steps
-
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 I Learnt
My Creativity
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 could be visually creative, and that practice is key to improving.
Feedback
My Experience
-
With the support and feedback of a professional visual designer, and understanding the creative processes, I began to remember enjoying design when I was a kid.
-
After my initial negative experience, I was excited to learn so many of Sketch's myriad of features, providing a strong foundation for my future work.
-
I was particularly proud on receiving this feedback from the visual designer following my presentation: "Your tone of voice while reading your 'tone of voice' was brilliant and really helped me solidify my understanding of the brand you were setting out to build."
The New Homepage
Across the mobile, tablet & desktop viewports
The New Supporting Families Page
Across the mobile, tablet & desktop viewports
