Process

A heuristic evaluation of the current site formed the basis of the kick-off meeting discussion, agreement of project scope, and selection of which areas to focus on first.

We proceeded iteratively with regular reviews where we looked through and discussed the work done since the last meeting, agreed any re-work required, and confirmed the next priority focus. This kept up the momentum and made sure everyone felt in control and had a sense of ownership throughout the project. It also removed any pressure from having to get the answer right the first time, allowing time for thought between regular meetings.

All design elements used were documented in a design system alongside the annotated high-fidelity prototypes for both desktop and mobile, ensuring the design could be easily implemented once the charity had secured funding.

I also provided a first draft of the content for review by key people within the charity, ensuring the important points were covered and a professional yet approachable tone of voice was used to clearly convey the information.

Research

I began my research by performing a heuristic evaluation of the current website to identify existing issues. I then conducted competitive analysis to gain an understanding of what may be missing, see how others have solved similar problems and get inspiration for the design. This formed the basis of my research.

Having the client provide examples of other sites they liked or disliked, and importantly why, got them involved from the very start, reinforcing their sense of ownership and giving me an understanding of their stylistic preferences.

Analysing the website of grant funders, different grant approval processes, and previous grant applications provided insight into the key information required by grant funders and issues that may be faced during the grant application process.

Speaking with key internal people when I visited different shops, the furniture store, the warehouse, and by attending the supervisor meeting, allowed me to both hear and see current behaviours and pain points with service delivery and operations.

Finally, carrying out an online survey of people who had previously donated goods added the end users’ perspective to this overall picture.

Define

Triangulation

Flow diagram

User personas

I triangulated my results to identify common themes across my research results.

Putting together a current operations process flow diagram gave a clear visualisation of issues.

Creating user personas helped to build empathy and a common understanding of the needs of the different user groups amongst those involved in the project.

Current operations diagram

User personas examples

Top findings

Finances

As for many charities, finances are particularly tight following Covid lockdown

A more modern, professional website style would put the charity in a better position for grant funders’ reviews

Clearer information is needed about how to support the charity financially

Information on the impact of a donation (e.g. £15 buys a single duvet) would give the donor confidence that the money will be used well

Information about services, impact, location and operations needs to be easy to find for grant funders

Awareness

Information about support services available currently not clear or easy to find

General low level of awareness of what services are offered amongst shoppers, potential supporters and potential clients

No information provided on the website about the charity’s online ebay store

Once shoppers have entered the furniture store they are delighted by the quality and low prices of what is on offer, but getting people to visit the store can be a challenge

Operations

Existing process for agreeing to accept goods donations is long and requires multiple emails back and forth to get the information needed

Backlog of requests to donate goods creating a bottleneck and long wait times

Multiple ways to apply to be a volunteer, with incomplete or confusing information on what being a volunteer entails

Volunteer numbers down post-Covid

Policy information unclear and sometimes hard to find

Discovery

A fundamental observation I had was the need for a shift in mindset from having a website simply because everyone must have one nowadays to thinking of it as a digital shop window and online resource that they make available for their clients and other user groups to find out key information about CCA and more easily initiate interactions to complete primary tasks, such as getting support, volunteering, or donating items.

Design

Making information easy to find

Information architecture

One of the biggest usability concerns with the existing website was the additional cognitive load and time needed to search through the site to try to find the required information.

To address this I established a new information architecture with content categories and clear, meaningful labels, each with a user group in mind to help guide them to their respective primary tasks:

‘Get support’ - support service information; primarily aimed at potential support centre clients
‘Get involved’ - information on volunteering, fundraising, paid roles and church partnerships; primarily aimed at individuals who want to help others practically
‘Shop’ - shop details; primarily aimed at individuals who want to buy items from the charity shops and furniture store
‘Who we are’ - information about CCA’s mission, operations, social environment and history; primarily aimed at grant funders and corporate sponsors
'Donate’ - details of how to donate goods or money; primarily aimed at individuals looking to donate items or support CCA financially

The new navigation was then based upon this information architecture to make it quick and easy for each user group to find the information most relevant to them.

Information architecture diagram

Content design

To further support the new information architecture I provided a first draft of the content for review and editing. This was based on my research from talking with senior management and supervisors, visiting the shops and warehouse, and reviewing previous grant applications.

This ensured the information would be found where users expected and has a clear and concise manner with a cohesive tone of voice that is professional yet remains approachable.

Improving financial stability

Grants

The new ‘Who we are’ section was added to make it easier for grant funders to find commonly requested information, thereby putting CCA in the best possible position when applying for grants in the future.

I provided a first draft of the content, based on previous grant applications, covering:

An overview of CCA’s mission and approach
Details of the location and social circumstances where CCA works
Diversity and inclusion information
Provision of key policies and documents
An introduction to the trustees and senior management teams
A short history of CCA

Donations

The primary CTA for supporters is to give financially or donate goods that can either be sold in shops to raise funds or given directly to those in need. Therefore the ‘Donate’ button was placed in the top-right of every page to draw attention and remove any barriers posed by having to search for donation information.

On the financial giving page I provided a number of pre-set amount options showing the direct impact that amount would have, building confidence that the money is going to a good cause and encouraging completion of donations.

For flexibility I also provided an option to specify a donation amount, for example if someone was donating an amount they had fundraised.

The FAQs on the donation pages were identified based on pain points raised from the online survey of recent donors and through discussions with the operations team. These were intended to answer the majority of any remaining questions and therefore reduce fallout.

Financial donations page

Shop

Funds raised through selling donated goods in physical shops or through CCA’s ebay store are vital to support the charity’s work.

There were two primary tasks for shoppers:

Buying items online on the ebay store
Getting location details and opening times to be able to visit the charity shops and furniture store

The link to the ebay store and shop location details were therefore positioned at the top of the page to ensure they were easy to find.

One particular pain point identified with getting shoppers to visit the furniture store is that it is located outside the town centre. However, once someone had visited the store once they were generally impressed by the range, quality and affordability of what was on offer and would make the effort to go again.

By adding a virtual tour of the furniture store it would allow users to gain those insights from the website rather than only once they had been to the store, therefore decreasing the perceived risk of low ROI (finding a good item to buy vs. time and effort to visit the store) and increasing the likelihood that they would make the effort to visit for the first time.

Shop page

Raising awareness of services

The charity offers a variety of support services but what those are and the impact they have was not very clear on the existing website.

To overcome this I redesigned the homepage layout to have this information front and centre, with metrics showing impact and cards for the different key services offered providing a clear overview and links to more information, making the details quick and easy to find.

Available services and impact metrics shown on new homepage design

More details were then provided within the new ‘Get support’ section, containing an explanation of the service, a testimony, and FAQs. The aim of this was to provide all key information and remove any anxiety someone may have about what to expect when first interacting with the charity.

Further details, testimonial and FAQs shown on support pages

Poster campaign

The need to raise awareness of available services went beyond the website redesign. I designed a series of posters that were put up in the shops and support centres to educate shoppers and clients about the services on offer. These could also be put into more public spaces, e.g. social media or even as bus stop advertisements if funding allowed.

The posters covered three themes:

Types of items available for sale in the furniture store at affordable prices
Furniture donations are wanted
Employment and work-based training is available

I kept a consistent layout across all the posters with an eye-catching headline to draw attention and aid recognition.

As the posters were done earlier on in the project the style differed from the final website style, but starting to get the message out was of higher value than waiting until everything was finalised.

Posters on display in an Action & Support Centre

Streamlining operations

Service design

The existing process to receive donated goods was causing a bottleneck due to unclear information on the website of what details were needed, resulting in many emails back and forth before collection could be arranged.

In addition to this the charity were about to implement a new till system that would change the way deliveries were booked across their different sites, but how this worked holistically wasn’t yet completely understood.

As there was only one van crew who covered both collections and deliveries it was important to have the logistics planned efficiently.

I spent time with the warehouse operations and van crew to understand their current process, pain points, and how they envisioned the new system working.

As a result of this I produced a future operations diagram for review which gave everyone a common understanding of the new streamlined process. The new process would allow the operations team to focus more on managing the logistics and less on chasing information and data entry, thereby reducing the bottleneck.

Future operations diagram

Online donations form

The need for many emails back and forth prior to collection being arranged for donations of larger items was a major concern.

As an immediate solution we added clearer instructions of what information was needed onto the existing website donations page so that improvements may be seen without needing to wait for the full website redesign.

The longer-term approach was a short online donation form that guided the donor through the information to be provided to ensure required details were received from the start, removing the need to chase for information and reducing the time between initial enquiry and collection.

Online donations enquiry form flow

Volunteers and partnerships

As for many charities, a large reduction had been seen the number of volunteers post-Covid whom CCA relies heavily upon to operate effectively.

CCA is also part of a network of charities within Reading and is supported by local churches.

To promote this way of supporting the running of the charity:

A new ‘Volunteer’ page was added within the ‘Get involved’ section that provides clear information about the various volunteer roles available and an easy way to register interest in volunteering.
Partner charity logos were added to the bottom of the homepage to show that this is a valued relationship.
A new ‘Church partnerships’ page was added within the ‘Get involved’ section to show appreciation for the support and encourage other churches to start supporting the charity’s work.

Volunteer page

Visual design

Brand identity

A new logo had been recently designed and was being rolled out across the charity.

To build out this new brand identity I:

Mimicked the flat minimalist design of the logo in the overall style.
Used the logo colours as the primary colours for the website and added some complementary tones that would be more accessible to use for text and smaller components.
Chose the pink from the logo for buttons as it was the most eye-catching colour in the design with the best colour contrast to the white background in order to draw attention to CTAs.
Mirrored the rounded feel of the logo by using ellipses and rectangles with rounded corners for components (images, cards, modals, banners, buttons, etc.)
Selected fonts with a rounded feel to match the logo as well which were also variable, had high readability, and had open source licenses to keep the cost down for the charity.

Accessibility

Given that CCA provides support, work and volunteering opportunities for people of all backgrounds and disabilities, ensuring the website is accessible to all was absolutely critical.

I therefore took the following measures within my design:

Checked for sufficient colour contrasts of the primary colours taken from the logo and used complementary tones instead where needed.
Setup a typographical hierarchy with rem font sizes specified (using browser root element font-size 16px) so that text could be scaled automatically based on the user’s accessibility settings.
Designed the page layouts with plenty of whitespace and a logical linear structure to not overwhelm the user.
Used clear, descriptive wording for navigation options and headers (e.g. ‘Get support’), and action buttons (e.g. ‘Register your interest’).
Provided alt texts for all images used.
Created prototypes for both desktop and mobile formats to show how the website would work across different devices.

Design system

With an expected gap between finishing the website redesign and development starting whilst the charity raised funds for the project, I fully documented all base elements, components, and layout details for both desktop and mobile formats to ensure nothing was forgotten or miscommunicated during this time.

This also allows the design system to be used for future website changes or print designs to maintain consistent branding.

Takeaways

My personal biggest takeaway from this project was how much I appreciated feeling part of a team all working together to deliver meaningful change in the local area.

I also got immense satisfaction from seeing the mindset shift of those I worked closely with to think of information and services from the users’ perspective. They formed a habit of sharing ideas and designs they had seen that could be incorporated either into the website design or into other projects the charity may take on.

Thank you!

Thank you for taking the time to review this project. Any feedback is always appreciated.

Equally, if you have a project you'd like to work on together do please get in touch.

See other projects ->

Repositioning a local charity for long-term success

Responsibilities

Tools

Duration