Long term support

They had been looking for a digital agency with both significant Drupal experience, and a thorough understanding of user-centred design. They wanted Curve to become an extension of their in-house digital team, helping to plan, deliver and support their online presence over several years.

We readily accepted the opportunity to work with Relate, seeing them as a perfect fit for our team. We continue to closely support them with their digital roadmap on a regular basis.

Problems we needed to solve

Relate's previous sites all lacked a consistent visual identity. Through early user research, we knew that users often found the sites difficult to navigate and hard to locate the information the needed.

Relate had websites that were not mobile-friendly, and not responsive. Their brand’s visual identity was also extensively inconsistent across all digital franchises. Information was inaccessible and hard for users to find, with a confusing and over-complicated content architecture. Users that we observationally tested often found it impossible to understand how to find their nearest Relate centre on the maps that existed in different disguises.

To top it off, a lot of micro-sites and sites for their various centres across the UK were built on a range of technologies that were cumbersome to maintain. Some were static sites, some Wordpress, some on a bespoke CMS. The main national website was built on a bespoke CMS which was owned by a supplier, restricting scalability and extensibility, and how they worked going forwards.

A condensed list of high-level objectives were defined, some of which we met as part of the national site redesign. They included:

• Make finding relationship advice easy and accessible;
• Define a stronger brand to help a wider range of audiences feel comfortable getting in touch with Relate for support;
• Develop a more accessible and usable digital offering so that new audiences can make use of the support services, regardless of device, or technical ability;
• Use metrics to better understand the impact that Relate has on relationships;
• Better integration of social media channels on primary digital products to further streamline the process of receiving help from Relate.

How we help Relate

The open source nature of Drupal’s content management framework is perfect for Relate. It gives them complete ownership of all their products which now use Drupal for their core infrastructure, with a single-sign-on (SSO) solution which we are creating in iterative phases.

Over the past eighteen months we have been completing a variety of digital projects and on-going support for Relate; from planning, design, and photography through to prototyping, development, usability testing and a refined deployment process.

We helped Relate to cater for mobile users and provided a refined user experience across many of their products as a whole. This enables users to better focus on their primary objectives: to support all kinds of relationships and help people more easily find the support they need, and also to recognise that support may be needed. Users are now more aware that Relate offer support to families, children and LGBT relationships, not just traditional marriage counselling services, which is what they were typically known for prior to 2014.

Amongst a national site and a site for parents of troubled teenagers, we have created a system for counsellors to provide online support via a secure messaging system with built-in notifications and a hierarchy of administrators that have specific use cases. All projects have been built in Drupal.

Ongoing work and support

A significant and long-term project is to build and integrate a nationwide templating system which enables their vast network of centres and digital products. We have rolled out the first phase of this, the aim being for centre managers to easily create their own Drupal sub-sites with a unique mix of both globally-shared content and their own ‘region-specific’ content.

This system we have built also means that managers can have control over some aesthetics for their centre, by providing them with access to a palette of styles adopted from the national brand style tiles. 

Intelligent Drupal deployment optimisation

We started from a blank sheet to completely rethink the way that Relate’s digital products are developed, tested, staged and deployed. This also provides a more seamless way of addressing hotfixes, security updates to Drupal core, and contributed modules.

We put this system in place as a priority, so that a more responsible, robust development workflow was in place before we started looking at addressing their features roadmap.

In summary, we have done the following:

• Set up identical local development environments across our Drupal team, mirroring the hosting setup;
• Collaborated with Relate to create a set of base level behavioural driven development (BDD) tests, before further development took place;
• Set up an automated build process for the BBD tests to run while new features are being developed;
• We now specify user stories and acceptance tests as the functional specification for new features and micro projects;
• We configured development and staging environments to automatically pull content from live so that and configuration in the database is not overwritten;
• As an ongoing task, we are abstracting the site (where relevant) into features that are stored in code so that the deployment consists of code changes only;
• Continuous integration is now in place across all their sites.

Relate's National site re-design

Discovery workshops

We started our work designing a new, responsive website for Relate with a series of stakeholder workshops; starting with audience research and persona creation, through to defining key user journeys that the new site needed, and then further defining user stories. All of these elements effectively became the functional specification for the recreation of the national site.

Creative direction was also led by our team early on in the project, working with stylistic moodboards. We looked to combine a heavy use of large full-screen photos of a variety of people with simplified, easy to use interfaces designed with clean lines and slightly curved edges to give a friendly but equally trustworthy feel.

Content planning and creation

We orchestrated a complete information architecture redesign. This included creating new content starting with a tone of voice workshop with internal stakeholders to develop their brand language.

A large amount of content migration, merging and refinement was then completed mainly in the collaborative online tool Gather Content. This enabled an objective, clear way of monitoring content sign-off and population progress, whilst also keeping inline WYSIWYG styling as clean as possible. We next set about rewriting the content on the site, creating a new brand voice for Relate and showcasing their wealth of relationship expertise.

Our content team worked closely with Relate's counsellors and therapists to ensure the advice the site reflected their expertise. From this, we helped Relate produce brand guidelines on writing new content so that they were able to ensure consistency across future publications and websites.

Observational usability testing

We created responsive in-browser prototypes for the new responsive site early on in the project. We focussed on getting real content in the areas of the prototype that were required for enabling key user journeys to be tested out on real users as soon as possible. This enabled us to work closely with Relate to iterate and refine the user experience very early on in the project through our process of observational usability testing on the prototype, in our UX Lab.

We recruited a range of users to get a good spread for the user research, performing usability testing over six independent sessions, covering user journeys across a range of devices from mobile to desktop.

The user experience design of the interactive responsive prototype was iteratively improved, based on evidence collected, analysed and agreed on with Relate after each session.

The in-person usability testing process is invaluable, helping to validate broad architectural decisions, but also further informing us to help:

• Identify areas that needed an architectural rethink;
• Optimise the UX copy (or labelling) on buttons and other interactive elements;
• Refine the navigation;
• Identify the need for new content;
• Highlight content that was effectively duplicate, and could be merged or removed;
• Understand that some iconography doesn’t make sense to site users, and needs changing or text adding as an accompaniment.

Creative treatment

We worked as a team with Relate to help them build a new visual identity, developing revised colour palettes and typographic elements which reflected and supported their brand evolution. It was important for the design, fluidity and layout of user interface elements to work well with a variety of content, but also to feel consistent across a range of devices from mobile through to desktop.

For the photography, we wanted the focus to be on people, and ensure that a wide range of website users could identify with the people in the photos. Our aim was also to  showcase real relationships and a range of emotions. We recruited a cast of real people (not official models), to represent a range of ages, genders, ethnicities and sexualities. In the planning phase for content production we researched locations in Leeds, Doncaster and London, then organised the shoots with our photographer.

We printed layout templates for each shoot to ensure that a series of specific compositions were required for each shot, in order for the photos to work well with our typographic design layouts. Finally, our creative direction for the post-processing work was to emphasise realism and grittiness, where appropriate, through punctuated lights and darks.

Drupal development work

The build included several bespoke features such as discussion forum and interactive map functionality. The interactive map for finding your nearest counselling service was to be used internally as well as by the public, prompting a need for a set up that allowed a variety of queries to pass through it each day.

We also included natural language search using SOLR, and integrated a secure WorldPay system. We also revised page titles and meta descriptions sitewide to help the site look good and be more likely to convert relevant users in search results.

Search metrics such as click-tracking and regular analytics reporting was of high importance to Relate. We offered consultation on their GA tracking, and set up subdomain tracking across their various franchise sites to ensure that user journeys could be more accurately reported.

Measurable project outcomes

Relate's national site and the Parenting Troubled Teens site have been highly successful with an increase of over 65% use on mobile and tablet devices.

Within just three months of the initial launch of the new Relate national website the following was noted:

• 25% increase in visitors to the website;
• 20% increase in calls to Response, their national phone line;
• Facebook engagement had increased to the extent that every one of their  top 10 most engaged-with posts were from within the last two months.
• Twitter reach doubled within six months, and continues to grow.

Since the national site relaunch in 2014, Relate have been overwhelmed with positive feedback from users, colleagues, partners and stakeholders.

Client Testimonial

Written by James Small, Senior Digital Manager, Relate.

Our content structure was messy and confused, and users told us that they were unable to find what they were looking for. By listening to our users and analysing their behaviour, Curve were able to help us rationalise the architecture of our site to allow users to get to the information and support they need.

Our new national website makes the user journey much simpler and speaks to our users using their own mental model, rather than in the internal language of our organisation. Getting service through our website is much easier now, due to the task-oriented design.

The Drupal platform allows us make updates to content on the fly, and to release layout and functionality improvements more quickly and efficiently. Curve continues to support our development needs as we refine and iterate the functionality of our website.

I would recommend Curve for mobile-first web design, User testing and Drupal development.