Menu

The UX of UX: Improving team communication

Written by

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

A challenge that 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. Typically this would be communicated through comprehensive UX documentation; an amalgamation of sitemaps, user flows, wireframes and corresponding component list, all packaged up into a healthy 250 page PDF.

UX documentation current Fig 1. UX specification Vol 1 of 47

In early 2015 the product design team at Ostmodern were preparing to begin detailed design production on a prodigious and complex project for one of the world’s leading media organisations. Following two months of creative strategy and a further three months of prototyping, testing and concept definition, we had a clear idea of the pure scale of our outputs.

As a creative team it is important to retain a dynamic approach from project to project, where agility and continuous adaptation overrides crafting one single process to ‘perfection’. With regards to this 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.

The Issues

We discovered there was a selection of issues that all teams seemed to have in common:

  • UX specs bypassed in favour 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 is looking at the most up to date versions.
  • 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 the internal production process amongst the multidisciplinary teams working together on this vast product.

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. One dynamic document and one 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. Although typically used for prototyping products themselves, we were able to manipulate the principle functionality of linking one view to another to build the structure of our interactive document.

UX documentation levels Fig 2. Interactive levels of our new UX documentation

Starting from the site map, users were able to 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.

UX documentation wireframe Fig 3. Interactive UX documentation wireframe

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 analysing 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 centralised service, saves time.

Transparency
The documents 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 far easier to understand a product's scale, its function and the relationships between content.

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 two.

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 centred approach inwards, as well as outwards. It enabled us to build an understanding of each teams daily challenges, encouraging a cultural bridge and providing an environment to work more collaboratively.

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 & interactions on the page according to the rules and logic that had been specified.

There is no perfect way of delivering UX and Design, but this approach has highlighted the measures that can be taken to provide the best experience for user experience design consumers.

Ready to talk to us? Interested in visiting?
Contact hello@ostmodern.co.uk or
call us on +44 (0)203 215 0041