Sharing is caring!

In the beginning of this year, my team and I focused on a redesign for a small company IBM acquired, Blue Box. This project gave us the opportunity to better understand the relationship between support and documentation. Here is an outline of the UX process we used to approach this redesign exploration and the lessons we learned.

What the customer needed

In 2015, IBM acquired Blue Box to add to its cloud offerings. The company now had the task of overhauling its public facing assets. Requiring more than a visual rebranding, Blue Box came to us on the Bluemix team to help them optimize the help documentation experience.

Help Documentation Redesign Exploration As is

“As Is” Look at the help documentation landing page

Redesign exploration and the UX process

Project kick-off

To ensure that communication and expectations were clear between the stakeholders on Blue Box and the design team on Bluemix, I started the project with a two hour kick-off. This meeting had two parts. 1. Introduce who would be working on the project and our process. 2. Outline the needs from the Blue Box team.

One of the challenges we had was that the Blue Box team was mostly in Seattle and my designers were in Austin. Due to schedule conflicts, we all couldn’t travel to the same location. So, I had to have the kick-off meeting online.

Unless these online meetings are planned right, they can degrade into unfocused round table discussions. In order to combat that, I used the web tool Mural to run the group through a few group activities.

  • Empathy Map – understand who the user is
  • Current State Experience Map – understand what the user is going through
  • Who What Wow – How can we make this a better experience for this user
  • Feasibility verses Impact – What can we actual do
Help Documentation Redesign Exploration Kick off workshop

Kick off workshop. Give the stakeholders an opportunity to democratically get their ideas and concerns out.

Content audit

The first step after the kick-off was to look more closely at the links in the help page. How were they organized? I went through and categorized all of the content. I found that aside from a duplicate articles, there were a lot of articles focused on explaining specific technologies and issues. In other words, the user would have to know exactly what to search. The site did not give the user much opportunity to browse and discover.

Help Documentation Redesign Exploration Content Audit

Content Audit of articles and hierarchy.

Whiteboarding, Sketching, and Wireframeing

Layout and wireframing

Once I had a clear idea of how Blue Box envisioned the architecture of the content, I could get started on the layout of the page templates. How do the pages handle content types such as code examples?

Help Documentation Redesign Exploration whiteboarding sketching and wireframing

Early steps to understand layout and interactions

Help Documentation Redesign Exploration wireframe templates

Page templates for content types identified from audit

Help Documentation Redesign Exploration Detailed wireframes

Detailed wireframes

Search Interaction modeling

I also invested time to design a search interaction model to help the user understand the best search result to click. Tags helped the user skim the results quickly and click on what appeared to be most appropriate.

help documentation design exploration case study search interaction

Search interaction. Exploring how we can categorize results to make it easier to digest

Visual exploration

Finally, we added the visual look of the site. One of my designers added icons to help users quickly find content by easing up on forcing visitors to read a lot of text. We restyled the color palette to live in the same family of Bluemix but also stay true to the current Blue Box logo. For full disclosure, this was not the final version that made it to release. It was the version that the team felt was the most daring.

help documentation site redesign exploration case study

Reflections and next steps

The search interaction was ambitious for a straightforward help documentation site. The early feedback we got was that searching was very jarring. After studying how and why visitors search for information on this project. I now know that they are looking to quickly find an answer to a problem. The interactions only need to aide them and not impress them.

Blue Box offered some interesting challenges as far as reorganization of the content and serving it up in a way that worked with our technical limitations. At the same time, we also learned more about the relationship between providing human guided support and offering self-help options when appropriate.

This work and more are available at Matteng.me.



Matt Eng

Matt Eng

DesignOps Manager. Based in Austin,TX. Worked with clients such as Alcatel-Lucent, Ogilvy, RBC, Deloitte, Whirlpool, Polycom, Symantec, and Pebble. Matt teaches, mentors, and speaks about design, creativity, and fostering stronger connections within teams.