top of page
IBM 
As a UX and visual designer intern at IBM, I led the creation of a project from scratch which involved ideation, design iterations, and learnings that are covered in a comprehensive document. This document showcases the entire design process and highlights the efforts that went into making the project successful.
Project Overview 🗺️ 
Discover 
*Design @IBM
*Design Principles 
*Learning 

 
Observe
*Understanding
*QnA with Team
*Insights 

*Brainstorms
Design 
*Version.1-4
*Iterations

 
Deliever
*Prototype
*Roadmap
*Reflections
ibm.png

Copyright @IBM Corporation 1994, 2023

Note from mentors

Ayush joined our WKC Lineage team as an intern and has been involved in a project called Relationship Explorer.

The project is very challenging and requires a deep level of understanding that Ayush has been able to pick up in a relatively short amount of time.

From day 1, Ayush has been eagerly learning and contributing to the best of his abilities. Ayush has demonstrated the ability to process feedback, ask the right questions, and autonomously execute on complex designs. He also has shown a strong work ethic and a desire to continue growing on our team.


Michael Mahemood
Senior Product Designer @IBM

Ayush is an innovative, dedicated, and enthusiastic designer whom our design team has grown to rely on. From the beginning, Ayush was eager to gain domain knowledge about data lineage, an existing project, and relationship explorer, a new project that he has become a great contributor of. Once he felt more comfortable with the basics, he stepped in to help transform user research notes into organized observations and findings; these were crucial to guiding the next steps for our product management, development, and design stakeholders. Ayush is not hesitant to ask questions to learn more and ensure he's prepared, but he is also unafraid to start exploring design ideas on his own and voice suggestions or new ideas. This was particularly helpful when our second designer began transitioning roles and Ayush stepped in to iterate new features for the relationship explorer prototype, which would be used for future research. I have collaborated with Ayush on different aspects of the prototype so that we can improve and consolidate our ideas, and I appreciate his abilities to think outside of the box, organize his work, and communicate with polite directness. Ayush has demonstrated that he  is a passionate, effective, and adaptable person to work with who will surely bring value to any team he joins


Jamie Har
UX Designer @IBM

Desktop - 33.png

Index 

1
Design @IBM 
Design philosophy , IBM  Loop , Carbon design system 
Summarized  & Detailed 
2
Pre-context 
What is data ? , Types of data , data lineage ,  Target users 
Summarized  & Detailed 
3
Project Introduction
What is Relationship explorer , use case , users 
Summarized  & Detailed 
4
Version 1. Design 
Ideation based on existing prototypes 
Summarized  & Detailed 
5
Research Analysis 
User reviews & interview , insights for future designs
Summarized 
6
Version 2 . Designs 
new ideations based on user insights 
Summarized  & Detailed 
7
Elyra Canvas Introduction
About , use cases for relationship explorer 
Summarized  
8
Version 3.0
Design based on elyra canvas
Summarized  & Detailed 
9
Version.4 Designs 
More ideations 
Summarized  & Detailed 
10
Future roadmap & Reflection 
what's with this project now ? , My  learning 
Detailed 
1
Asset 1.png

IBM Design Language: Consistent, user-centered design framework for IBM products.

Carbon Design System: Open-source system based on IBM Design Language, providing UI components and guidelines.

LOOP Principle: Core concept in IBM Design, emphasizing active listening, ownership, transparency, and adaptability.

2. Pre-Context 

The following terms are essential to understanding the platform/software I with my team worked on,

a) Data & Data lineage 

b) what are the business needs 

c) who are the users,   

d) type of data is being used .

Data: Data refers to information in various forms like numbers, text, images, etc., used by computers for processing, analysis, and storage.

Data Lineage: Data lineage is a visual representation of how data moves through different processes, showing its origin, transformations, and destinations. It helps track data flow and changes, aiding in understanding its journey and ensuring data quality and accuracy in technical systems.

image.png

Business Needs & Benefits:

  • Regulatory Compliance: Required for traceability and gap identification.

  • Consumable: Provides appropriate data summaries, identifies issues, and changes.

  • Performance: Reduces rendering time, understands potential problems.

  • Exploration & Impact Analysis: Understands data flow, impact, and system changes.

Users & Their Requirements:

  • Business Analyst: Identifies impacted data for reports and insights.

  • Compliance Officer: Ensures data compliance with regulations.

  • Data Scientist: Analyzes data transformations and diagnostics.

Main Use Cases:

  • Business User Exploration: Explores data paths and outcomes.

  • AI Governance: Examines data used for AI training.

  • Input Analysis: Understands data changes and downstream effects.

  • Data Consumer: Grasps occurrence locations.

Types Of data 

  • Governance Artifacts: Elements within collaborative categories enhancing data governance. They enrich, control access, identify, and analyze data.

  • Assets: Owned or leased items (e.g., tech, tools) linked to specifications. In Cloud Pak for Data, they include data, operational, and configuration instances.

2
3

TLDR :

"Relationship Explorer," Is a data visualization tool that shows connections between

Governance artifacts (Data management rules and categories  - are like the library's catalog system, where the librarian keeps records of all the books in the library) 
Catalog assets (Owned data items, such as datasets and configuration these are like are the actual books on the library shelves.

Each book is a unique piece of information that users can access and read ).

 

It's designed for tech experts and other professionals dealing with vast data. We focused on simplicity and collaborated with experts to enhance functionality. This tool aids in finding governance assignments, ensuring compliance, and exploring data.

It will benefit fields like medicine, manufacturing, banking, and tech, making information connections easily understandable.

3. Introduction 

What is Relationship explorer ? 
A graphical view / data visualization and interaction tool of the relationships between:
• Governance artifacts (categories, business terms,
   classifications, data classes, reference data, policies, rules, etc.)
• Catalog assets (data, notebooks, models, custom assets)


Why is it needed?
Use cases from research thus far:
• Find the governance assignments placed on data
• Understand the governance meta model / Ensure compliance
• Find and/or explore data

I worked with  my team in creating a unique tool, the "Relationship Explorer." It's designed to assist professionals like  tech experts, who deal with vast amounts of information. This tool visually demonstrates connections between different pieces of data. We prioritized simplicity in design and collaborated with experts to enhance its functionality. After developemenmt, it will be  widely available in various field like medicine , manufacturing , banking , tech  enabling people to enhance their work by easily understanding information connections.

image.png
image.png
image.png
image.png
image.png
image.png

These are the lists of sponsored users who helps to get feedback and more
insights.We work closely with them to create the best experience for users.

Current issues and user Pain points of users -  
In present scenario users had various issue 

  • Unusable UX/UI because the graph had thousands of data

  • Scope - it was difficult to understand what can be achieved with this relationship data

  • Graph Behavior's - poor data viz. unable to filter or sort information

 


eb61e3cf-fa37-4609-9902-f1c2fb1e45e8.png
4

4. Version 1.0 

These following ideations were already were in ideation phase - Version 1 of ideations were inspired from it and explores this idea even more further.

Desktop - 6.png
RE Default 20.png

Concept model for what does the relationship platform looks like to have an idea

Click on image to go full screen mode for clear resolution 

5. Research analysis 

Many stake holders from different field and companies were interviewed to understand their problem ,
the following image shows an AIRTABLE screen where all the insights were organized and further sorted according to severity of the problem which led us to have better focus areas to work on. 

IBM (28).jpg

Findings
1.Users like hints to how many relationships exist for a given item without necessarily showing them all
2.Users need to understand the types of relationships between items
3. Identifying which items on the graph are actually related to each
    other must be clear and easy to understand
4. Visually representing multiple relationships and items as a group
     must be clear to users, including with numbers
5. The graph must be scalable with thousands of relationships
6. Visually representing different types of relationships in varied ways may be helpful

 

These were some of the Sev 1 findings related to graph relationships

5

6. Version 2.0  

Focus areas based on User Interview Insights 

1 . How to show, or hide, relationships visually

2. How to group multiple relationships

3. How to see more information about each relationship (i.e. the relationship type name)

4. Filtering by relationship types

Click on image to go full screen mode for clear resolution 

6

7. Elyra Canvas Modal 

While designing we were looking for technologies which can be used to develop a system like Relationship
explorer ard we found Elyra.  Elyra canvas is the foundation we chose to develop relationship explorer on as it was already in development.

Elyra canvas is an open source tool that allows for the dragging and
dropping of node elements across a common canvas while giving the
user the ability to edit the properties of those nodes.


The Elyra canvas technology is broken into two main sections: the canvas and the

properties. The first section, the canvas, is used to arrange nodes and connect them.

These nodes may be styled as needed and use a toolbar located at the top of the UI which can
use any number of configurations to account for the needs of the user.
The second section, node properties, may be edited via a side panel on the right side of
the UI. Components that are included in the node properties are located on this site and
use the Carbon Design System as its basis.