The Bluemix Docs teaches developers how to use IBM’s cloud platform and the 100+ services offered on it.

 

Background

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.

 
BluemixLogo.png
 

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.

 

Research Methods

 

USER FEEDBACK

From the previous design release in May 2016, I observed several trends in the user feedback we were receiving through the tool Usabilla.

OldDocs.png

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.

Wasted space

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.

 

SYNTHESIS

 

Cardsort Analysis

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.

group01.png
group02.png
group03.png
group04.png

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.

 

Affinity Diagramming

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.

synth01.png
synth02.png
synth03.png

Journey Map

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.

To Be - Customer Journey Map Developer.png
 

Prototype

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.

 

Usertesting

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.

 

Offering Management

Mark M.

Mark M.

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

CONTENT

Jenifer S.

Jenifer S.

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.

Development

Jeff N.

Jeff N.

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.

Design LEADERSHIP

Matt E.

Matt E.

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

feedback.png

Through Usabilla, our feedback tool, there have been fewer complaints about the design from our users.

planning-workshop.jpg

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.

 

Much of this work was spurred on by what I learned from attending Euro IA 2016 where I was better introduced to Information Architecture. My favorite workshop was led by Sophia Voychehovski who taught us about her Object-Oriented UX approach.

euroia2016.png