Visualizing Cybersecurity

Redesigning the Solid Security Onboarding to Bridge the "Value Gap"

project overview

Security plugins are notoriously complex. Following the iThemes rebrand to Solid Security, research showed users felt overwhelmed by jargon and "setup fatigue." I was tasked with redesigning the onboarding to provide immediate value while simplifying high-stakes security concepts.

team size

Myself, a Lead Developer, and a Product Manager.

project type

End-to-End Product Design

duration

4 Weeks

my role

Sole Product Designer

company

Solid Security

The outcome

A streamlined, "Scan-First" onboarding flow that reduces setup friction and uses motion to communicate and visualize complex technical protections.

Additional reduction in Support Tickets

Reduction in Onboarding Related Support Tickets (Solid Security).

Feature confusion decreased

Additional feature confusion decreased. The first wave occurred during our redesign, and after phase 2 launched, we saw a further reduction, according to our support team's discussions with users.

Visual Overview

The problem:

Based on initial user research (conducted during the brand transition), we found that users didn't understand what the plugin was actually doing. The old onboarding was a series of tedious checkboxes. Users felt a "Value Gap"—they did all the work (configuration) before seeing any results (protection).

The Brief: Increase perceived value to the customer earlier in the product cycle.

The Hypothesis: If we lead with a "Site Scan" to show real-time vulnerabilities, we create an immediate "Aha!" moment. By using motion and simplified language, we can explain why a feature matters without requiring a degree in cybersecurity.

The Brief: Increase perceived value to the customer earlier in the product cycle.

What I owned?

My ownership extended beyond just the Figma files. I was responsible for the end-to-end UX strategy for the post-rebrand onboarding experience.

User Research Synthesis: I conducted the research we used for our empathize stage and created all UX artifacts from our findings.
Motion Design Strategy and Implementation: I owned the creation of a handful of "visualizers" that communicated to users the different security topics and the impact to their sites if they chose to enable the feature. These visualizers were created in RIVE with existing state machines for a smoother handoff to developers.
UI Design: I translated the new Solid Security brand guidelines into a reusable layouts, a modal component.

UX Strategy: The new onboarding flow was optimized to deliver value earlier in the experience and to introduce the most critical security features first, with improved explanations and visual clarity.

My ownership extended beyond just the Figma files. I was responsible for the end-to-end UX strategy for the post-rebrand onboarding experience.

User Research Synthesis: I conducted the research we used for our empathize stage and created all UX artifacts from our findings.
Motion Design Strategy and Implementation: I owned the creation of a handful of "visualizers" that communicated to users the different security topics and the impact to their sites if they chose to enable the feature. These visualizers were created in RIVE with existing state machines for a smoother handoff to developers.
UI Design: I translated the new Solid Security brand guidelines into a reusable layouts, a modal component.

UX Strategy: The new onboarding flow was optimized to deliver value earlier in the experience and to introduce the most critical security features first, with improved explanations and visual clarity.

My ownership extended beyond just the Figma files. I was responsible for the end-to-end UX strategy for the post-rebrand onboarding experience.

User Research Synthesis: I conducted the research we used for our empathize stage and created all UX artifacts from our findings.
Motion Design Strategy and Implementation: I owned the creation of a handful of "visualizers" that communicated to users the different security topics and the impact to their sites if they chose to enable the feature. These visualizers were created in RIVE with existing state machines for a smoother handoff to developers.
UI Design: I translated the new Solid Security brand guidelines into a reusable layouts, a modal component.

UX Strategy: The new onboarding flow was optimized to deliver value earlier in the experience and to introduce the most critical security features first, with improved explanations and visual clarity.

What principles did I lean on?

Rather than designing in a vacuum, I adopted a "Sponge" approach—absorbing the team's deep technical domain knowledge and combining it with verified user pain points.

Synthesizing Existing Research: I started by auditing the iThemes rebrand case study. The data was precise: users were struggling with "Security Anxiety." They knew they needed protection, but didn't feel qualified to configure it.
Leverage Expertise (The "Expert-to-User" Translation): Working with a Lead Developer who understands the "how," I focused my energy on the "why." If the developer explained that a feature blocks IP-based packet floods, I translated that into a visual toggle for "Brute Force Protection" with a "Why is this important?" tooltip that included a real world application of the security topic.
Show, Don't Just Tell (System Transparency): Research showed users felt the plugin was a "black box." I leaned on the principle of System Status Visibility. By introducing the "Site Scan," we provide immediate feedback that the plugin is active and providing value before the user even touches a setting.
Design Thinking: I leaned on Design Thinking for my framework in approaching this project.

Rather than designing in a vacuum, I adopted a "Sponge" approach—absorbing the team's deep technical domain knowledge and combining it with verified user pain points.

Synthesizing Existing Research: I started by auditing the iThemes rebrand case study. The data was precise: users were struggling with "Security Anxiety." They knew they needed protection, but didn't feel qualified to configure it.
Leverage Expertise (The "Expert-to-User" Translation): Working with a Lead Developer who understands the "how," I focused my energy on the "why." If the developer explained that a feature blocks IP-based packet floods, I translated that into a visual toggle for "Brute Force Protection" with a "Why is this important?" tooltip that included a real world application of the security topic.
Show, Don't Just Tell (System Transparency): Research showed users felt the plugin was a "black box." I leaned on the principle of System Status Visibility. By introducing the "Site Scan," we provide immediate feedback that the plugin is active and providing value before the user even touches a setting.
Design Thinking: I leaned on Design Thinking for my framework in approaching this project.

Rather than designing in a vacuum, I adopted a "Sponge" approach—absorbing the team's deep technical domain knowledge and combining it with verified user pain points.

Synthesizing Existing Research: I started by auditing the iThemes rebrand case study. The data was precise: users were struggling with "Security Anxiety." They knew they needed protection, but didn't feel qualified to configure it.
Leverage Expertise (The "Expert-to-User" Translation): Working with a Lead Developer who understands the "how," I focused my energy on the "why." If the developer explained that a feature blocks IP-based packet floods, I translated that into a visual toggle for "Brute Force Protection" with a "Why is this important?" tooltip that included a real world application of the security topic.
Show, Don't Just Tell (System Transparency): Research showed users felt the plugin was a "black box." I leaned on the principle of System Status Visibility. By introducing the "Site Scan," we provide immediate feedback that the plugin is active and providing value before the user even touches a setting.
Design Thinking: I leaned on Design Thinking for my framework in approaching this project.

How did I work with developers and stakeholders?

A design is only as good as its implementation. I acted as the bridge between our PM and Stakeholders and the Engineering Team.

With Developers: Security logic is heavy. We compromised on a "staged scan" animation that allowed the UI to feel fast even if the data fetch took a few extra seconds. I delivered RIVE files for easy motion implementation without the back and forth workshopping that we employed in previous motion design.
With Stakeholders: I presented the "Scan-First" approach to the Product Lead by framing it as a Retention Play. I argued that users who see their vulnerabilities within the first 60 seconds are more likely to complete the setup and less likely to churn during the trial period.
The Hand-off: I utilized a "Design Token" approach for the new brand colors and typography to ensure that the transition from iThemes (blue) to Solid Security (purple) was a seamless CSS swap for the dev team.

A design is only as good as its implementation. I acted as the bridge between our PM and Stakeholders and the Engineering Team.

With Developers: Security logic is heavy. We compromised on a "staged scan" animation that allowed the UI to feel fast even if the data fetch took a few extra seconds. I delivered RIVE files for easy motion implementation without the back and forth workshopping that we employed in previous motion design.
With Stakeholders: I presented the "Scan-First" approach to the Product Lead by framing it as a Retention Play. I argued that users who see their vulnerabilities within the first 60 seconds are more likely to complete the setup and less likely to churn during the trial period.
The Hand-off: I utilized a "Design Token" approach for the new brand colors and typography to ensure that the transition from iThemes (blue) to Solid Security (purple) was a seamless CSS swap for the dev team.

A design is only as good as its implementation. I acted as the bridge between our PM and Stakeholders and the Engineering Team.

With Developers: Security logic is heavy. We compromised on a "staged scan" animation that allowed the UI to feel fast even if the data fetch took a few extra seconds. I delivered RIVE files for easy motion implementation without the back and forth workshopping that we employed in previous motion design.
With Stakeholders: I presented the "Scan-First" approach to the Product Lead by framing it as a Retention Play. I argued that users who see their vulnerabilities within the first 60 seconds are more likely to complete the setup and less likely to churn during the trial period.
The Hand-off: I utilized a "Design Token" approach for the new brand colors and typography to ensure that the transition from iThemes (blue) to Solid Security (purple) was a seamless CSS swap for the dev team.

Tools I used:

Empathize

Branding: Strategy and Executio

Research was a highly collaborative effort that combined several internal discussions with the PM, Lead Developer, and Support team, as well as existing user research conducted during our company rebrand.

User Interviews and Conversations With Our Support Team

10 users Interviewed

Low Confidence: 5 users rated their security confidence at 5/10 or lower immediately after onboarding (a significant number).

Feature Confusion: 7 users found the User Groups concept confusing and lacked understanding of its value.

Support Tickets: I noticed that many support tickets focused on fixing settings configurations that users were unaware of.

Define

The Current User Flow

Key Takeaways

The current flow has a poor time-to-value score. Users would enable helpful features, but didn't perceive the value added until an attack on their site occurred.

Rather than designing in a vacuum, I adopted a "Sponge" approach—absorbing the team's deep technical domain knowledge and combining it with verified user pain points.

Unengaging "general site questions" kills momentum

The one-question-at-a-time format should provide a more engaging experience if kept.

The early onboarding flow deeply lacks in immediate value

Users are only gaining the most perceived value from the features-enabling section, and that experience is a basic preview of the settings screen. Improvements were made during the rebrand project a few months earlier, but some still needed to be made.

The onboarding complete screen does not emphasis actions

The user's actions during the onboarding experience are unclear and are quickly brushed over.

"How Might We?" statements

How might we increase engagement with the security topics covered?
How might we improve user confidence during onboarding?
How might we increase perceived value earlier in the user's experience?

Ideation

Unfortunately, I don't have the artifacts from the ideation sessions I held with the product manager and the lead developer. We decided to focus on the solutions below after using the crazy 8's technique and the MoSCOW method to prioritize our ideas:

Reduce unnecessary questions:

In collaboration with the Lead Developer, I audited the current onboarding flow to eliminate redundant data entry and low-value questions that could be assumed. By streamlining the path to completion, we reduce cognitive load and friction. This ensures users reach their "Aha!" moment faster, preventing drop-off and significantly boosting user confidence during the initial setup.

Perform a Site Scan within the onboarding experience:

To deliver immediate value, I worked with our PM to propose a real-time "Site Scan" as one of the first onboarding steps. This gives the user an instant "health score" or status report of their security posture. Seeing tangible results before they even finish the setup increases the product's perceived value and establishes trust from the outset.

The proposed user flow:

Include a stronger overview at the end of the onboarding experience:

I proposed ending the flow with a more comprehensive summary that confirms exactly what has been secured. Instead of a simple "Success" message, this overview reinforces the value provided by highlighting the specific vulnerabilities addressed, leaving the user feeling empowered and confident in their new security setup.

Pull out the most important features from the bulk feature section:

Working with the PM, I suggested prioritizing the most impactful security tools to guide users toward actions that deliver the highest protection with the least effort, preventing "feature overwhelm" when users land on the feature section without any introduction to more complex features.

This way, we were not overriding the work completed during the product redesign; instead, we were building on it.

Use motion graphics to improve user engagement:

I proposed incorporating purposeful UI animations and motion graphics to make complex security concepts easier to understand and visualize. By visualizing two-factor authentication through an intuitive UI, we can transform a static, often intimidating experience into a dynamic, engaging one, directly keeping users focused on critical security topics. This would also help increase users' understanding and confidence in the onboarding experience.

Ideating on the Two - Factor

Finalized Designs

New onboarding screens

Site Scan Intro

No Vulnerabilities Found

Vulnerabilities Found

Features Section: Two Factor

Features Section: A Different Approach to User Groups

Features Section: Brute Force Protection

Features Section: CAPTCHA

Onboarding Complete:

We added the "notable improvements" section to reduce confusion and included the vulnerability that we caught early in the onboarding flow to improve perceived value and value delivered.

Prototype

Basic animation in Figma before animating in RIVE for an easy handoff.

Test

We conducted a small testing round of 5 new-ish users with Maze Testing. My PM and I felt confident in the improved experience, considering that we had discussed with the problem at length multiple times before, so we kept the testing to a minimum, given the quick launch expectations

Key Takeaways

100% Task Completion Rate

Every participant successfully completed the onboarding without intervention.

4.8 / 5 Perceived Value Rating

Users cited the Site Scan as the primary reason for feeling the product was "immediately useful."

+65% Confidence Rating

A pre- and post-test survey showed a massive jump in user confidence regarding their site’s security status.

Less than 2 mins Average-Time-to-Value

The "Site Scan" provided a security baseline within the first 120 seconds of the experience.

Ready for Dev

We decided to move forward, and I began prepping the designs for development using Zeplin and Figma best practices.

Outcome & Impact

Unfortunetly, I was not able to run post-launch interviews but I was able to learn from our Support team.

Additional reduction in Support Tickets

Reduction in Onboarding Related Support Tickets (Solid Security).

Feature confusion decreased

Additional feature confusion decreased. The first wave occurred during our redesign, and after phase 2 launched, we saw a further reduction, according to our support team's in-depth discussions with users.

Lessons Learned

Real World Application is King

When communicating complex topics like cybersecurity, presenting the real-world application of a given feature will help users understand it far more than simply defining the topic.

User Confidence is Key

Ensuring users are as confident as possible throughout onboarding will lead to a better overall product experience beyond the onboarding flow. The importance of the first few minutes of a user's interaction with your product cannot be overstated.