Empathy is one of the key human characteristics that drives product designers’ methodologies throughout the design process. We place ourselves into the mind of our user, endeavoring to create captivating, intuitive, and usable experiences.

Here at Ostmodern, a challenge we regularly encounter throughout the production process is effectively and accurately communicating our design intentions across the multidisciplinary teams involved: project management, product, development, and QA.

We typically communicate this through comprehensive UX documentation—an amalgamation of sitemaps, user flows, wireframes, and corresponding component list, all packaged up into a healthy 250-page PDF.

In early 2015, our product design team was preparing to begin detailed design production on a prodigious and complex project for one of the world’s leading sports organizations. Following 2 months of creative strategy and another 3 months of prototyping, testing, and concept definition, we had a clear idea of the pure scale of our outputs.

It’s important for creative teams to retain a dynamic approach from project to project, where agility and continuous adaptation overrides crafting one single process to perfection. So we began by approaching each team involved, uncovering issues they had on previous projects regarding how defined UX and design was communicated to them. It soon became clear that our design and UX specifications (themselves) were suffering from a lack of usability. Irony in its purest form.

“Are your team’s UX specifications suffering from a lack of usability?”

The issues

We discovered some issues that all teams seemed to have in common:

UX specs bypassed in favor of visual design due to them being documented separately, leading to features not getting built to the correct specification
Distinguishing where certain views sit within the holistic product
The time it takes to reference between wireframe views and associated component lists at the end of the document
Knowing that each team was working from the most up-to-date version of the specification
Having multiple documents for different product features

The opportunity

By distinguishing these issues, we were presented with a project inside a project: the user experience of user experience, and an opportunity to greatly improve the efficiency of our internal production process.

From here we were able to put together a mission statement:

To create a definitive structure that marries UX with design, allowing users to methodically navigate through the layers of a pre-defined product architecture, with direct access to functional intricacies. 1 dynamic document and 1 source of truth.

Our solution

Interactivity was the key piece of functionality that we needed. A tool that would allow us to create hotspots, deep linking the user to and from relevant views within the product architecture.

InVision was a tool we were very familiar with. We were able to manipulate the principle functionality of linking 1 view to another to build the structure of our interactive document.

Interactive levels of our new UX documentation.

Starting from the site map, users could navigate directly to sections of the product, where they were linked to the detailed wireframes for that section. From here they could toggle between the wireframes and corresponding visual design for this view, which also contained a link to the associated Sketch file and style guide in Dropbox. Within the wireframes they could select highlighted components that linked directly to detailed component sheets. All views contained a selectable breadcrumb, meaning users could easily navigate back through the document layers.

As the specification evolved over the months, versions of the document were stored in Dropbox, with the most up to date always linking to InVision Sync. This ensured that each team involved could only be exposed to the latest version.

Interactive UX documentation wireframes.

How it went down

The advantage of trialling this process on a project of this magnitude was that, from the outset, it could be stress tested with large-scale documentation.

After communicating with all of the teams and analyzing the outcome, there are clear aspects of this process that will be advantageous for future projects:

Scalability
It provides us with a reusable platform, allowing us to apply layers of detail and, where required, to add clarity (linking to motion demos, interactive prototypes or asset files).

Workflow
Syncing with Sketch and being able to take that through to prototyping and development, all within the same centralized service, saves time.

Transparency
The document’s online presence provides a transparent, single source of truth for all teams, with interactivity demystifying any perceived product complexities. When you can navigate around documentation contextually, it’s easier to understand a product’s scale, its function, and the relationships between content.

What did the various teams have to say?

“It’s been really efficient in being able to link off to the InVision UX/D on development tickets rather than having to go through many pages of wireframes, taking screenshots to add them to the user story. The functionality of being able to switch between UX and design views has been good in ensuring requirements weren’t missed between the 2.”
–Hansa Vagadiya, Product Analyst at Ostmodern

“I like the idea of having everything in one place and knowing that it’s the updated version. It’s straightforward and has helped me write my test plan/test cases”
–Zahra Hassan, QA at Ostmodern

“The Python team found the InVision documentation really helpful as a reference tool. It was useful for efficiently checking the data needed for each page, making sure we were providing what was needed for the displayed data and interactions on the page according to the rules and logic that had been specified.”
–Tony Bajan, Senior Python Developer at Ostmodern

What we learned

Through embracing the issues identified and initiating this adaptive process, the importance of communication across multidisciplinary teams became clearer than ever. It challenged us to harness our skills and direct our user-centered approach inwards, as well as outwards. It enabled us to build an understanding of each team’s daily challenges, encouraging a cultural bridge and providing an environment to work more collaboratively.

There’s no perfect way to deliver UX and design, but this approach has highlighted the measures that can be taken to provide the best experience for UX design consumers.