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.
Redesign exploration and the UX process
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
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.
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?
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.
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.
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.