Improving access to essential products & services for people in later life with Age UK

UX research and hi-fidelity UI / To create a new website & digital brand guidelines / For Age UK’s trading arm Age Co / Using GSuite, Figma and Airtable

View the live site

The problem

Age Co’s website was out of date and clunky leading to a reduction in customer trust. Concerns about the safety of their online purchases was negatively effecting online conversion.

The solution

We applied Age Co's new brand to a new website and created digital guidelines for Age Co and their partners. The final outcome is a friendly yet proffessional online experience which feels trustworthy.

Project initiation

The team

James Barclay (Me!)

As lead UX designer I was responsible for planning & running user research sessions and creating finalised wireframes. I also took care of around 20% of the finalised UI.

Liam Cunliffe

As lead UI designer Liam was responsible for creation of the majority of high fidelity assets and finalised designs. Liam was also heavily involved in the research and UX decisions.

Kath Goward

As our Client Success Manager, Kath was responsible for liasing with the client, keeping them well informed and ensuring smooth communication throughout.

Christina Kraiss

As our Project Manager, Christina was responsible for organisation, booking meetings and creating timelines making sure everything was delivered on time.

The Brief

We were asked to create digital brand guidelines for Age Co and their partners to reflect their re-brand.

This included website components for 7 page templates across two breakpoints, as well as guidelines for CMS users and partner sites.

Age Co's updated brand guidelines

Identifying the problem space, goals and objectives

I led a workshop with Age Co's digital team to identify known problems, their goals and understand what impact they wanted to have on their users.

Existing problems

Low conversion rates compared with overall traffic
Customers unclear about relationship with Age UK
Customer confusion about partner sites leading to distrust
The site was starting to look outdated

Key goals

Help customers to make the most of later life
A more consistent digital experience throughout
Create a visually appealing, easy to use and simple experience

Desired impact

Improved brand identity and integration with the Age UK brand which was “aligned but distinct”.
Increased engagement and conversion with customers online
Create engagement which builds trust and relationships

A snapshot of our kickoff workshop board

Discovery

Familiarising ourselves with the customer segments

Customer segments had been created and updated over the past few years by another agency. After reviewing these personas and ensuring they were created using thorough research, we used them to guide our approach.

1. Comfortable Conventionalists

Fairly active online using email, social networking and online banking, most finding the pace of online change a bit overwhelming. This was our core user group.

2. Active Adapters

Spend a lot of time using a variety of digital tools including online shopping and banking, this group are digitally enabled and don’t feel intimidated by new technology.

3. Support Seekers

May use email to stay in touch with family but would feel wary of scams with many online activities and will often rely on younger relatives for support.

4. Trusted Others

Helping family and friends in later life navigate the online world. Digitally savvy trusted others are confident and comfortable with technology.

Validating existing pain points on a budget

As we had very little budget for discovery research I set up some quick pop-up testing in the local library. This was a cheap and easy way to meet some of our users and ask them for feedback on the existing site. I wanted to ensure insights from previous research and the kick off workshop were valid.

We had a primary focus on understanding how well users could find information to inform a purchase. We also asked users to explore the blog.

Information overload

People found information on the insurance policy pages was overwhelming and hard to digest.

Price importance

Price was the most important factor for people choosing insurance policies.

Blog confusion

People did not understand that 'News & Views' was a blog and also found it difficult to navigate.

Age UK confusion

People were not clear about the relationship between Age Co and Age UK.

Ready to greet the public at Finsbury Library

Collating and reviewing existing research to further understand users

We reviewed research carried out by other agencies into the existing sites performance, users attitudes & behaviours and customer segments.

We combined these with our own insights and collated into an Airtable which became a guiding resource to inform our design decisions throughout the project.

We were able to filter this air table to find relevant research insights and suggestions based on module we were working on at the time.

Research collated into a shiny Airtable!

Using attitudes and behaviours as design princibles

We pulled together key attitudes and behaviours which we used as guiding design princibles as we moved into the design phase.

We kept these visible in Figma as we designed to ensure they guided our decisions.

Key attitudes

Many customers want to speak to someone on the phone before making a purchase.

Customers want to see expert support and guidance before making a purchase.

More clarity needed on what Age Co is and its relationship with Age UK which is a more familiar and trusted brand.

Further confusion around the brand due to cross domain sales funnels and parter relationships.

Key behaviours

Customers are predominantly converting on Desktops and Tablets, however Mobile conversion was on the rise.

Very little scrolling happening on the existing product and policy pages.

Blog posts receiving huge amounts of traffic with little to no conversion.

Tabs on product pages aren’t being interacted with.

Design

Identifying all necessary design elements & setting up system for feedback

Drawing from a review of the existing site, our research and further sessions with the client we created a spreadsheet listing all the elements we would need for the successful completion of this project.

We also created a space for clients to give feedback on the designs making the sheet a global reference point for the project's progress.

A glimpse into our feedback & tracking spreadsheet

Using wireframes to communicate and sense check initial ideas

Drawing on all of the information gathered from our research, we started exploring early concepts in wireframe form.

In order to keep our key insights top of mind we kept alongside our design space, see these in orange below.

We created multiple variants of each blocks and discussed their application and merit with the Age Co team. Ultimately deciding on final approaches to apply colour to.

Divergent concepts to understand the client’s visual preference

We created 4 divergent concepts to display a range of different ways the brand could be applied digitally.

It was important to agree on an overall visual direction and 'vibe' before getting into detailed specifics so we could move quickly into finalising designs for testing.

Key feedback:

The client had a preference for the 'Informative' option combined with aspects of 'Brand focus' & 'Minimal'.

They liked the prominent use of large imagery
They wanted to see ratings front and centre throughout
Brand story (e.g. imagery) should be more prominent than products

Signing off designs for testing

We used Figma prototypes containing links to page designs and specific components to review and sign off.

We included links to pages addressing discussion points. We covered these points in meetings but also provided a link for the client to share and review internally.

Feedback and discussion sheets

Usability testing

Once we had signed off the design and functionality of all essential blocks we created a hi fidelity prototype so we could understand how users would interact with the updated site.

Our core research objectives were to:

Understand how users navigate and the site and if they feel they can find what they need to make an informed decision about a purchase

Understand potential customers' impressions of the new Age Co digital brand to ensure we have taken the right approach stylistically

Gauge our participants’ understanding of Age Co as an organisation and, importantly its relationship to their partners and Age UK

Understand how users interact with the Information & News articles and if they understand that it is a blog

We tested with nine participants across all four customer segments

Our sample was weighted towards Comfortable Conventionalists as this was the largest customer segment. We also tested with at least one person from each of Age Co’s four segments.

Talking to our family to hear from missing user groups

We struggled to recruit Support Seekers so I decided to ask both of my Grandmas. Thankfully they kindly accepted to help and we had two enjoyable and insightful sessions.

We also found it hard to find Trusted Others, conventiently Liam’s Mum had previously worked as an Occupational Therapist. She was happy to speak with us and I ended up having a great chat with Penny!

Liam discussing the Age Co product range with Hilary (my Grandma!)

We tested three core journeys and two extra journeys across two devices

We allowed users to enter the site at one of three key entry points. The Home page, Category or Product page as these were the most common entry points to the site.

Over the course of the tests, each entry point was used, providing valuable insights on all research objectives. We also tested the About, Article and Promotion pages, allowing users to find their way naturally testing the site's navigation.

An outline of the journeys we tested

Our testing prototype

We emulated a natural journey for users by allowing them to choose how they would enter the Age Co site from a list of google results.

An example journey through our testing prototype

We had an overwhelmingly positive response from participants.

Most participants found the information they were looking for and navigated the site smoothly and easily.

In general they loved the brands look and feel and felt like it was the right approach for their age bracket.

There were however some areas where we could see the opportunity for improvements:

Some participants took a while to understand the relationship with Age UK.

The mobile navigation menu was causing some confusion and required further exploration and an updated design.

We collectively felt that desktop navigation could be more effective at communicating the Age Co product range.

We iterated on designs further to address the issues we found

Based on our findings we made some iterative improvements to the designs including:

Adding a Relationship Banner

The addition of a banner explaining the relationship with Age UK. This could be enabled on any page hero ensuring customers were clear on this wherever they landed on the site.

Progressive disclosure in the mobile navigation

A redesign of the mobile menu utilising a progressive disclosure system to simplify and improve the navigation.

Prioritising key policy benefits

Adjustments to the order of information on the policy pages. We highlighted key benefits and brought them further up the page and moved the policy details tabs further down the page.

Hi-fidelity design

The final design strikes the balance between aesthetics, usability and accessibility

Whilst at the same time ensuring a professional yet friendly experience for Age Co customers.

Our hi-fidelity prototype on Mobile

Empowering the Age Co team to impliment the designs effectively

We also created digital brand guidelines to enable the Age Co team to implement the new brand correctly.

These included guidance on colour use, use of CTAs and information on best practice for creating accessible and mobile friendly content.

Digital brand guidelines

Facilitating effective handover to developers

We ensured all the specifications were communicated effectively using detailed documentation sheets which we handed over at the end of the design phase.

We met with the developer team on numerous occassions throughout the project to sense check our designs and ensure everything we were suggesting was logical and feasible.

An example documentation sheet for handover to the developers

A final deliverable that is useful for both content creators and developers

The final file we handed over was a neatly organised Figma file including the digital brand guidelines, documentation sheets as well as an interact prototype for both mobile and desktop designs.

An overview of our final deliverable Figma file

Feedback

We had a fantastic time working on the project with the Age Co team and they left us some lovely feedback.

Danielle Stookes - Senior Marketing Manager

I’m really excited about going live with your fantastic designs. I appreciate the way you took the time to understand what we want to achieve with the brand, I don’t think we’d have done it so well were it not for your challenging and pushing us at times. So a huge thank you!

Tracy Heap - Digital Optimisation Manager

I have found working with you really enjoyable, you really did challenge our thinking which I found quite energising. I was really impressed with the level of effort you put into the designs and how easy you made it for us to review and feedback.

Lily Bartholomew - Digital Project Manager

Thanks all your hard work! Looking forward to getting underway with Netcel soon and being able to share the new site with you when it’s live.

In conclusion

I'm really grateful to have been a part of a project making such a positive impact on the lives of people in later life. We are optimistically looking forward to hearing about how the re-design has effected conversion rates.

I wish the Age Co team all the very best for the future. View the live site via the button below!