Jo and Hayden looking at a wall of web pages and post its

With a stellar reputation and market-leading products, our client is renowned worldwide for cutting-edge research and innovation. However, these strengths weren’t well reflected in their international websites.

Part of the challenge was a result of their existing design ops processes. The operations team would work to ad hoc instructions from industry-specific marketing teams, laying out predefined content into wireframes, before handing off to the development team for build. This led to a lack of consistency in visual, UX and content design across tens of thousands of pages that undermined both usability and credibility, and seriously impacted their business goals.

A small, newly-formed UX team had been tasked with turning this ship around, and they quickly identified an opportunity; upskilling this much larger web operations team in UX and content design, and in new roles as ‘Story Authors’. However, this solution would inevitably spawn new challenges:

  • How would the operations team begin the transition from deadline-focused project managers into user-focused ‘Story Authors’?
  • How could the operations team’s Axure wireframing software be set up to support and standardise good decision-making?

Our team of a UX designer, content designer and visual designer had three weeks to develop, build and document a prototype of an Axure story-authoring ‘tool within a tool’ to introduce scalability, repeatability and efficiency into their nascent content and design process.

The Results

Page-level ‘blueprints’

A template for product application pages gives story authors a consistent framework for the structure of the page, annotated with explanations of how each section can fulfil user needs and business goals.


Content ‘stencils’

Drag-and-drop stencil components for their wireframing software, complete with replaceable placeholder content pre-optimised for usability and search, allows Story Authors to build out the blueprint wireframe by selecting stencil components from these curated collections.


Guides and supporting documentation

A set of guides, processes and diagrams including example content, user-centred rationale and usage guidelines help with Story Author onboarding and familiarisation.


The Full Story

How do you define user needs when the user needs to define the end user’s needs?

This project kicked off with a two-day session at our client’s office. We began with a series of workshops to gain a deeper understanding of internal procedures, the team’s user needs, the project success metrics and goals, and any relevant tools and resources.

We also used this time together to determine where this project could provide the most value which was summarised under the three principles of: repeatability, scalability, and efficiency. We also agreed that the ambition for the three weeks would be to create a page-level blueprint and set of stencil components that would demonstrate how a common page type – in this case, a product application page – could be constructed and designed by Story Authors using an Axure prototype.

An illustrative diagram of the new Axure story-authoring system
An illustrative diagram of the new story-authoring system

How do you standardise the content and architectural flow of an effective page?

We began by surveying a selection of different types of product application pages from the client’s various regional and national websites across North America and Europe, Middle East and Africa (EMEA). This bird’s eye view approach enabled us to identify the patterns and commonalities of this type of page, which would form the basis of our page blueprints. It also highlighted some notable visual, UX and content design irregularities which helped us to understand some of the challenges their teams were facing.

Naming the constituent elements within the page was an important step. Each part of our page blueprint needed to be prescriptive enough to adequately guide the Story Author, without limiting the potential richness of the content that could be used to build an effective product application page.

We arrived at an archetypal product application page flow, based on five robust user-centred design principles:

  1. Orientation
  2. Challenge
  3. Solutions
  4. Supporting Information
  5. Retention
Hayden and Jo audit the engineering brand's website

How do you maintain momentum and progress during a fast, complex project?

The process of producing our deliverables was streamlined and strengthened by sticking to a tight feedback loop, sharing work-in-progress, and continuously iterating and improving.

This adaptive process resulted in some significant benefits that might otherwise have been overlooked, such as:

Our progress was also aided by the results of three usability tests conducted with current members of the operations team, the Story Authors to-be. These tests were invaluable opportunities to see how the users engaged and responded to the Axure blueprint and stencils, the accompanying guides and the additional documentation. The findings helped us identify precisely where we needed to provide clearer guidance, greater structure or increased flexibility for the user.

What does someone transitioning to a new user-focused content or design role need in order to make good design decisions?

Clearleft’s involvement with this design ops project resulted in a few key deliverables that would help these inexperienced new roles start on the right foot for the creation of new website content designs:

Page blueprints with supporting guides

The Axure blueprint was annotated with the information set out in the guide, which was also uploaded into the Axure library, including:

Axure stencils with supporting guides

A number of application page stencils were created in Axure and grouped into related Collections, ready to be dragged-and-dropped easily into the page blueprint.

Each stencil’s supporting guides were separated into three documents within the Axure library, clearly presenting the information for quick reference:

  1. Overview – recommended usage, general guidance and a populated example
  2. Rationale – demonstrating how the user’s emotional journey can be mapped to each component in the example
  3. How To – technical instructions, prompts on possible framings, an image of the Axure stencil with the placeholder content

Illustrative diagram of the new story-authoring system

For onboarding new team members, presentations for stakeholders and as a quick reference guide for Story Authors, a diagram was created to illustrate how the story-authoring tool related to the client’s existing pattern library.

Content Ops guide

After reflecting on the feedback from usability testing, the team were inspired to create additional documentation detailing how story authors will play an active role in the processes of user research, content planning and content creation. It explains how collaboration with marketing teams and other stakeholders can result in stronger, more effective content across the site, more productive teamwork and a deeper shared understanding of the chosen design solution.

Queen Mary University of London Queen Mary University of London
Theirworld.org Theirworld