SYNACK
Client Portal surfaces open vulnerabilities through continuous, real-time testing.
Overview
Synack is a software-as-a-service security platform that enables businesses to discover vulnerabilities in their assets through automated scanning and a team of dedicated researchers, aka ethical hackers. The platform has three products: the researcher portal, the Synack operations portal, and the client portal., Via the client portal companies can view real-time insights into their assets. Although the company has been around for 10 years, it still faces many challenges similar to that of a startup.
My Role
I was brought on to be a player/coach. My role was to be the design leader focused on elevating the Client Portal to consumer-grade UX/UI and a people leader helping develop goals, providing mentorship, and establishing expectations and responsibilities to stakeholders.
Company
Synack
Platform
Web Application
Team
4 Designers
8 Engineers
2 Product Managers
PROBLEMS
As a designer experiencing the client portal for the first time several major problems stood out. Immediately I could tell that the visual design felt outdated, similar to designs from the early days of the internet. After running through a few flows, I also concluded that the product wasn't intuitive and lacked hierarchy. Some common jobs to be done should have been much easier to understand and complete.
As a manager looking at the design team's workflow, I could see they operated more as a feature factory. Taking commands from stakeholders (usually Highest Paid Person's Opinions), cranking out designs without the opportunity to validate, and handing them off to developers. This meant that in the design process, there was very little time spent on discovering, defining, or delivering.
OBJECTIVES
My primary goal was to improve the product's experience through my reports. I empowered them to produce their best designs by providing the necessary tools and guidance. My objectives were constructed around two themes:
01.
Consistency
Ensure that when a user navigated through the product it wasn't a fragmented experience and repeated behaviors operated similarly.
02.
Efficiency
Instill a structure that allowed the team enough bandwidth to complete the entire design process and produce high-quality work in a timely manner.
DESIGN SYSTEM
Foundational Improvements
To have the biggest impact across all products I knew that we needed to build a design system. This would allow me to solve the issues around consistency and efficiency at the core. From building a design library at Asurion, as well as using and contributing heavily to Workday's Canvas Design System, I had enough knowledge and experience to confidently build Synack's design library from the ground up.
Again, my goal with this was to improve the visual design, bringing it up to consumer-grade UX/UI, but also solve issues at a foundational level. Meaning, I wanted to make sure that we followed accessibility standards (WCAG2), designed an on-brand uniform look, and incorporated UX best practices at the lowest levels. This includes typography, colors, and contrast. This system also needed to be robust enough to scale as we grew as a company and to be used on all three platforms.
The first action item was to run an audit and gather every component used in our portal. At the same time, I researched well-established design systems by other companies.
Contrast Ratios
Design Audit
Using this audit that my report put together, I presented to leadership and the product organization why we needed to invest resources toward a design system. One of the strongest selling points was showing that there were 11 different date pickers. Meaning, each time hours had been put towards building the same component over again.
Since resources were already limited, I was able to get an agreement that we would build a design kit (in Figma) and the components (in Storybook) as we developed new features. This would create parity and alignment between designers and developers, solving the issue where designers were photo-manipulating screenshots to hand off to developers. To encourage contributions from other designers or answer questions, I set up a regularly occurring office hour for the UX org. Also, to ensure we were aligned with developers, I set up a biweekly meeting to discuss progress and goals.
Storybook
Utilizing Figma's vast capabilities around design systems, I built each component using variants, auto layouts, instances, and styles. This was to streamline how quickly a design could be put together. I also built different libraries and by using a plugin an entire file could be switched to match a different product or go into dark mode.
Variants
Theme Switching
IMPACT
Because of the new design system, we were able to quickly implement improvements. Below are some impactful projects my team and I worked on.
Onboarding
From combing Zendesk support tickets and customer interviews, we knew that new users were often left confused about what their capabilities were within our product.
To get started, I worked with internal knowledge experts to define and document user personas. I found that Synackers would say customer and user interchangeably. However, I knew that the individual buying the product was not always the individual using the product. Also, because we had Role Based Access Controls (RBAC) there were different levels of users. I put all of this information together to design user personas that we could reference when creating PRDs.
User Personas
My team was then able to work on improving the first-time experience using these personas and RBAC. Improvements included customized welcome emails with logic around assigned capabilities, account creation/login screens, a welcome video, and a tour of the product.
Personalized Welcome Emails
Welcome Modal and Product Tour
Help Center
To keep the user educated and supported, I designed a solution to always meet the user where they were. Using Zendesk's contextual aware help and grouping all support items into a central location, the user would be shown appropriate page-based tips, videos, and knowledge-base articles.
Contextual Help Center
IA/Navigation
Because of a lack of leadership consensus and fast-paced production of new features, there was a disjointed IA and navigation. As new features were created, by default they were thrown into a new navigation tab. As a horizontal navigation bar, this created a crowding issue. I did research on the product's workstream, worked with a researcher to run card-sorting activities, and reorganized the navigation to match the user's mental model.
Issues with Previous Navigation
Workstream
Card Sorting
New Navigation
Homepage
Finally, one of the largest initiatives my team took on was revamping the homepage. The previous was outdated and only accommodated a specific user group (super admin) for a single product (vulnerability management).
With the upcoming launch of a new product, I knew this was a prime opportunity to redesign and create a personalized experience for each user type. My goal was to create a dashboard that knew the user's RBAC and would only show a high-level summary of what was happening/happened in their assets. It would consider all top use cases to address each user's needs and include widgets focused on business goals, creating the perfect combination for engagement and growth.
Before & After Slider of Homepage
OUTCOMES
Overall, I made a positive impact on the UX organization at Synack. I created a framework for scaling and implementing processes that solved issues around consistency and efficiency. The designs my team and I were able to implement were successful, but some were shelved due to resources and engineering capacity.
Unfortunately due to economic challenges, the company went through a restructuring that impacted our team. About 43% of the Product was eliminated and 70% of the design team was laid off.
©2023 ALL RIGHTS RESERVED
