Polaris Platform
UI/UX Work for Synopsys
Background
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.
During my time on Polaris I worked on several key features that enhanced the usability of the product and tied in other existing product features that helped shape polaris into the ultimate toolkit for users as well as contributed to new component patterns to our design system library.
Below are examples of my time on Polaris and it’s journey through an updated design system and integration of features.
UX Flow Diagram
After contributing to the storymapping and storyboarding sessions, I would start a UX flow diagram. This helped bridge the gap between storyboarding and mockups as well as getting engineering on the same page. In these wireframes it shows the natural walk through of what the users steps are. In this flow it includes all requirements of the storymap.
Prototypes
Onboarding using Software Change Management (SCM)
Problem Definition: This project I helped introduce new pattern to our design library, as well as a new feature called rapid onboarding. Fast SCM integration was vital for larger customers as it helped streamline their onboarding experience due to their enterprise level users. I contributed to storymapping and storyboarding with stakeholders, as well as built the entire workflow in figma with high fidelity prototypes in Figma.
Below video: Presentation of the final design.
Simplified Policy Configuration
Problem Definition: Previously policy configuration was clunky and didn’t include room to streamline policies to multiple projects and only allowed users to select from a non- searchable list. There was also no distinguishing difference between policies around issues an test scheduling policies, so I created a tabular interface where the policies could be found easily. This new design helped the user narrow their search down faster by applications. I conducted storyboarding with stakeholders and then built the prototype in Figma.
Below video: Presentation of the final design.
Pattern Designs
Below are two pattern components that I built from scratch in Sketch.
Flash Message
Problem definition: As a user, they were unable to tell when an action was completed, and if it was successful or not.
Solution: I designed this flash message to help users understand the process of the action and whether or not they need to take any further action by making it visible and in real time wherever they are in the application.
Media: Sketch, Adobe Photoshop
Open Issue Counter Donut
Problem Definition: As a user, they wanted to see an easily visible graph that determines their number of severity issues they have.
Solution: I created this component to help users identify how much of their project had open issues, they needed a quick reference visual that aids them in seeing their issues as a color scale representing their severity level. The additional feature here was a clickable donut that brought the user to their specific issue severity list.
Media: Sketch, Adobe Photoshop
New Design System
As part of the merging of features, we also aligned our designs with an update to our design system built in Figma for consistent use across the team. In this design update, we simplified the navigation to make more room for data on the pages. We also added other application types by adding in a sub horizontal menu. We kept the same color scheme for familiarity for our existing customers.
On the left is the old layout, with clunky navigation and not enough data. On the right, the new layout using the new design system.
New User Tour
User Story:
As a new user (or returning user that is new to the updated interface), I am unsure of what to do first after accepting the end user license agreement.
Potential Solution:
As part of the future enhancements to the new design system, this mockup is turning the landing page into a welcome screen. It would 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.
Media: Figma
Notification Center
User Story:
As a user, I would like to receive notifications within the product so I can see important messages.
Potential Solution:
Another future improvement, a persistent icon that notifies the user about notifications, where they can see a dropdown of the most recent notifications, as well as the ability to navigate them to the notification center where the user can see all of their notifications. This was an opportunity to match the pattern to the new design system.
Features:
The icon is present in the top right corner near their account information so it is always present no matter where they are in the product.
Instant notification while in app.
Ability to manage and delete their notifications, and set notification settings.
Media: Hand Drawings, Figma
Above: Drawings of preliminary ideation.
Below: A prototype and pattern library of the message center. Made in Figma.
Asset file of individual elements of the notification center UI, including fonts, icons, colors and variations.
Notification Bell icon in the top right corner, showing no new notifications.
The notification bell drop down menu showing multiple messages.
The notification menu showing no new messages.
Example of the welcome banner.
Example of the critical banner.
The help page with additional information on critical banner messages and other non-urgent messages.