Creating a new aesthetic for The Silver Line Charity
By: Savia Weidinger
Tags: Digital, Design, Elder Care, Charity, UI

Overview

The Silver Line charity is the only free confidential helpline providing information, friendship, and advice to older people, open 24 hours a day, every day of the year.

Brief

My task was to re-skin the existing site of a charity and provide a new visual guide to give it a contemporary look and feel.

Having a grandmother living away from family and alone, I could relate to the Silver Line charity and its important work so I chose to work on this project.

As I was asked to deliver two responsive screens across mobile, tablet and HD desktop, I decided to rework the home page and donation page given that these are two key pages that visitors would frequently access.

This concept project was developed as part of a one-week design sprint.

Analysing the Current Online Platform

Current homepage across mobile, tablet and HD desktop circling key errors

On Silver Line’s current homepage, I noticed that the front image was covered by quotes, losing its impact and purpose. The helpline number and contact information did not stand out due to the grey background, small text and page hierarchy.

Current donation page across mobile, tablet and HD desktop circling key errors

On the donation page, I was overwhelmed with a lot of text, which was irritating and confusing. This made me question the site’s trustworthiness and believe that donating seemed like a time consuming process. The page also showed some coding issues with buttons overlapping and an unnecessary second donate button in the global navigation.

Learning from the Competition

To start off the project, I wanted to understand who Silver Line’s competitors are and what I could learn from their designs.

Competitive research across three websites providing aid for older people in the UK

Developing Brand Values and Personality

After getting familiar with the Silver Line charity, it was important to capture the charity’s values to build its brand identity. The Silver Line cares about:

connecting people

always being supportive

being community focused

to welcome anyone in need

to understand your circumstances

I created some Goldilocks statements to emphasise the charity’s brand personality:

…is attentive but not judgemental

…is empathetic but not pitying

…is inclusive but not overbearing

…is purposeful but not single-minded

Keyword Association Map & Tone of Voice

I moved on to creating a keyword association map based on the previously defined values. From this mind map, I realised that the reappearing words generated strong emotions and are associated with heartwarming feelings.

Keyword association map with reappearing words picked out that generate strong emotions

From this, I created Silver line’s tone of voice. I wanted it to be inviting, warm and personal to demonstrate the charity’s focus on building a connection and trust with older people in need:

“We are a welcoming community of volunteering individuals who listen to and support anyone in need. We care about showing respect, being understanding, and empathetic and want to build trust and a connection with you. Our friends describe us as genuine, kind, approachable and accessible and we encourage anyone to get in touch with us who suffer from loneliness or isolation.”

Brand Affinities

I chose three organisations that presented similar values to the Silver Line charity and of which I could take inspiration from.

Three organisations I associated with Silver Line’s brand values

Concept Mood Board

The concept mood board below helped me to convey Silver Line’s brand values, personality traits and tone of voice.

Concept moodboard for the redesign of Silver Line’s charity

As I created this mood board, I noticed that I often visualised the words ‘connecting’, ’supportive’, and ‘community’ through the use of hands and human connections. I chose warm colours and happy moments to represent ‘Welcoming’ and ‘Understanding’. All in all, it was important to me that the mood board brought a sense of trust and familiarity to it that the new designs should carry as well.

Developing a Colour Palette

I wanted to build the redesign on soothing, calm, friendly and inviting colours.

Beige, green and yellow tones to convey a soothing, friendly and inviting feeling for the new Silver Line charity

I tested various colour palettes with users to understand what feelings these generated for them and how I could incorporate these in the redesign.

Colour palette iterations based on colour moodboard tested with users

I chose to go with the below colour palette as my primary colours. While I originally wanted to incorporated bright yellow tones, I learned from users that beige tones were more appropriate for the cause. The green tones were seen as nurturing, neutral, and inspired a sense of giving. The strong contrast between the two colours also helped buttons and page sections to stand out.

Final colour palette for primary colours of redesign

Logo Explorations

Silver line logo inspiration, development, iterations and final choice

Being inspired by the mood board, I wanted to include hands and lines in the logo to emphasise the sense of connectivity and community. I settled on two hands reaching each other to represent community and a circular shape to present unity. The hands were slightly tilted to visualise need and support while making people feel equal and inclusive. I settled on one of my green colour tones as it provided a strong but soothing contrast to the site’s off white background.

Styled Guide

Style guide for Silver Line’s charity redesign

Typeface

I chose the typeface ‘Nunito’ to reflect a less serious (than a serif typeface) but still respectable and clear tone. This typeface was used across the site’s headers, texts and buttons as it is clean and easily readable. It also demonstrates coherency and comfort.

Buttons

The buttons needed to be distinctive and recognisable. I chose the ‘Forest green’ for the donate button since users associated the colour with a sense of giving and maturity.

Wireframe Iterations

Low fidelity wireframe iterations on the home page’s hierarchy and design layout

The new homepage layout intended to put greater emphasis on the site’s call to actions. The site’s key purpose was to provide older people in need with a contact number so this needed to be shown first. The authentic imagery should aid to familiarise readers with the cause and authenticate the experience. The charity information would provide the necessary detail about the charity and what sets it apart from other helplines. And finally, the donate button to provide users with the chance to support the charity.

Mid fidelity wireframe iterations of Silver Line’s homepage including user feedback

I conducted usability tests on the mid fidelity wireframes focusing on colour, layout, imagery and format and implemented their valuable insights.

Say Hello to the new Silver Line!

Silver Line’s rebranded and reskined homepage designs across mobile, tablet and desktop

Full homepage screens across mobile, tablet and desktop including key highlights mentioned

My goal was to keep Silver Line’s design simple and clean but also approachable and warm. Users considered the redesign as more balanced in terms of its colours, layout and format and could clearly point out its key information and context. The helpline number as well as the donation button are now clearly visible and stand out from the page:

Then and now design of Silver Line’s homepage on a tablet

Moving on to the donation page, it was important to keep a coherent design. I included minimal text to allow the user to focus on the donation and provided access to the charity’s help number on this page. I visually communicated what donations can do to direct the eye to this information.

Full donation page screens across mobile, tablet and desktop including key highlights mentioned

The redesign was considered “a lot less overwhelming and clean” (Patrick,51). It highlighted the most important information and guided the user to the call of action.

Then and now design of Silver Line’s donation page on a tablet

Key Learnings

I learned that while UI is crucial for an appealing design, it is vital not to lose track of the UX side of things — Users should still be able to navigate seamlessly through the website and find all relevant information easily while being drawn in by a visual, unique design. Not to forget, I learned that colour plays an important role and conveying feelings and personality.

Next Steps

Given the chance to continue this project, I would: