We can relate

Understanding the challenge

Relate's brand was evolving to become more approachable and accessible. The new online experience needed to reflect this and get users to the help they need, seamlessly.

The charity was best known for supporting individuals and couples with counselling and sex therapy, but they also offer counselling for families, children and young people. A brand repositioning was in development with advertising agency Ogilvy UK, to highlight the breadth of relationship support on offer. 

First and foremost, Relate clients were looking for someone to talk to about a relationship problem. Unfortunately Relate's out-of-date website was a barrier. They turned to IE Digital.

Internal stakeholder engagement

Relate works to a federated model, with 45 Centres across England and Wales. Each Centre also offers services through a network of licensed local counsellors. The local Centres are free to operate their own websites, which creates confusion for some users. Relate would ultimately love to bring everyone across to the same platform. Our brief was to create a new website that was so functional, beautiful and simple to manage, the Centres wouldn’t consider using anything else.

The project's success rested on good engagement with key stakeholders from the wider Federation. They needed to feel listened to, not railroaded by the National charity.

We invited managers and senior staff from across the charity to help us shape the digital experience. First we ran an online survey, which informed workshops with three working groups:

• Services and operations
• Income generation and brand
• Federation

We workshopped their opinions of the old website, and their hopes for the new one. This was from both their own perspective, and those of their audiences. This provided a wealth of professional insights.

Exploring user needs

We mapped out Relate’s most important audiences. We created Epics and User Stories for each and mapped their omnichannel user journeys.

• Potential clients
• Current clients
• Professionals, including counsellors and other potential staff
• Organisations
• The Relate admin team

For potential clients, it was important to understand the varied feelings, motivations and need states at work. One person might want ongoing relationship advice, while others turn to Relate for support in the middle of a relationship crisis. We likened these extremes to a motorist looking for a mechanic – the difference between booking a regular service and needing roadside support in an emergency.

Some people visit the site in moments of distress, so it needed to offer a calming experience. But the old site was overwhelming for users, with a plethora of options and a huge volume of information. It was important to modernise and simplify the online experience, with user needs at the heart of the design. 

Other users might be curious about the services available, trying to find their nearest Relate Centre, or looking for self-help relationship advice. They may even want to become a Relate counsellor themselves.

External audience interviews

Once we understood what everyone within Relate thought their users needed, we went to the users themselves. We needed to test certain assumptions about their needs, and the existing website.

We arranged several qualitative interviews with members of Relate’s key audience groups. This gave us their unfiltered perspective to inform the online experience.

Working with IE Digital has been a dream. They made a complex and overwhelming project not only manageable, but fun. They took the time to fully understand our brief and us – something which really shows in their proposals. This won't be the last project we work on together, now I can't imagine working with anyone else.

Sarah Berry, Head of Digital Innovation, Relate

Bringing conversations to the fore

Relate told us they were looking for a digital transformation agency to challenge them and look at things differently. They wanted to hear from experts who would surprise and delight them.

Our pitch presentation did exactly that, leaving Relate’s team with plenty of food for thought. At the heart of our recommendations was the need to bring their new strapline, “We can Relate”, to life online.

A conversational approach

The old website felt too impersonal and corporate for a charity centred around relationships. In IE’s view, the new site needed a much more conversational approach. To stop ‘talking at’ people, and really ‘show’ the great work that Relate does for its clients.

We shared our vision to put ‘chat’ at the centre of Relate's engagement strategy. Chats between Relate and its clients, as well as chats between clients and their partners, families, friends, and colleagues.

Recommendations for a more relatable Relate

We recommended Relate make ‘Chat to us’ the site’s primary call to action.

Relate’s online chat service was a great selling point, but was necessarily limited. It was a big cost and time commitment to have it manned by accredited counsellors, and could only be operated during a restricted set of days and hours. We suggested Relate expand this. First, with a chatbot that guides users to content and features that might help them. Then alongside that, an expanded live chat option led by trained operators, that allows visitors to reach out to a real person quickly. The operators welcome people and guide them to the support they need, playing a big part in converting visitors into clients.

Relate loved IE Digital’s pitch and our vision for the site, which was borne out by our research.

Keeping chat front and centre

We embedded the idea of good conversations in the fabric of the website, stylistically as well as functionally.

The homepage leads with animated text, showing typical relationship problems typed onscreen.

• We turned the “Ask Ammanda” feature into a more dynamic, conversational messaging format.
• We ditched the old virtual assistant chatbot, which wasn’t up to scratch. IE shortlisted, evaluated and demoed alternative chat platforms, selecting Comm100. This became a key part of Relate's new website with new workflows and logic to guide users.
• In keeping with the new, more conversational style, page titles became more descriptive and relatable. 'Joe and Bill’s story' became 'My partner has cold feet about getting married'.

Flattening the information architecture

It was clear that the old website made it too difficult to get help. It was forcing users to choose a path without properly explaining where the path would lead. The improved site structure and the new chatbot help users to make more informed choices.

The old site also had a vast amount of good quality self-help content, but it was buried in layers of structure and difficult to find. IE Digital flattened the site’s content hierarchy and introduced a ‘dynamic search’. Users can type a question or keywords to see relevant search results, categories and tags.

This new site structure provided the basis for a review of all existing content.

Designing the User Interface

IE developed a set of low-fidelity prototypes – interactive wireframes – and storyboarded key parts of the site. This helped everyone to visualise the homepage and menu system, and see the mobile experience.

We formed a UX team including champions from our working groups, key audience representatives, and the project team. They validated the new Information Architecture, prototypes, storyboards, and so on.

Then we recorded a video walk-through of the user experience, which was shared with stakeholders from across the charity. This demonstrated features like the ‘Chat with us’ overlay and how we planned to bring the site to life through animation. We then incorporated feedback and rolled out a full set of designs for sign-off.

Simplifying the technical architecture

This was to be a multi-faceted digital transformation, including re-platforming, new systems, and new operational processes.

Before IE arrived, Relate’s old technical architecture ecosystem was complicated. Relate had two websites built in Drupal 7, two in Drupal 8, a chat platform, and 2 different payment systems. Our vision was to completely simplify this, starting with the new website. Some secondary platforms had a surface restyle for the time being, and will be integrated more closely in a future phase. (See diagrams of before and after technical architecture)

The new technical infrastructure needed to be adaptable enough to enable future development. Drupal 9 gave us the flexibility and robustness we needed, and was a natural next step for the Relate team too.

Final flourishes

We took the Relate team through our ‘Web Trends’ exercise to see the website 'look and feel' that appealed to them. This informed the design approach along with the new visual identity created by Ogilvy UK.

Our front end developers added some final flourishes to the site to ensure a beautiful, slick translation of the new brand. The ‘chat with us’ button, shaped like a speech bubble, minimises into the corner of the site as you scroll. This teaches the user where to go once they are ready to engage. The button animates subtly to remind users that chatting is an option. A parallax scrolling effect on the homepage also gives the illusion of more depth.