The Bluemix Docs teaches developers how to use IBM’s cloud platform and the 100+ services offered on it.
I was the user experience designer and researcher for the Bluemix Docs from January 2016 to June 2017. For the latest release, I improved the site’s Information Architecture and navigation experience by collaborating with my design lead, development, the lead content strategist, and offering management.
What is Bluemix?
Bluemix is IBM’s cloud platform where developers can build their apps using IBM’s best Infrastructure and Software as a Service offerings.
In addition to housing the content that explains how to use the platform, the Bluemix Docs is a framework that supports the product documentation of 100+ different services available through Bluemix.
From the previous design release in May 2016, I observed several trends in the user feedback we were receiving through the tool Usabilla.
Persistent header is too persistent
The tabbed navigation and persistent header took space away from the content. Users are at the Docs in order to get instructions, so users had to scroll more to read the content.
Unclear topic and subtopic hierarchy
The hierarchy for the navigation between topics and subtopics was unclear. This made it difficult for users to find the articles they were looking for and content writers had inconsistent approaches to using the hierarchy.
The left aligned content made it appear as space for content was being wasted. Already feeling cramped from the persistent header, users felt taunted by the unused space on large screens.
Information Architecture Card Sort
I was unsure what terms to use to describe the different groups of content previous displayed in the tabs, so I conducted a card sort with four users new to the product to help drive a new information architecture for the navigation. Because some of the interviews were remote, I shared a Google Drive file with the customers with the terms.
Our first impression was that that the users tended to group the topics based on different phases of becoming familiar with a service.
To check that our impressions were correct, I analyzed the results to see which cards appeared together the most often. Different colored post-its represent the four users and the check marks show which cards appeared in that group by three or more users.
Although there were some discrepancies in what words were used to describe the categories, I concluded to name and order the content into Learn, Reference, How To, and Help. These categories would later help drive consistency between content teams across services.
We learned much more than we expected from the card sort as users described how and when they use documentation.
I grouped the user comments to draw insights about how they use tutorials, sample apps, and other content types to learn to use Bluemix.
I created a journey map that documents how a developer would ideally use different types of content from the Bluemix Docs from discovery to productive use.
Based on the research findings, I designed several iterations that flattened the horizontal tabs into a left side navigation with the groups identified from the card sort with the addition of a Table of Contents to jump down to subtopics further down the page.
I initially used an InVision prototype to communicate the navigation experience, but then switched gears to code a prototype using Bootstrap in order to demonstrate the interactions better.
We tested the mid-fi coded prototype by giving the task to find out how to connect a device in this service.
Overall, the users were able to find the appropriate article with the UI changes to the left navigation and separating out the anchor tags because they were familiar patterns. I observed that there was some difficulty focusing on the main content from the navigation because it was all on a white background.
Design AND IMPLEMENTATION
With the help of my team, the design was able to become live code.
Although a navigation change wasn't on the roadmap, I originally pitched it because it would help solve the issues we kept on hearing from the user feedback. Mark prioritized the efforts between content strategy and development to get the designs implemented
Our lead content strategist oversaw the multitude of content writing teams as they made adjustments to their content for the new Information Architecture. I presented my research findings and reasoning behind the design to help them understand and adopt the new navigation.
I worked closely with the front end developer on our team to ensure my design was implemented as intended. As it was rendered into code, we made visual tweaks as I saw fit.
As the only dedicated designer I conducted the majority of the work, but my design lead helped me plan my next steps and also mentored me on conducting the card sort and usability tests.
Outcomes and Takeaways
Through Usabilla, our feedback tool, there have been fewer complaints about the design from our users.
The content writers I have spoken with have been enthusiastic about the changes to the Information Architecture, but my personal takeaway is to involve the content teams in the design process more.
Although design has to draw lines to ensure the needs of the user are preserved, listening to writers’ feedback early on can help relieve their fears and ease the transition to the new design.