Portfolio/Dependency Editor

Dependency Editor

Design an analytics system that will help the developer to chose their dependencies for their stack as well as to add new dependencies at the time of creating an application inside the OpenShift.io.

Company

Work Type

Case Study (Interaction + Visual)

Duration

5 Months

Tools Used

Member(s)

Ashish Durgude (UX Designer)

Parvathy V.R. (Interaction Designer)

Catherine Robson (UX Manager)

Murugesan Ganesan (UX Manager)

Kyle Baker (Visual Design Lead)

Brian Dellascio (UX Visual Designer)

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.

To learn more, please visit, https://openshift.io/

What was the goal?

Adding more dependencies

Difficulty in adding more custom dependencies while building the stack.

Providing analytics

Difficulty in providing analytics on all dependencies while building the stack.

Providing insights

Difficulty in providing insights on all dependencies while building the stack.

What is the Solution?

Dependency Editor provides insight on all dependencies. It will show if there are any security issues or license issues present in the pre-included as well as in newly added dependencies. Based on it, the user can make the right decision while working and building the stack.

For fullscreen experience: https://invis.io/TVVD1MIEJDP

Who are the users?

Users for this product would be developers and managers.

What was my work?

As a UX Designer, my job was to create an end to end experience for this project. I worked on competitive analysis, wireframes, and, most importantly, on visual designs and prototyping. Below, I have explained the design process that I followed for this project.

My design process

Research


What is OpenShift.io Space?

Space is the first thing the user creates in OpenShift.io. This "Space" may have one or multiple collaborators. It's like a folder for your applications. Here you can see the status of your applications. You can also see stack reports for those applications. In the codebases section, you can see the GitHub URLs on which your application is built. In the work item overview, you can see the total issues created in OpenShift.io for this Space.

This is how OpenShift.io Space looks like

Why am I mentioning OpenShift.io Space?

We wanted to give an option to add more dependencies and also provide insights & analytics on dependencies when a developer is building an application stack. Users can create applications only from OpenShift.io Space. & that's why our user flow for this project starts from OpenShift.io Space.

Let's go through this prototype to understand this application creation process better.

For fullscreen experience: https://invis.io/ZHUVD69NM98

How can we improve the above user flow for creating an application process?

There is one thing that can be implemented in the above flow and that is providing analytics.

Understanding the context

Because of Stack Reports, I knew what analytics is and how it can become a part of this creating application process. We had a lots of meetings with our PM and entire team to decide how we can include analytics. Here I am presenting one of the ideation sketches we did to understand the use of analytics in this process.

Competitive Analysis


There are so many applications like the dependency editor. One of them is SPRING INITIALIZR The Spring Initializr is ultimately a web application that can generate a Spring Boot project structure for you. It doesn’t generate any application code, but it will give you a basic project structure and either a Maven or a Gradle build specification to build your code with. All you need to do is write the application code. Go to Spring.io to learn more.

Wireframes


After doing a competitive analysis and doing some research on this project, we started working on wireframes. This phase took a lot of time because whenever we create wireframes and show them to PM and team, we got lots of reviews and updates. Catherine and Muru helped us in the wireframe stage. Here I am attaching some of the wireframes that we worked on for this project.

Visual Designs


After so many of wireframes, I started working on visual designs. One thing that I needed to take care of is to align my visual designs with PatternFly.

What is PatternFly?

PatternFly is a design system that promotes design commonality and improved user experience. Its offerings include open source code, UI 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/

Final Visual Designs after using PatternFly

Dependency Editor


We decided to add the analytics section after "Select Mission & Runtime” (step 01 of creating an application) because, after step 01, we will have dependencies to analyze and then start the application pipeline.

This is a default view of the dependency editor, which has two main cards: Dependencies and Application Summary.

Newly added Dependencies and Security Alerts


When you add any dependency by searching from a given search bar or replace dependency from Insights, it shows newly added/replaced dependencies with a blue badge (below grey badges).

In this image, you can see that there is an error indication on the “Security Alert” section. It is showing that newly added dependency has some CVE (Security Errors). You can see the dependency name with the CVE number in the Security Alert section.

Browse All Dependencies


After clicking on “Browse All Dependencies,” you will see this modal. Here we categorized dependencies based on functionality and services it provides. We are giving the option to select a version of that dependency. By default, we show the latest version of dependencies.

For each dependency, we are showing security status upfront. It shows status by detecting the runtime you selected on the previous step, but there might be a situation when there are conflicts between two dependencies. In that case, we show security alerts or licenses on insights (based on conflict level).

Newly Added Dependencies on Summary Page


After completing “Select Dependencies,” you will see the information of newly added dependencies again on the “Confirm Application Summary & Setup” page.

On 2nd card, you can see recently added dependencies. If you want to add or remove dependencies, you can always go back to the “Select Dependencies menu.”

Why this design and how does it solve the problem?

01

One of the important goals of this project was to provide analytics while the user is building a stack. Our final design completed this goal.

02

We needed to add "Dependency Editor" into the existing flow of creating an application for OpenShift.io, and our design was able to merge into it successfully.

03

On dependency editor, we are showing insights on the current stack as well as on newly added dependencies so that users don't have to worry about it after building the application.

04

In this design, we also focused on Analytics that provides security alerts and licenses on all dependencies.

05

In the dependency editor, the user has an option to add extra dependencies that fulfill their application requirements.

Outcome & insights from this project

We tested this project with a specific audience who were the only users of OpenShift.io. They found the dependency editor very useful. According to them, it would help developers to build an efficient stack that fulfills their application requirement. Users liked the idea of providing analytics before building an application. The critical feedback that we got was that they wanted to see a more robust analytics system. During this project, we didn't have much data to work on. From the user experience perspective, they liked how it's integrated into the existing system of OpenShift.io. Since it is an ongoing project and due to NDA, I can't share more insights on the outcome, but feel free to discuss it with me.

Want to know more about this project? Let's Chat.

Thank you for reading this project.

Check out these awesome projects

Copyright 2019, Ashish Durgude