Case study
Improving brand awareness

Six months after introducing a new visual identity, Marie Curie launched a supporting marketing campaign aimed at increasing public awareness of the charity and it’s work. A TV ad and other multi channel marketing activity were expected to generate an increase in traffic to the website.

The brief

The design of the existing homepage and landing pages had not been revisited since the website was launched the previous year. Key pages needed evaluating to ensure they could support the onward journey for people arriving on the website off the back of the increased marketing activity.

Light in the darkest hours TV campaign

Responsibilities

  • User journey development
  • User interface design
  • Accessibility improvements
  • Mobile optimisation
  • Front-end development
  • CMS integration support

The approach

We worked with external agency DAM Digital to develop the user journey. The existing homepage and landing page contents and layouts were assessed by asking the the following questions:

  1. Can users intuitively get to the information they’re looking for?
  2. Is the information actionable? Are the next steps clear to users?
  3. Does the information evoke an emotive reaction in the user?
  4. Does the user understand the value of the work Marie Curie is doing?

This work identified priority areas for improvement, including:

  • A new hero block to capture the attention of visitors, while supporting video playback and a campaign call to action.
  • Clearer grouping of content and navigation blocks on key landing pages.
  • Introduction of task based call to action blocks.
  • Maintaining proportional content hierarchy over smaller viewports.
Wireframe and supporting documentation for the homepage
Wireframe and supporting documentation for the about landing page
Wireframes produced by DAM Digital

What I did

The brief for the visual design was open, and I saw an opportunity to update some of our core UI patterns, most of which had been created prior to the launch of the new visual identity. Before producing finalised user stories I allowed some time for design exploration to refine our existing patterns and make them more consistent with the evolved visual identity.

For the design exploration I created quick mockups using InDesign, creating several variants for design patterns in each of the priority areas identified by our earlier research. I printed these out, cut them up and moved them around during discussions with the team and stakeholders. This helped people to better understand how the layout was constructed (as well as deconstructed during development). This made it much easier to see what was working and where common patterns emerged.

Cut and paste design exploration work on paper
Cut and paste design exploration work on paper
Cut and paste design exploration work on paper
Cut and paste design exploration work on paper
Cut and paste visual design exploration

The content and layout of the pages was subject to several rounds of stakeholder feedback and sign-off. The cut and paste mockups gave me enough information to provide a technical spec to the development team, while still allowing clients to make minor design and content changes without eating into the development time.

As the designs were refined I started to prototype the new designs and integrate them with the website’s modular design system. Even though we were only making significant changes to a few page layouts, the modular design system allowed improvements to content managed blocks to be applied globally. I was also able to make a number of accessibility improvements; including removing adjacent links from content promotion blocks and improving the alternative text descriptions.

Spec for the hero image and video player block
Spec for the support line banner block
Spec for the case study block
Technical information supplied (along with HTML prototypes) to the development team

Technical delivery

The development work was completed over two sprint cycles. I supplied a mix of HTML prototypes with supporting visuals and documentation to the development team. I updated and refactored the Sass, introducing BEM syntax to help us scale more complex patterns. I worked with the developers to integrate front-end code and supported throughout the QA process and bug fixing. I also helped run the demo, where the team presented the improvements to the content team and key stakeholders.

Outcomes

The improved content hierarchy and layout was implemented on the homepage and ‘Who we are’ page, and resulted in an immediate drop in the bounce rate. An increase in traffic and session length indicated that the onward journey was better supporting people arriving at the site as a result of the increased marketing activity.

An improved suite of content managed blocks gave editors the tools to create mobile optimised landing pages with clear content hierarchy and calls to action.