Pentest setup
How might we create a more user-friendly design pattern for all of our products' setup needs, to increase customer time-to-value and simplify UX in our complex ecosystem?
The company
A 2 sided marketplace, with hackers on one side (B2C) and Enterprise/SMB customers on the other (B2B)
7 products
12 person design team
5 customer personas
6 hacker personas
My role
Design lead for our fastest growing product (and this whole case study)
Design mentor to other designers
Led prioritization workshops with stakeholders to define the roadmap and prioritize where to invest.
Impact
Elevated our design system for all products
Deepened our competitive moat for pentests
Introduced a new value driver for sales: 'We deliver faster than the competition'
Reduced the COGS and internal confusion for our delivery team
Goals of this particular project
Goals of this particular project
Goals of this particular project
Enable our customers to self-serve on the needed steps to setup this product. The experience should have a 4/5 system usability score, and the customer should be able to complete the steps in 30 minutes or less with 90% accuracy. The success metrics of the project is noted at the bottom as well!
Enable our customers to self-serve on the needed steps to setup this product. The experience should have a 4/5 system usability score, and the customer should be able to complete the steps in 30 minutes or less with 90% accuracy. The success metrics of the project is noted at the bottom as well!
Process
Process
Process
For this project we were moving from a services-led customer experience, to a hybrid of SaSS & services. It required service design, stakeholder brainstorms, internal process improvements, as well as (of course!) UI/UX that would elevate our platform and guide users in a frictionless way. We shipped iteratively, tracked everything we could, and iterated based on data.
For this project we were moving from a services-led customer experience, to a hybrid of SaSS & services. It required service design, stakeholder brainstorms, internal process improvements, as well as (of course!) UI/UX that would elevate our platform and guide users in a frictionless way. We shipped iteratively, tracked everything we could, and iterated based on data.
Stakeholder alignment artifacts
Examining CX
Based on qual & quant inputs, what was the overall customer journey? Where are the areas for improvement when setting up a pentest?
I created a living artifact in Figma for all stakeholders to reference.
Based on qual & quant inputs, what was the overall customer journey? Where are the areas for improvement when setting up a pentest?
I created a living artifact in Figma for all stakeholders to reference.
Service blueprint
What are we doing internally today? How much of that can be put into the customer's hands? How much time would that save us? I conducted countless interviews and compiled them quickly into this service blueprint that was kept up to date and leveraged for years.
What are we doing internally today? How much of that can be put into the customer's hands? How much time would that save us? I conducted countless interviews and compiled them quickly into this service blueprint that was kept up to date and leveraged for years.
Success metrics
Using our amplitude data I worked with a principal engineer to track the 'time to value' from purchase to start, as well as breakdown of just this step of 'setup' to start. I made these simple diagrams to explain to stakeholders the 'why' of the project.
Using our amplitude data I worked with a principal engineer to track the 'time to value' from purchase to start, as well as breakdown of just this step of 'setup' to start. I made these simple diagrams to explain to stakeholders the 'why' of the project.
Design ideation
I started in wireframes, de-risking the concepts, and getting buy-in from stakeholders, then quickly moved into high fidelity. Below are a few patterns I walked my team through and led critiques on, with the 11 person design team.
I started in wireframes, de-risking the concepts, and getting buy-in from stakeholders, then quickly moved into high fidelity. Below are a few patterns I walked my team through and led critiques on, with the 11 person design team.
Pattern 1 - Steppers
We had an existing stepper in our DLS, but there were some UI flaws with it. Should we refactor that? I led the team in a critique and checked the feasibility with engineers. I mentored the designer who created this original stepper and we worked together to fix it for his product specifically.
We had an existing stepper in our DLS, but there were some UI flaws with it. Should we refactor that? I led the team in a critique and checked the feasibility with engineers. I mentored the designer who created this original stepper and we worked together to fix it for his product specifically.
Pattern 2 - Cards
Referencing turbo-tax, can we make the setup more delightful and give the user a higher sense of accomplishment when finishing all tasks, through the UI?
Referencing turbo-tax, can we make the setup more delightful and give the user a higher sense of accomplishment when finishing all tasks, through the UI?
Patter 3 - Checklist
A clean checklist, with each item completed in a side-drawer. This one was most versatile across all products. I showed the design team how this would literally look in each and every product so we could feel confident about our decision.
A clean checklist, with each item completed in a side-drawer. This one was most versatile across all products. I showed the design team how this would literally look in each and every product so we could feel confident about our decision.
Prototypes and research
3 clickable prototypes
I love making prototypes and bringing micro-interactions to life. I built out 3 prototypes, tested them internally then chose 1 with the highest heuristic potential to move forward with.
I love making prototypes and bringing micro-interactions to life. I built out 3 prototypes, tested them internally then chose 1 with the highest heuristic potential to move forward with.
Usability testing
Leading my own research & recruiting, I met with 5 customers and got validation that they not only saw value in doing these steps themselves, but the flows were very intuitive. They sprinkled in lots of great feedback that led me towards the final designs.
Leading my own research & recruiting, I met with 5 customers and got validation that they not only saw value in doing these steps themselves, but the flows were very intuitive. They sprinkled in lots of great feedback that led me towards the final designs.
Working in a complex ecosystem
Building this flow meant hooking into an incredibly complex ecosystem. We had to decide which parts of the MVP needed to connect to the rest of the product. For each connection, we decided an impact to effort scale, and then iteratively connected to the entire platform over the course of the next year, which included integrating with login complexity, a robust RBAC system, a data-model that was evolving in realtime, and our internal tools.
Building this flow meant hooking into an incredibly complex ecosystem. We had to decide which parts of the MVP needed to connect to the rest of the product. For each connection, we decided an impact to effort scale, and then iteratively connected to the entire platform over the course of the next year, which included integrating with login complexity, a robust RBAC system, a data-model that was evolving in realtime, and our internal tools.
Flow charts of the UX
As a systems thinker, I enjoy thinking through every edge case and working with engineers on how to break a project down into iterative, deliverable steps.
As a systems thinker, I enjoy thinking through every edge case and working with engineers on how to break a project down into iterative, deliverable steps.
2nd side of the marketplace
We had to make sure all that data was going to come through looking digestible for the pentesters who wanted to work on the project. They most common are viewing mobile-first in darkmode, so here is what that looks like.
We had to make sure all that data was going to come through looking digestible for the pentesters who wanted to work on the project. They most common are viewing mobile-first in darkmode, so here is what that looks like.
Hide RBAC complexity
The primary user might need to invite a collaborator, but we didn't want to send them over to org settings and get lost. There was a push and pull between RBAC and simplicity, as we had to make a few assumptions about the invited users desired permissions.
The primary user might need to invite a collaborator, but we didn't want to send them over to org settings and get lost. There was a push and pull between RBAC and simplicity, as we had to make a few assumptions about the invited users desired permissions.
Internal Application
Our delivery team had the need to keep tabs on the progress of the customer, without having access to the organization, so we surfaced all metadata in our internal tool.
Our delivery team had the need to keep tabs on the progress of the customer, without having access to the organization, so we surfaced all metadata in our internal tool.
Iterative handoffs
UI spec handoffs
Working with our DLS team, I specced out the final UI specifications, micro-interactions, and breakpoints on our responsive grid system. The DLS team helped us ensure that this was componentized for the other products.
Making sure that the engineers have everything they need to deliver successfully.
Final design
I created an elegant reusable pattern that could work for all 4 of our products that need a setup step. It brought all of our products together into a more cohesive platform.
I created an elegant reusable pattern that could work for all 4 of our products that need a setup step. It brought all of our products together into a more cohesive platform.
Measure, Learn, Iterate
There were several measurements of success of the project:
1) SUS - Was the system usable & functional? (A general SUS score)
2) COGS - Was the customer able to accomplish the tasks in 3 days or less without our help?
3) Was the customer able to accurately fill out the information and alleviate our internal team from 70% of their work on this task?
4) Value driver - were we able to sell this product with a new value driver that we could deliver faster than the competition?
Here are 2 slides I presented to show results from the first 30 days of the feature launching. I also sat on 2 customer calls a week, right after they completed setup, to capture the SUS score manually and get the 'why?' behind it, before productizing the gathering of the score in platform.
There were several measurements of success of the project:
1) SUS - Was the system usable & functional? (A general SUS score)
2) COGS - Was the customer able to accomplish the tasks in 3 days or less without our help?
3) Was the customer able to accurately fill out the information and alleviate our internal team from 70% of their work on this task?
4) Value driver - were we able to sell this product with a new value driver that we could deliver faster than the competition?
Here are 2 slides I presented to show results from the first 30 days of the feature launching. I also sat on 2 customer calls a week, right after they completed setup, to capture the SUS score manually and get the 'why?' behind it, before productizing the gathering of the score in platform.
There were several measurements of success of the project:
1) SUS - Was the system usable & functional? (A general SUS score)
2) COGS - Was the customer able to accomplish the tasks in 3 days or less without our help?
3) Was the customer able to accurately fill out the information and alleviate our internal team from 70% of their work on this task?
4) Value driver - were we able to sell this product with a new value driver that we could deliver faster than the competition?
Here are 2 slides I presented to show results from the first 30 days of the feature launching. I also sat on 2 customer calls a week, right after they completed setup, to capture the SUS score manually and get the 'why?' behind it, before productizing the gathering of the score in platform.
Bonus - backfill other products
Personal learnings:
Always provide mock visuals when ideating with stakeholders to make ideas more concrete
Find holistic value across the platform
Ship incremental value - follow inspired method
Personal learnings:
Always provide mock visuals when ideating with stakeholders to make ideas more concrete
Find holistic value across the platform
Ship incremental value - follow inspired method