Red Hat - Case Study

Stack Report for OpenShift.io

Product Designer (Project Lead), October 2017 - February 2018 (6 Months)

SCROLL

Company

Project Type & Deliverables

UX Design

Interaction Design

UI Prototype (Invision)

Visual Design (Sketch)

Project Details

Ashish Durgude — Product Design Lead

Parvathy V.R. — Sr. Product Designer

Kyle Baker — Visual Design Lead

Catherine Robson — Product Design Manager

Murugesan Ganesan — Product Design Manager

Overview

The feature was created with the intention of building a system to analyze and improve application stack by suggesting a better alternative and additional dependencies/ components.

This project turned out to be successful as the developers can now see meaning insights of their application stack and avoid any future issues

Project
Background

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.

For OpenShift.io, we wanted to build an analytics system that provides meaningful insights on users' application stack that will help them build applications without any stack issues.

[Application stack: A set of libraries and components/dependencies used by developers to build product/application.]

What was my task/work?

As a product designer, my job was to understand the product "OpenShift.io and Stack Report" and create an end-to-end experience.

What was the problem?

Even though we had the technology to provide analytics for application stack, we could not offer helpful insights to users, and because of that, improving user experience of the analytics system was necessary.

The stack report was already present in the OpenShift.io before I started working on it, but it was in the initial phase. When the developer built that report, there was no design team involved since it began as a small project that later turned into a more significant part of OpenShift.io.

We discovered four pain points

Pain Point 01

Security issues in the application stack

We were facing difficulties in monitoring and eliminating security issues of an application stack to the users.

Pain Point 02

Conflicts between the component licenses

We were facing issues to show component licenses that conflicts between each other in the application stack.

Pain Point 03

Lack of insights on the application stack

We could not show application stack insights effectively to the users due to a lack of information/data.

Pain Point 04

Understanding the purpose of Stack Report

Users could not understand the real purpose of a stack report and how it can help them build applications in OpenShift.io.

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.

Skip to Design Process

Key Features

Showing
Security Issues

Using Security Issues, users can remove/update affected dependencies, which would help them resolve application issues.

Showing
Licenses Conflicts

In the Licenses page, users can update affected dependencies by using alternate (suggested) dependencies.

Providing
Insights on Stack

The confidence score helps users decide whether they should use alternate (suggested) dependencies. Also, providing feedback supports the system to provide better recommendations.

Overview of
Dependencies

Users can check the status of all dependencies by looking at the "Dependency check" column. It will help the user make decisions quickly.

Want to experience above key features by yourself?

No worries!! Have a look at InVision prototype

https://invis.io/JEYDNQMWVSX

Interact with Prototype

Design Process

Research

To get a basic understanding of the stack report, we conducted a research study. We wanted to understand what a stack report is? What does it do? Why it's helpful for developers? What kind of data does this report show? How many developers 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 worked 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 in older Stack Reports

Less focus on user experience and quality data presentation

Struggle to understand the purpose of the stack report

Less information on critical factors like conflicts and licenses

Unable to provide quality insights on the application stack

Not showing security issue status (CVE) for components

Unable to see details of the components used in the 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.

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 creating many 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 the final visual design. I used the PatternFly design system for 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.

Explore PatternFly

How does this design solve the problem?

01.

Users can check status just by looking at those four cards (Overview tabs). Also, on the list, we are showing status and giving significant information upfront.

02.

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

03.

We are showing how many conflicts are present in a stack 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 alert level.

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 understood the purpose of the stack report and how it can help them. Users also shared how we met their expectations and what we can 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.

Thank you for reading this project

Also, check out these awesome projects

Improving Usability of Entity Browser

UX Design Internship @ Nutanix (Summer 2020)

Balancing News Bias on Facebook