PORTFOLIO / Stack Reports

______

Stack Reports

Project Statement:

Design a stack report system to analyze stack that developer has used and suggest a better alternative and additional dependencies/components to improve stack.

Project Brief:

When developer use stack to develop the product, there might be a situation that he is using the dependencies which are no more compatible with the stack he is working on. There might be conflicts between the dependencies which could affect the entire stack. These conflicts may happen because of dependency's different properties or licenses associated with it.

To solve this problem, stack reports came into the picture.

What is Stack Reports?

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

What is OpenShift.io?

Red Hat OpenShift.io is a highly collaborative open-source, web-based application lifecycle management (ALM) solution. It provides an integrated approach to DevOps enables you to plan, create, and deploy hybrid cloud services.

Please have a look at Introduction video of OpenShift.io which was presented by Todd Mancini at Red Hat Summit in May 2018

Work Type:

Case Study (Interaction + Visual)

Duration:

Oct 2017 - Feb 2018 (5 Months)

Member(s):

Ashish Durgude (UX Intern)

Parvathy V.R. (Interaction Designer)

Murugesan Ganesan (UX Manager)

Tools Used:

Company:

To know about Stack Reports, please go to 40:22 minutes on the video

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

What was my job?

As a UX intern, my job was to create an end to end experience and deliver visual designs & prototype to the development team.

Stack report before working on this project:

On the left side, you will see the image of stack report. this stack report was active on the OpenShift.io

This Stack Report was showing 4 main issue areas:

1. Security alert

2. Usage

3. License

4. Stack level licenses

1. Security alert:

Security alert shows that whether there are some security issues for dependencies are present or not.

2. Usage:

Usage shows that how many dependencies are not used commonly in your stack.

3. Licenses:

Licenses show that how many licenses are out of date and how many stack level conflicts found in your stack.

4. Stack level licenses:

Stack level licenses show no. of stack level licenses present in your stack.

The problem in existing stack reports:

In the above stack report, UX attention was missing:

1. The user was unable to find the purpose of the stack report.

2. Critical factors like conflicts, license were not shown properly to the user.

3. Users were not able to find the details of the dependencies they were using in the stack.

4. The lack of information about analyzed dependencies and unknown dependencies.

5. The lack of information about licenses and the conflicts between dependencies.

6. The stack report was not showing status about CVE of dependencies.

Research:

To know about stack report, we did a research on it. At first, 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 for stack report at the time of building the stack? What type of developers look for stack reports, etc. We got these answer from our Analytics team at Red Hat who was working on stack reports earlier.

We also looked for other existing products which serve the same purpose. We did competitive analysis on the existing products like Blackduck, etc. After doing a lot of research on this, we finally came to conclusion.

Note: I am not allowed to show internal company research in public. If you are curious about research and want to know a little bit more about it, then ping me at durgudeashish8@gmail.com

Wireframes:

For this project we created so many sketches and wireframes, here are some of the screens.

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 final visual design.

On May 2018, Todd Mancini gave a demonstration of OpenShift.io and in that, he also gave a demonstration of stack report which was made by referring following visual designs:

When I was working on above visuals, at the end I needed the visual design to align 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/

So I redesigned stack report completely to align with Patternfly. This is how the stack reports look after Patternfly:

I also created one visual design to show OpenShift.io space view in which user will be able to see the stack reports.

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

Analytics Team, India.

Catherine Robson

Kyle Baker

Sunil Malagi

Thank you for reading this project.

Also check these awesome projects


Copyright 2018, Ashish Durgude