Portfolio/Stack Reports

Stack Reports

Design a system to analyze and improve application stack and suggest a better alternative and additional dependencies/components to improve stack efficiency.

Company

Work Type

Case Study (Interaction + Visual)

Duration

5 Months

Tools Used

Member(s)

Ashish Durgude (UX Intern)

Parvathy V.R. (Interaction Designer)

Catherine Robson (UX Manager)

Murugesan Ganesan (UX Manager)

Kyle Baker (Visual Design Lead)

Sunil Malagi (Principal User Interface 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 problem?

Security issues in stack

Difficulty in monitoring and eliminating security issues of the stack to users.

Conflicts between licenses

Struggling to show details of licenses conflicts between components in the stack

Lack of stack insights

Unable to show stack insights effectively to the users due to lack of information

What is the Solution?

The stack report provides comprehensive information regarding your application stack and it's component libraries that help you make informed choices. It analyzes your stack and recommends alternate and additional components to improve your application.

Check out the Invision prototype

https://invis.io/4KUU2E1Y75H

Who are the users?

Since the OpenShift.io was created to improve developer experience, users for this product would be developers and managers.

What was my work?

As a UX intern, my job was to create an end to end experience and deliver visual designs & prototype to the development team. Below, I have explained the design process that I followed for this project.

My design process

Research


Background

To get a basic understanding of the stack report, we conducted a research study. We tried to understand what is stack report? what does it do? why it's helpful for a developer? what kind of data does this report show? how many developers really look at stack reports at the time of building the stack? what type of developers look for stack reports, etc. We got these answers from our Analytics team at Red Hat who was working on stack reports earlier.

Stack report before working on this project

We had a meeting with PM's to find out more about the actual working state of Stack Reports. We also tested this with real users and after doing some more research, we identified the problems in the old Stack Report.

Problems/issues that we found on older Stack Reports

01

Less focus on user experience and quality data presentation

02

Struggle to understand the purpose of the stack report

03

Less information on critical factors like conflicts and licenses

04

Unable to see details of the components used in the stack

05

Not showing security issue status (CVE) for components

06

Unable to provide quality insights on the application stack

What is CVE?

Common Vulnerabilities and Exposures (CVE) is a catalog of known security threats. The catalog is sponsored by the United States Department of Homeland Security (DHS), and threats are divided into two categories: vulnerabilities and exposures.

Example of CVE: CVE-2018-1089, CVE-2016-5416, CVE-2018-10850

Competitive Analysis


We also looked for other existing products that serve the same purpose. We did a competitive analysis on Black Duck. Organizations worldwide use Black Duck Software to ensure open source security and license compliance in their applications and containers.

Paper Sketches


To get started with the ideation phase, I started working on paper sketches. The competitive analysis and research that I did before helped me understand the context and because of context knowledge, I was able to produce different ideas. below I am attaching a few paper sketches that I have worked on.

Wireframes


After doing tons of paper sketches, we started working on wireframes. This phase took lesser time than I thought because of paper sketches. We got lots of reviews and updates. Here I am attaching some of the wireframes that we worked on.

Visual Designs


After so many of wireframes, I started working on Visual Design. I did the entire visual design for this project. There were so many iterations of visual design and in the end, we came to final visual design. I used PatternFly for the visual design.

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/

Security Issues Page


In a security issues card (Selected with a blue border), you can see the overview of total issues found as well as the highest CVSS score.

On the security issues list, we are giving details for each dependency.

Licenses Page


It has the list of dependencies similar to security issues but on this view, we are categorizing list in 2 tabs, "Conflict licenses details" and "Unknown licenses details".

Insights Page


We are categorizing the list of dependencies in 2 tabs, "Usage outliers details" and "Companion dependency details".

Usage outliers show the dependencies which are not being used frequently and can be replaced by frequently used dependencies. Companion dependency is an additional dependency that users can use.

Dependency Details Page


It shows every dependency from the selected stack and categorizes them in analyzed and Unknown dependencies.

Why this design and how does it solve the problem?

01

In the final design, the user doesn't have to go and look for every dependency to see it's status. He/she can check status just by looking at Those 4 cards (Overview tabs). Even on the list, we are showing status and giving important information upfront so that users don't have to expand each and every dependency list.

02

In this design, we are showing security issues with the CVE score upfront so that user can make a decision as soon as possible.

03

In licenses card, we are showing how many conflicts are found and how the user can solve it by using our suggested alternate component.

04

In this design, we also focused on stack insights. users can check and update the stack based on the insights we are providing.

05

Each selective card (Overview tabs) except "dependency details" has an alert indication on the top-right corner with color showing the level of alert.

Outcome & insights from this project

This project was successful. We tested this project in Red Hat Summit (Red Hat Annual Conference) during the workshop session with our users and we got a positive response. Users gave feedback on the overall UX and tech used behind the stack report. The user realized the purpose of stack report and how it can help them. Users also shared how we met their expectations and what can we improve on the data and tech side. 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