Wind River | Studio Linux Services

TIMELINE
Q1 2022 - Q2 2022

ROLE
Lead Designer & Researcher

RESPONSIBILITIES
Interface Design
Competitive Analysis
User Interviews

Providing BIG value for ZERO cost

Wind River’s Security Scanner arose out of a need to attract potential customers to the Wind River ecosystem.

This tool would allow customers to use a professional-grade security scanner, specifically curated to meet the unique needs of embedded systems, for FREE. Once vulnerabilities were discovered, Wind River could promote their paid software offerings.

From the start, there were three big challenges

#1

I knew nothing about the embedded development space — this was my first project at Wind River.

#2

The release date was already set — 6 months away. The product was promised in March 2022 PR releases.

#3

No developer capacity for 4-5 months.

Designing and building an app in 6 months - where to start?

For most of this project, I worked on a team of three — a design director, a technical product manager (PM), and myself. Developers were brought on later.

As this team of three, the PM got us started by providing us with a list of functionalities, describing the objectives of this application, and sketching out a few screens. He then pointed me to a few competitors, including WhiteSource, Snyk, Vigiles, and BlackDuck.

Competitive Analysis

I scoured help documentation and user videos on YouTube to see how competitors in this space approached the same problems.

Screenshots below are from the following software: Snyk, Vigiles, WhiteSource, BlackDuck.

User Interviews

With only six months to ship this product, we lacked time for user research. Since our team was conducting user interviews for other projects, I was able to sneak in a few questions related to vulnerability scanning, but other than that, my work primarily relied on competitive analysis and guidance from the PM.

How to design tables and data visualizations with no sample data?

In short: Competitor research and many iterations.

The time and resource constraints of this project meant that I was designing tables and visualizations without any sample data.

On the one hand, this meant that I was not expected to get them absolutely “right” — as long as generally relevant information was communicated, the developers could tweak it once they started building.

However, this challenge was compounded by the fact that I was new to the embedded development world.

By mimicking what our competitors provided and by constantly iterating with the PM, the final designs included many visualizations that made it into the final shipped product.

Final design handoff — at 95% finished?

By May 2022, the VP of Product decided that UX had made enough progress on the Security Scanner and that the devs and Marketing would finish up the rest.

Because I was to move onto other projects in June 2022, I handed off these almost finished designs.

With more time, I would have liked to do the following:

➡️ Improve the color palette of the data visualizations.

➡️ Improve the UI. Since it was built before our team had a functioning Design System, I had to use a custom one I made very quickly.

➡️ Prototype key interactions.

Key Functionalities and Experiences

Create a project

Scan a project automatically or manually

Access a CVE detail page & choose the CVSS version

Update a project

Add and manage users

Filter a CVE table & save filter views

Manage CVEs

Manage packages

Product Launch

Video below shows the demo walkthrough of the security scanner provided on Wind River’s website.

Clearly, there are some minor UI changes (such as to the data dashboard), but in general, the final product is true to the designs.

🎉 Wins

  1. Handing off designs for a complete product in a space I knew nothing about and then having it get built was a huge win for me.

  2. Creatively incorporating user research despite tight resource constraints.

☔️ Losses

  1. Not getting to be involved with the development process. Because of this, the UI of the shipped product has some tweaks that make it look a bit “unfinished”.

  2. Data visualizations in a non-cohesive color palette. Despite the constraints (having to use red, yellow, orange, and green to communicate information), with more time, I could have finessed the palette to look more professional.

📚 Lessons

  1. If it’s not a true “wireframe”, spend time building a good color palette at the beginning. The design director assumed we would have time to tweak the colors at the end, but we did not, so the shipped product’s data visualizations look unrefined.

  2. Advocate for design inclusion during the development process.