IBM Blockchain
Hyperledger Fabric Documentation


PROBLEM SPACE
Users express dissatisfaction with Hyperledger Fabric’s documentation website, which is used primarily by blockchain developers. How can we make dense, complex, and technical information easier to digest and navigate through? Furthermore, how can we refresh the design and branding of Hyperledger Fabric?

DIAGRAMS / VISUAL LANGUAGE
One of the key insights my team generated through the research is that diagrams are essential to improving the text-heavy documentation and they play a big part in helping the user easily understand blockchain concepts.

Through this insight, I created several key diagrams. The challenge of creating these diagrams lies in collaborating with the developers and content writers, as well as simplifying complex technical information.



Top left: Old diagram, Top right: First iteration, Bottom: Second iteration



Animated diagram


I had these questions in mind while creating the diagrams:

How well do these diagrams match up with the concepts they are trying to convey? Or in other words, are the diagrams technically correct?

How well is a user able to read and understand the diagrams clearly?

How well do the diagrams support the content on the documentation?

What are impressions of the documentation as a whole?


NAVIGATION AND WIREFRAMES
Because of the dense and low discoverability opportunities in the current documentation, the information architecture needed restructuring. I worked with a researcher to map out the architecture of the page and created user flows.



Website architecture and user flows


I redesigned the sidebar menu to allow for dense menu options. 



Wireframe of homepage


Wireframe content page and new sidebar


An iteration of the documentation wireframe



An iteration of the wireframe content page


OUTCOME
This project was a huge learning opportunity for me, as I got to touch on many different areas of design including UX, visual, branding, design strategy, and research. It was also an opportunity to collaborate with a diverse team while designing within a technical field. My team and I made a tremendous first step on the improvement of the documentation.