PORTFOLIO / Dependency Editor


Dependency Editor

Project Statement:

Design an analytics system which will help the developer to chose their dependencies/component for their stack as well as to add suggested "recommended dependencies" at the time of creating a new space for building an application inside the OpenShift.io

Project Brief:

Before going into the details of this project, I will tell you about OpenShift.io.

What is OpenShift.io?

Red Hat OpenShift.io is a highly collaborative open-source, web-based application lifecycle management (ALM) solution. It is a next-generation product for developers to manage the development lifecycle with one efficient tool. It enables you to plan, create, and deploy hybrid cloud services. It utilizes many open source projects like fabric8, Eclipse Che, and OpenShift Online. It provides an integrated approach to DevOps enables you to plan, create, and deploy hybrid cloud services.

To know more, https://www.youtube.com/watch?v=UxRDHpz5pg0

What is OpenShift.io Space?

Space is the first thing a user creates in OpenShift.io. All other elements are created within a space to organize them for each project. Space allows you to plan your development work using work items and iterations, assign work items to collaborators within your team, and create software applications within it. Each codebase, iteration, work item, and collaborator is attached to space. As an example, each space can contain multiple codebases, work items tracking work to be done in a project, collaborators working on their assigned work items, and iterations to track when the work items are to be done.

Work Type:

Case Study (Interaction + Visual)


Dec 2017 - Apr 2018 (5 Months)


Ashish Durgude (Visual Designer)

Parvathy V.R. (Interaction Designer)

Murugesan Ganesan (UX Manager)

Tools Used:


The current OpenShift.io space look like this:

When developer willing to create a new space inside OpenShift.io, He goes through a different process like "Selecting the development process", "Entering the name of the space", "Adding a description of the space", etc. development process is nothing but the templates created for developers. these templates are:

1. Scenario Driven Development 2. Scrum

These Development templates are related to an agile process.

After the above process, there is one more screen for entering the application name and selecting one option for either to create new codebase or start with importing existing codebase.

Below I am showing the actual existing screens from Openshift.io for creating a new space including "creating application" and "launcher flow":

How can we improve "Create Space" flow?

Even after the above flow created and made successfully by Westford (US) UX team and developers, there was a scope for an improvement. After analyzing we found that the analytics part was missing in launcher flow. Then Stevan Le Meur who is Product Manager at Red Hat, France. introduced the dependency editor.

What is Dependency Editor?

In the above screens, there is one screen named "Select Mission & Runtime Screen". What Dependency Editor does is it will give you the details/insight about the dependencies you have got after selecting mission and runtime. It will show if there are any security issues or license issues present in the pre-included dependencies. it will give you an option to add extra dependencies which will not conflict with the "Runtime" you have chosen in the previous stage. After adding extra dependencies it will give analytics for those dependencies (It will show if there are any security issues or license issues present). If there is an issue found for pre-included dependencies as well as for extra added dependencies, it will give you details about the issues as well as a recommendation for choosing another dependency which has same properties but not causing any conflicts.

The dependency editor does not affect in upcoming stages of creating the space and application. that's why we decided to keep it optional.

What was my role?

My role during this project was a visual designer. My job was to work with Parvathy V. R. (interaction designer) to create wireframes, create visual designs and create & publish prototype in InVision. Muru managed this project.

Who helped me in this project other than parvathy and muru?

Analytics Team, India.

Catherine Robson (UX Manager)

Kyle Baker (Visual Design Lead)

Brian Dellascio (User Experience Visual Designer)

Design process for "Dependency Editor".

Before starting any work, We had a conference meeting with Stevan. Stevan Le Meur gave us the intro to Dependency Editor. below is the wireframe that was created at the initial stage.

After meeting with Stevan, we had a lot of discussions with the Analytics team who were going to develop the dependency editor. We already worked on stack report with Analytics team. so this time it was not that difficult the understand the context.

We did the competitive analysis. there are so many applications like dependency editor. one of them is SPRING INITIALIZR but what differentiates the Dependency Editor from them is the analytics capabilities.

Then we started working on wireframes. Catherine and Muru helped us in wireframe stage. here are some of the wireframes that we have created.

Visual Designs:

After so many of wireframes, I started working on Visual Design. There were so many iterations of visual design and at the end, we came to our final visual design. This visual design aligns perfectly with Patternfly.

What is Patternfly?

PatternFly is a community project that promotes design commonality and improved the user experience. Its offerings include open source code, patterns, style guides, and an active community that helps support it all. Red Hat uses this UI library to design and develop products.

To know more, please visit: http://www.patternfly.org/

Below I am presenting some of the final visual designs created for dependency editor.

I have also created one visual design to show confirmation of the dependency editor. If the user has selected any dependencies or performed any action in dependency editor, it will give a confirmation on the "Confirm Application Summary & Setup Screen".

Thank you for reading this project.

Also check these awesome projects

Copyright 2019, Ashish Durgude