In 2015, IBM acquired bluebox to add to its cloud offerings. The company now had the task of visually overhauling its public facing assets. Requiring more than a visual rebranding, bluebox came to us on the Bluemix team to help them optimize the help documentation experience.
What I did
To ensure that communication and expectations are clear between the stakeholders on bluebox and the design team on Bluemix, I started the project with a two hour kick-off.
The first step 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 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.
Layout and wireframing
Once I had a clear idea of how bluebox 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 give the user skim the results quickly and click results that 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 bluebox 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.
Research, Strategy, Wireframing, Visual Design, Prototyping, Sketch, Photoshop and Illustrator
Interested in viewing the full project? Contact me to meet up for coffee.
Product Design Lead and Maker of Things at IBM Design.