Intro

Today’s organizations want to analyze enormous quantities of data as well as the varying, complex relationships between these data elements. Graph databases are a new approach to the ever-increasing data problem, and ideal for supporting this need in a manner that’s both flexible and simple to query. The interface for IBM Graph is a digital sandbox for application developers to become acclimated to graph database technology. This in turn allows users to query their graph databases with more confidence and an improved understanding of their datasets.

Design Team: Dillon Eversman (UX/Front-End Developer), Bhavika Shah (Design Lead), Chris Befeld (Visual), Ben Resnick (Front-End Developer), Meghan Corbett (Researcher), Tom Workman (Front-End Developer)

*In December 2017, IBM Graph joined the IBM Compose suite of products and renamed to JanusGraph

The Research

Through stakeholder and subject matter expert interviews, secondary research, and testing/working with various database services, the team spent about two months familiarizing with the structure of cloud offerings, how these services integrate into an application stack, and understanding the difference between graph databases and other related services.

Domain Knowledge - Relational vs. Graph Databases

Relational databases such as PostGres & mySQL, arrange data into tables by rows and columns (think Microsoft Excel). In order to understand how the information across different tables is connected, it's common to then join those tables together based on a shared properties like an ID number (example below).

Graph databases, on the other hand, are a technology where database architects can structure their data the same way they would probably draw it on a whiteboard: with dense interconnected relationships between different data types. This makes graph databases optimal for use cases such as route finding and recommendation engines, since they’re already built from the ground up for these complex relationships.

User Interviews

A large challenge was finding app developers that 1. Had already used a graph database and 2. Had some opinions on A) How they worked, B) What visualization and analytic tools they wanted associated, and C) What they would like to see from a next generation of graph services (how's that for Information Architecture?).

Despite this hurdle, our team conducted interviews with internal front-end developers and developers outside of IBM to determine the target user, what kind of apps they were building, and what tools they already used.

Design Iterations

With these considerations in mind, the interface needed to be able to teach both newcomers to database technology as well as those who already understand databases, but are trying to learn how graph databases work. Some of the initial conceptual sketches for the design can be seen below.

Throughout this time, the goal was always to empower app developers to learn, iterate, and build with a graph database. Through a 3 month process of balancing technical requirements with user feedback, we iterated through many designs that provided a minimum viable product that still addressed these core needs.

Final Design v1.0 - an MVP Experience

The final experience was an educational interface represented as a card streaming layout along with a set of 4 illustrated tutorials for graph basics. It was crucial to make sure our users knew where to go and what they could do in the UI, so we also provided an onboarding card for them when first loading the page.

Quick Revisions

Shortly after launch, the researcher on the design team conducted multiple user testing sessions to determine how individuals were using the product. The first updates focused on enhancing the space for the user's tasks at hand, since the original design didn't provide quite enough "breathing room". It was also clear that the ability to load sample files could have been more visibly indicated.

We created a persistently visible sidebar to improve visibility and consistency of the interface’s upload, sample, and help resources. The onboarding card’s multiple options were also visually competing with each other, so we updated its styling to emphasize the interface guide more prominently, with the remaining options organized more supplementary.

Zero to Graph in No Time

We provided a sample dataset for our users as well as sample queries. Even if they don't understand the technology yet, they're capable of running queries and returning results with the provided sample card.

The result card will often generate a visualization of the user’s query response (depending on the query written). As nodes (vertices) are clicked in the visualization, the corresponding database content highlights on the left side of the card. To reduce visual clutter, users are also given the option to filter out database properties on the bottom of the card so they can isolate more relevant pieces their database in their view.

Getting Started

Getting Started is a set of 4 tutorials that takes the user through the fundamental concepts of graph technologies. Think of this as a more layman's terms version of the documentation that's focused on the main pillars of graph databases.

Each tutorial contains examples and diagrams that clarify the intricate concepts of graph since this is still a relatively new technology. By the time users reach the end of Getting Started, they’ve learned all the pieces of graph that are necessary to start running queries on their own database. They can do so in the Query section.

A Shift in Tone

An unforeseen consequence of the design was that rather than just using the interface to get up to speed with IBM Graph, the interface started to be used as a sandbox for users to test out their queries to ensure they were correct before using them in production. This shift of how they started using the UI productively (instead of just for learning) was a rewarding surprise, and greatly influenced next version of the interface.

Final Design v2.0 - Same Shell, Different Engine

When designing our original MVP experience (see v1.0), we knew the visualization had plenty of room to improve, and our user testing had only reinforced that. More specifically, users wanted more dedicated space to interact with the visualization, as well as a more powerful and customizable visualization tool.

When IBM Graph migrated its product to a new back-end and re-branded to IBM Compose for JanusGraph, we also changed the engine powering the visualization in the UI, which in turn enabled us to provide a more content-rich, customizable, and interactive experience than before. A common request from user feedback was improved visualization space, so we updated the visualization to occupy the entire card as well.

In addition to its enhanced interactions (like scroll to zoom, click/drag to pan) and customization options, the new engine allowed us to display a much higher quantity of data in more detail with different ways to organize the visualization more informatively.

The visualization now supports larger queries, making it a more valuable business tool
The new Layout options let users quickly organize the visualization into more informative views

These updates made the interface a more valuable tool for users to not only understand the basics of graph technology, but to now gain more meaningful insight into the state of their graph databases.

Future Work

You know what they say: "if I told ya, I'd have to kill ya" (not really, but I would get in trouble). But rest assured, there's plenty of additional user feedback that we've analyzed and are eager to incorporate into the interface in the future.

Conclusion

As big data becomes increasingly significant for businesses and the database landscape continues to evolve, it's important to understand the best ways to yield insightful results about your dataset. The IBM Graph interface is a useful entry point for both database newcomers or seasoned veterans who want to learn the best practices for this type of database technology.