Quick iteration and visual design exploration
For this project, we partnered with Content Rules to provide content strategy, information architecture, and design for the re-work of an internal help tool at Google.
TimeframeJuly 2012 (around 140 hours total work)
Over the years, a team at Google maintained a help site for an internal tool. The tool was being updated, and the help needed updating in kind — both new content to reflect the new UI and workflow, and a way to organize that content.
We were initially asked just to produce wireframes and visual concepts but ended up providing the content strategy and Google Sites templates as well.
We did a content audit of the current help site, gathered feedback from users through an online survey and user interviews, and learned the tool. We used that feedback to draft a proposed IA and template design.
Design and iteration
We gathered feedback on those templates from stakeholders and went through two iterations. Once wires and IA were approved, we presented two visual concepts of the wireframes.
Once a design was approved, we created templates in Google Sites.
The design was constrained by the HTML and CSS limitations of Google Sites. Our solution was to come up with a style guide for design and HTML. We created HTML clippings as “wrappers” or “containers” to plug into the HTML code in a modular fashion to maintain design and consistency throughout the site.
Working closely with the content writer helped us realize the importance of having straightforward documentation for implementation. For those with basic knowledge of HTML and CSS, it’s helpful to see design broken down into modular components to create a page suited to the content.
For some projects, the use of a mock-up or screenshot with comments helps to get a point across quicker than verbal or text documentation. Creating a highly visual style guide customized for this workflow helped to increase productivity.