Polaris Platform

UI/UX Work for Synopsys

Background / Research

Defining the Problem

Polaris is a security product that helps users find vulnerabilities in their code. The product was compiled of several features from multiple security products within the Software Integrity Group rolled up into one to create a quality experience. The challenges we faced were with integrating these features to be consistent throughout Polaris.

There were a few key differences between the products:

User personas
Different frameworks
Nonexistent or inconsistent design systems

User Personas

There are many user personas that are involved in Polaris, but here are three that are some of the more common use cases for the UX projects I worked on.

Developer: Ran the code or project file through tests that check for vulnerabilities, they also updated the code in projects to have their lead engineer verify the changes.

Lead Engineer: Oversees developers progress, approves changes to code, manages projects and their members.

Security Engineer: Checks on test status to make sure that the tests are performing in a reasonable timeframe, looks for errors and consistent trending issues within the test results.

Storymap/boarding

Depending on the feature, UX would be involved in the early process of research with the product managers and other stakeholders such as engineering and architecture. Prior user research was mostly done by product management.

Storymapping involves all stakeholders to define the scope of work for a feature. They would be broken down into a heirarchy backbone, features, userstories.

Storyboarding is done after the storymapping is complete, it contains rough illustrations, notes and screenshots to go along with the user stories defined.

Ideation

Many use cases needed flow diagrams or user flows to illustrate the process and which elements the UI was using for the engineers to know what theyre doing. Similar to storyboarding except focusing on one user story. Here are some examples of them.

Workflows

A few examples of how I used storyboards to further develop the design that will become a user interface.

Distinguishing different permissions given depending on the role of the user.

A wireframe workflow showing how a user can get to the scan dashboard.

A wireframe workflow example of logging in with a CIAM.

Wireframes

Wireframes or concepts of the workflows as new patterns or elements of the UI, here are some highlighted examples of wireframes that have been done for Polaris.

Flash Messages

User Story: As a user, I would like to know if my actions were successful or not so that I can feel confident in my decisions.

Medium: Procreate

Test Summary: Lines of Code

User Story: As a user, I would like to know what languages and how many lines of code there are in my test results so that I can use those analytics against other tests.

Medium: Balsamiq

Home Page: Favorite Projects

User Story: As a user, I would like to see a list of my favorited projects on the home page.

Medium: Procreate

Scan Results: Issue domain feature

User Story: As a user, I would like to know what domain my issues are coming from, so I can make more informed decisions on fixing my issues.

Medium: Balsamiq

Notification Center

User Story: As a user, I would like to see a notification center so that I can stay up to date on the latest updates.

Medium: pen and paper

Prototypes

Flash Message

I designed this flash message to help users see if their actions were successful.

Media: Sketch, Adobe Photoshop

Open Issue Counter Donut

I created this component to help users identify how much of their project had open issues.

Media: Sketch, Adobe Photoshop

Final Designs

Here are some demonstrations of major features that I worked on that have been deployed to the product and customers.

Onboarding using Software Change Management (SCM)

This project I helped introduce consistent design patterns and ease of use. SCM integration was vital for larger customers as it helped streamline their onboarding experience. I helped work on the storyboarding with stakeholders, and built the entire workflow in figma with high fidelity mockups.

Simplified Policy Configuration

Previously policy configuration was clunky and didn’t include room to streamline policies to multiple applications and only allowed users to select from a searchable list. My role was to help the user narrow their search down faster by applications, I helped with storyboarding with stakeholders and built the high fidelity mockups.

Usability Testing

Feature: Adding a SAML Account. We used lookback to record users feedback on language used in the UI to help make the messaging clearer.

Program Used: Lookback

Future Enhancements

New User Tour

User Story:

As a user, I am unsure of what to do first after accepting the end user license agreement.

Potential Solution:

Have a popup that gives the user steps for tasks to complete first as a new user.

Features:

Able to skip tour for users who are either don’t need the tour
Have multiple steps to cover most foundational new user tasks
Once the user has been onboarded and no longer needs the walk through, the homepage turns into a dashboard for their go-to needs.

Notification Center

User Story:

As a user, I would like to receive notifications within the product so I can see important messages.

Potential Solution:

Have a popup that gives the user steps for tasks to complete first as a new user.

Features:

Able to skip tour for users who are either don’t need the tour
Have multiple steps to cover most foundational new user tasks
Once the user has been onboarded and no longer needs the walk through, the homepage turns into a dashboard for their go-to needs.