Accurately transmitting and translating insights derived during the 'strategy' portion of a web design project is crucial. Without it, effort is wasted and results suffer. To address this challenge, we’ve developed a new process and set of documents, driven by narratives.
In this first of a series of articles I will lay out the problem and our solution to it. In subsequent articles we will dive into the new deliverables (site narrative, pages narratives, and expanded sitemaps) one by one, providing examples and templates for you to adapt to your own process.
The challenge of specialization
As teams have evolved to provide stronger strategic direction for clients, the roles of individual team members have become more specialized. This contributes greatly to the overall quality of a project and/or campaign, but also carries with it challenges, specifically in the area of communicating crucial information found in research and passing along the insights and decisions made from one phase to the next.
The role of processes and deliverables in transmitting insights
In order for teams to successfully transmit ideas from one phase of the project (design) to the next (development), they produce deliverables (e.g. sitemaps, wireframes, design comps) and processes (e.g. daily standups, dev check ins, etc.) to ensure that insights gained early on and decisions made are both understood and respected as the project moves from design and production.
Today, with the importance that strategic planning and research plays in the successful outcome of digital projects, communication has become that much more important. Too often, despite our best efforts to put the right processes and deliverables in place, there’s a certain amount of disconnect that occurs, particularly between the strategic direction decided upon at the outset and its ultimate creative execution and development.
Deliverables related to strategy
Take the typical deliverables of a strategic discovery, for example. In a web project, these documents tend to be more verbose and nuanced and include items like:
- Stakeholder interviews
- Market research
- User Personas
- Journey Maps
- Competitive analysis
- Value proposition, positioning, and messaging documents
While these are valuable insights that go a long way in developing successful, multi-faceted marketing plans and digital initiatives, they are meant to be comprehensive and not designed to provide specific project direction that a UX, content or development team can use to begin translating the strategy into design and functionality at more granular levels.
Deliverables related to design
On the other hand, design deliverables for a web project, while still somewhat nuanced, are much more concrete. Over the years, two documents have become fairly standard for web projects:
- Sitemaps (site architecture), and
- Wireframes (layout and/or UX)
These are often constructed by an IA or UX designer and should be driven by the strategic discovery that had gone on before it.
What is too often the case is that the sole deliverable that ties strategy to design is a sitemap. This is problematic because, at its most basic, the sitemap is an extremely high-level view of a website’s structure and fails to transmit strategic insights to guide and constrain the UX designer in the construction of wireframes. It delineates the what and where of website, but fails to express the why.
This puts the designer in a place where they have to substitute sound strategies with educated assumptions, which makes the project vulnerable to a lesser outcome than anticipated by the strategists.
Deliverables that attempt to bridge the strategy and design gap
This isn’t a new problem, but it is on that is becoming more important as we see more resources dedicated upfront to strategy while, at the same time, teams are getting more specialized and complex.
Various documents have been used and developed to help bridge this gap, however many of these are either too high level (creative briefs), too abstract (user flows), or answering the wrong questions (page description diagrams).
The limitations of these documents got us thinking about how best to close the gap between project strategy and execution, while remaining rooted in the idea of designers as storytellers. The need to transmit the “why” led us to an irrevocable conclusion: narratives.
A New Approach: Narrative Design
To maintain strategic continuity at every level of production, one of the most effective mechanisms that we’ve found is to develop strategic narratives. These new deliverables are developed during the strategy phase of a project and lead each team through each subsequent phase. The process looks something like this:
The Breakdown
Site Narrative - a short document, similar to a creative or project brief which includes- The overall narrative of the site - developed from the company’s value proposition(s).
- The goals and objectives of the project.
- The Audience(s) the project is intended to reach
- The success metrics - KPIs, baselines, projections/targets.
Page Narratives - a detailed document for each parent and child page on a site. It ties the page to the site narrative, describing the following:
- The why and what of the page
- The primary message on the page
- Data, assets and functionality that support the primary message
- User flow including suggested CTA
- Site architecture
- The related page narrative for each page
- The design layouts that will be used for each page
Why Narratives?
Narratives tie together the storytelling with the actionable, the qualitative with the quantitative, the mushy with cold hard data. They translate the user flows, site flows, and buyer journeys into a single-threaded shotgun narrative that leads to actionable steps on a page level which can be mapped and measured in analytics.
What's Next
Each of these deliverables are explained extensively in subsequent articles, along with examples and templates for you to adapt to your web design project process.
- Site Narrative
- Page Narratives
- Extended Sitemap
Comments