Our design team recently redesigned a high-level product category page of a company’s ecommerce site.  Client stakeholders were excited to adopt video and other rich media to tell stories about products and campaigns, and our mission was to smoothly integrate this media-rich direction with existing promotions and the page’s primary goal: product navigation & findability.  However, this came with a key obstacle: consolidating or even eliminating large swaths of detailed content inappropriate but still published on the page’s current design.

The Challenge

The bulk of our effort was spent designing a user interface for media features at the top of the page as well as structuring descriptive content about a product category and it’s ongoing targeted campaigns.  These campaigns - covering a wide range of topic types - necessitated a migration of content from disparate and floating pages throughout the page architecture into this more unified and simple page design.

As we moved through initial design iterations, our team had successfully made the case for reduced but more powerful content, and the media player UI was holding up quite well.  However, skepticism began to emerge on two fronts: (a) what kind of video storytelling are we going to actually do, and (b) can we accomplish all of our goals amid such content reduction? The dissenting voices came not just from stakeholders and design team leaders, but also a new voice in the organization: content strategists whose influence was welcome but not exactly well defined…yet.

The Solution

As these concerns arose and usability testing approached fast, our efforts immediately pivoted to assessing the impact of content strategy and migration via a prototype.  Information architects had used a pre-existing documentation system to produce numerous wireframes based on formalized templates and components (reusable page chunks).  A quick discussion between the IAs and their audience for this prototyping session - the content strategists - yielded interest and confidence that the wireframes could be extended by the strategists themselves.  While not familiar with advanced design tools (in this case, Adobe InDesign), content strategists were motivated to “draw” an experience in a real-life simulation of a copywriting and publishing exercise using these wireframes.

Step 1: IAs genercized wireframe templates of the design solution, and passed those templates onto the content strategists that would use the same design tool to “publish” their content.
Step 2: The content team performed an actual if accelerated content migration and authoring cycle using the  templates, resulting in over 20 pages of production-quality content rendered as wireframes.
Step 3: The IAs and content team worked together to aggregate the wireframes into a clickable deliverable PDF.
Step 4: The prototype was presented to project stakeholders and resulted in critical feedback leading up to usability testing.

Results

The prototype enabled the group to improve the page and component-level design, assess content migration (particularly, all that content that was to be dropped), and determine if the project’s design goals had been fulfilled.  It was also a reality check to see if the proposed video content “felt right” and addressed coherant topics amid the larger page design, even if video was represented as static images with feature titles and descriptions. Video content of high production value is not cheap, and it wasn’t possible to produce any BEFORE the video player design was complete, so we faked a toggle across multiple video features.

Shockingly, even as the content team discarded 80% of the content while migrating it into the prototype, the team actually ended up removing an additional 50% of what remained during the prototype reivew.  IAs and content strategists now had a platform for collaboration, and discovered a better solution.  The project team was left with a prototype reusable in two ways: a demo to share with their executive sponsors AND sufficient artifact - with real content! - to use in usability testing.

Just as importantly, the prototype enabled stakeholders and copywriters to transcend the design discussion and get a sense for how the design would work as if already implemented.  The two parties worked tightly to migrate and polish content amid deadlines, competing interests, and a solution that challenged the status quo of content delivery.  Thus, instead of being left with an implemented & inflexible design, the two groups  identified issues long before lock down to shape a solution they could comfortably live with.

Next Steps

Leading up to usability testing, the team was far more confident about the state of the prototype - and the design.  Much if not all of the trepidation around adopting a media-rich solution had subsided, and the group had reached consensus on what, why, and how content was going to be vastly simplified.

Irregardless of the testing outcomes, IAs were now far better equipped to write specifications and editorial guidelines for publishers based on the interaction and feedback from content strategists.  Even better, IAs and content teams were also discussing enhanced techniques for co-producing design artifacts, such as creating wireframes in Adobe InDesign while authoring copy in Adobe InCopy files dynamically linked to the wireframes.

Lessons Learned

Content strategists yearned to exercise their emerging voice, while information architects were tentative to “let go” of total ownership over what had been their deliverable.  However, the two groups combined in a mutual mission, and delivered a useful and revealing artifact.  In the end, mutual trust and shared collaboration prevailed, the design was improved, and enhanced processes emerged all within the context of a prototyped solution.