Designing for repeatability, scalability and efficiency

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.

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

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:

• The expansion of documentation to surface the rationale underlying each component of the stencils.
• Maintaining the annotations in the blueprint, so the Story Authors can continue to refer to this guidance after they’ve started populating the blueprint with the stencils.
• A greater emphasis on the relationship of good design leading to enhanced credibility.
• More prescriptive and useful placeholder content in the stencils.

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:

• Instructions for the Story Author on the purpose of the blueprint
• The requirements the Story Author would need to gather before starting to design
• A diagram of the page structure as defined by the core UCD principles
• A description of the purpose of each principle

• Content examples demonstrating different ways to frame the story of a product application page

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.