Designing a code-free interface for developers

As the Design Lead, I led a team of 6 to design a code-free visual workspace for Stardog's flagship product - Stardog Studio.

hero_image
OVERVIEW

Our capstone project team was commissioned by the CEO of Stardog, a fast-growing Enterprise Knowledge Graph Platform provider, to redesign their existing knowledge graph product that could be used not only by technical users but also business analysts who typically rely on IT to create a graph for them. We identified a need for a simpler data unification process. We collaborated closely with their product and engineering team on a mission to design various Graphical User Interfaces (GUIs) that would allow non-technical users to do data mapping, data modeling on their own without any coding.

I managed a team of 6 designers and collaborated with stakeholders and customers, led the design operations, user research and product evaluation, conceptualized solutions, and owned 4 critical features in the final interface design.

CLIENT
client_logo
DURATION

Aug 2019 - May 2020 (9 months)

ROLE

Design Operations
User Research
Usability Testing
Product Design

TEAM

Jashan Gupta
Modassir Iqbal
Yirang Choe
Monikka Ravichandram
Aravind Jembu Rajkumar
Natalie Yeh

TOOLS USED
tools_used
PROBLEM STATEMENT

Despite its benefits, the current process of creating knowledge graphs requires technical expertise and is time-consuming. Stardog realized the need for a simpler alternative to expand its user base to non-technical people.

The goal of this project is to design a tool that helps users with limited technological skills to do data mapping and data modeling.

BACKGROUND

Understanding knowledge graphs and different user segments.

What is the Knowledge Graph?

A knowledge graph (KG) is a flexible graphical representation of data derived from a variety of structured, semi-structured, and unstructured data sources that are connected together to create machine-understandable knowledge.

Enterprise data in large companies is stored in silos and fails to provide insights required to make better decisions. KGs allows users to build flexible models and connect data from different silos.

The process of creating and using KGs (detailed workflow) requires a number of large, complex steps which are illustrated below. Our project focus on frame 2 to 4, supporting users to do data modeling and mainly data mapping.

storyboard

Storyboard illustrating the knowledge graph creation process.

User segments

high_techie

Current Users

High-techie

Lead ontologists, data architects etc. with 5+ years of experience in the KG domain. Needs ability to code & has many advanced use cases.

low_techie

Target Users

Low-techie

Junior data architects, software Enggs. etc. with <5 years of experience with KGs. They need to be able to create and modify data models & mappings easily.

prospective_users

Potential Users

Other Stakeholders

Domain experts, business analysts, managers etc. with some or no understanding of KGs. Wants to query & find answers to business questions.

RESEARCH METHODS

Understanding the user's mental models and exploring existing solutions.

CI_icon
SME_icon

SME Interviews

Knowledge transfer sessions with Stardog engineers.

CI_icon
competitor_icon

Competitor Analysis

Analyzed existing solutions in knowledge graph space.

CI_icon
semi-structured_icon

Structured interviews

Conducted interviews with 8 High-techies and 3 Low-techies.

CI_icon
CI_icon

Contextual Inquiries

Conducted 5 interviews to capture observational data.

usability_icon
usability_icon

Usability Testing

Evaluated lo-fi prototype with 5 participants.

affinity_map

Affinity map containing detailed findings. Explore Affinity Map on Miro

customer_workflow

Current Stardog Customer Workflow

usability_notes

Usability Testing Notes

FINDINGS

Core user needs

1. Modeling and mapping are very closely tied.

When users work on mapping, they need to edit/add new nodes or properties as needs arise. So we treated each project as a virtual graph where users can create data models and do the mapping on the same canvas.

4. A subset of data is selected before users start mapping.

Users select some data-columns to work with before mapping so they don’t get overwhelmed by a huge amount of data. So we created a data-field selection user flow.

2. High-techies prefer coding.

High-techies prefer coding because they are more comfortable with writing code than using a visual interface. So we decided to provide the flexibility to switch between synced visual and code modes.

5. Properties are defined separately.

Users may define properties and classes separately and later assign the properties to the classes and map them. So we created a new place for defining properties separately.

3. Auto-mapping is the default starting point for techies.

The majority of current users use Auto-mapping functionality as a starting point. So we highlighted the ‘Auto mapping’ feature when users first create the virtual graph project.

6. 'Click to map' vs 'drag and drop'  to map.

Users found both 'click to map' and 'drag and drop' mapping functionalities to be useful. So we supported both 'click to map' and 'drag and drop to map' interactions.

USABILITY TESTING

Evaluating lo-fi designs and iterating over it

1. Don't force users to name their project when they create a new one.

evaluation_virtual_graph
evaluation_virtual_graph

2. Reduce the efforts of the data selection and mapping process.

evaluation_data_selection

3. Created a flexible way to add properties and support different use cases.

evaluation_add_properties
FINAL DESIGNS

The code-free knowledge graph creation interface

1. Virtual graph + Automapping flow

evaluation_virtual_graph
Final-Design_Virtual-Graph

2. Data Modeling Flow

Final-design_data-modeling

3. Data Mapping Flow.

Final-design_data-mapping
lofi-designs
LEARNINGS & TAKEAWAYS

My major learnings from the project

Stardog was definitely the most challenging product that I worked on considering its unique industry space targeted towards developers. The unique challenges posed by this project forced me to push my limits and made me more comfortable managing both the research and design roles.

Leading a team of 6 designers made me think from a perspective of design operations and helped me realize the importance of different perspectives while designing something. Throughout the project, I got to lead Design Operations, Research, and Design which helped me grow tremendously as a designer.

Reflecting back, most of the challenges occurred because of our limited knowledge of this space, and I would have spent more time on Desk Research and learning Modeling and Mapping through code so that I could have understood the complex use cases better.

Other Works

StardogProject type

DocOn TVProject type

TargetProject type

Lift AcademyProject type

DoorDash RedesignProject type

RootsWeb Design