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 to create an all-in-one experience.
During my time on Polaris I worked on several key features that enhanced the usability of the product that helped shape polaris into the ultimate toolkit for its 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 created a flow diagram. This helped bridge the gap between storyboarding and mockups as well as provided more transparency with the engineering team. This shows the natural walk through of what the users steps are with a simple wireframe, it also includes all of the storyboard requirements.
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 presented in a usability test to subject matter experts.
Video: Presentation of the final design.
fAST Dynamic
Problem Definition:
Users of Polaris needed a way to conduct different types of cloud tests and see the results of those tests in an accessible way. The solution was to create an interface that held the results of 3 different test types called Static, SCA and Dynamic. When the user visits the application test results page, they see an organized view of their issues found from the test results. My role in this project was to update a tabular window that was responsive and easy to navigate while showing the user specific data about their test results. The addition of this feature helped secure a contract with an enterprise level customer.
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 and test scheduling policies. I designed a tabular interface where the policies could be found easily and a workflow that streamlined policy creation. This new design improved the users ability to find the projects that they wanted to apply their policy to. I conducted storyboarding with stakeholders and then built the prototype in Figma.
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
Updating the Design System
As part of the merging of features our UX team collaborated on updating and merging our design system to Figma. In this design update, we simplified the navigation to make more room for data on the pages. We also added a sub horizontal menu. We kept the same color scheme for familiarity to our existing customers.
On the left is the old layout, with clunky navigation and data. On the right, the new layout using the new design system with updated patterns.
New User Tour Concept
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 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
New 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
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.