Project Overview
Following Liquid Web's acquisition of iThemes in 2018, the company formed the StellarWP Family of Brands (a collective of over five companies) and later decided to rebrand iThemes as SolidWP. I seized the opportunity, and my proposed design concepts were selected from those submitted by designers across the Family of Brands. This led me to spearhead the design efforts for the massive, multi-product, and multi-brand rebrand.
Project Type
End-to-end product design
Duration
12 months
My Role
Sole Product Designer
Client
SolidWP
Outcome Overview
3 New features
Launched highly desired security features
Reduced tickets
Reduction in Onboarding Related Support Tickets (Solid Security)
3.5 to 4.4
Change in star rating on wp.org
Devin Walker
Artistic Director of Jetpack
Former SVP, Chief Innovation Officer at SolidWP
Visual Overview
What I Owned?
I owned the majority of the year-long design process, all of the product redesigns, feature releases, product releases and most of the website design and launch. the only exception would be the designing the websit homepage, and product hero section. Although, I did manage creative direction on those screens.
What Principles Did I Lean On?
I leaned on both Design thinking and Lean UX practices. This project helped me understand when to employ either approach and the benefits and struggles of each.
How Did I Work With Developers and Stakeholders?
I worked day in and day out with developers and stakeholders. Our lead developer was a contributing stakeholder himself, and the GM and marketing manager at SolidWP were heavily involved in the massive redesign. This meant one weekly meeting with stakeholders and several meetings with devs every week, including a dev workshop that I instituted at SolidWP.
Tools I Used:
The Problem:
The existing ithemes brand was aged and outdated, evoking the company’s humble beginnings when it solely sold WordPress themes. The brand no longer accurately communicated its current standing or its future aspirations within the market. The primary challenge was initiating a strategic rebrand to position the company as a leader in WordPress security and site management, while simultaneously delivering tangible, marketable improvements to its product suite to boost the bottom line.
The Goals:
Successfully launch the new SolidWP brand within a year.
Claim supremacy in WordPress security by offering the best feature list for Solid Security.
Boost the bottom line by offering marketable improvements to existing products and launching new ones (such as Solid Backups - NextGen), and successfully bundling them into the Solid Suite.
Recognizing the immense scope of the project and the tight deadline, our team made a crucial strategic decision early on: to prioritize speed-to-market over launching a new, in-depth user research effort for the initial brand identity.
How Could We Justify Skipping a New Research Round?
We leveraged existing assets: We capitalized on already established user personas and a strong relationship with our iThemes Training community.
We dove into previous contextual Interviews: My Product Manager and I previously embedded general discovery questions within ongoing user interviews and usability testing sessions conducted for our Passkeys release.
Final Decision: Strategic Tradeoff
Given the stakeholder mandate to "hit the ground running," we deliberately traded new-user interview sessions for speed-to-market in the early stages of the rebrand.
Our confidence in bypassing extensive new research was further reinforced by internal expertise. Our Lead Developer regularly contributed to WP Core, providing deep market insight. We also leaned on the experience of our key stakeholders, including a development-oriented GM who clearly understood the future direction of WP (e.g., the rise of Elementor and the restructuring of Jetpack).
Competitor Landscape
Users relied on a suite of competitor products for day-to-day operations, including All-In-One Migration, UpdraftPlus, WP Engine, Jetpack, and KadenceWP.
Visual Cues & Aesthetics:
Observing cutting-edge WP tools like KadenceWP, which was rapidly innovating in the WP space, informed a key discovery: users strongly preferred a fresh, cutting-edge approach to the often outdated, 2000s-style WP branding.
Directional Insight:
Stakeholders clearly preferred a sleeker design over WordFence's basic WP layout, aiming to move entirely away from that outdated look.
We immediately began refining the original branding concepts, iterating three times over two weekly meetings with the company's GM, Devin, the primary stakeholder.
Initial Concepts:
Users relied on a suite of competitor products for day-to-day operations, including All-In-One Migration, UpdraftPlus, WP Engine, Jetpack, and KadenceWP.
Refinement:
I rapidly created a few versions of each page, often in mid-fidelity, within a week or sometimes within a few days.
Finalize:
Designs were posted to Slack or reviewed in quick huddles with stakeholders. Each screen generally required no more than three iterations before sign-off.
SolidWP Branding
SolidWP Logos
SolidWP Marketing Material
SolidWP Brand Colors
Website Design
We used the same core user research insights collected during the brand redesign kickoff To set the website's visual standards, I led a focused competitive review session with a Director of Design, analyzing both immediate competitors and leaders in the broader SaaS field, including Webflow, Elementor, and Jetpack.
This analysis helped us identify key design elements, standout interactions, and effective overall layouts, leading to the creation of four essential Design Pillars to steer the entire process.
Design Pillars:
Forward thinking
Modern
Robust graphics
Engaging interactions
The site must sell individual products (Solid Central, Solid Security, Solid Backups) while prominently featuring the newly formed Solid Suite bundle throughout the user journey.
The new site required dedicated sections for product comparisons against competitors.
Content Migration:
The infrastructure needed to host and migrate all existing blog content and resource pages, including the Support section and the rebranded Solid Academy (formerly iThemes Training).
Early Concepts & Abstraction: Elle and I held multiple intensive meetings. We agreed to abstract the core idea of each product and communicate it through engaging animation. This was a deliberate choice, as our core products (security and backups) do not inherently "scream exciting" like other sister companies' products (e.g., The Events Calendar or Kadence’s Site Builder).
Mid-Fidelity & Motion: While I transitioned to product work, we held occasional review sessions (including the GM). We established core animation designs, graphic elements, fonts, and robust mid-fidelity layouts for the homepage.
Defining the Edge: We moved into high-fidelity designs, reviewing progress weekly. Motion was reinforced as the key differentiator to boost engagement. Our edge relied on motion, a strong value proposition, highly relevant copy, robust product comparisons, and customer testimonials.
High-Fidelity Delivery: Under my high-level supervision and occasional GM reviews, Elle completed the high-fidelity design for the entire Homepage, the Pricing page, and the hero sections of all product pages before organizational needs required her to return to her regular duties.
Following Elle's departure due to resource constraints at the sister company, I met with the GM, who confirmed the pivot: I would now have to continue managing product improvements and complete the remaining website redesign entirely on my own. I accepted the challenge and took over full responsibility for the remainder of the web project. We will revisit this pivot once we’ve discussed the product improvements and new feature design I conducted while supervising Elle on the website.
Having shifted to full product ownership and completed the core feature designs, I quickly took back responsibility for the rest of the website build, overseeing the final high-pressure phase with only three months left until launch.
I held a key kickoff meeting with Elle, the GM, and the Marketing Director to gain access to all existing assets and finalize the remaining scope. Elle provided two weeks of hand-off support. I quickly identified that the remaining project scope was substantial, comprising new marketing initiatives and the redesign of existing iThemes resource pages, all of which required adherence to the new aesthetic.
I also learned of a new development constraint that would affect design:
The GM identified a major limitation: the platform couldn't let users select the site count during checkout. To ensure a smooth user experience despite this technical issue, I designed a selection slider to be added on every purchase CTA within the current designs as a simple workaround.
Design Pivot:
My process for delivering the remaining screens was rapid, high-velocity, and consistent:
I met with the GM and Marketing Manager to review the specifics of each page. For existing pages, we collaboratively reviewed the current content to determine what to retain or discard.
Rapid Design: I rapidly created a few versions of each page, often in mid-fidelity, within a week or sometimes within a few days.
Review and Finalization: Designs were posted to Slack or reviewed in quick huddles with stakeholders. Each screen generally required no more than three iterations before sign-off.
The Blog and All It's Associated Pages:
Blog Article
Blog Overview
The New Page for Solid Academy, Previously iThemes Training:
The Additional Sections Needed for The Product Pages:
Features - Primary
Features - Secondary
The Contact page
The Support page
Affiliates Page:
The Constraint:
With only three months remaining before the deadline, the senior web developer became distressed over the aggressive schedule and was subsequently let go.
The Pivot:
I had to pivot to a new developer immediately. Since the previous developer had completed the product pages, homepage, and pricing page, the remaining screens fell to the new hire.
Design Shift:
The new developer had less experience with advanced interactions and animation, so I lowered my expectations and adapted my design approach for the remaining pages. This explains the visible difference in interaction complexity between the animated product pages and the following static screens.
Once the initial website direction was set, I quickly shifted to the product work, which formed the core of the rebrand's value proposition. The timeline was tight: we aimed to complete the product redesign and feature launch within six months.
Initial Week
Product Kickoff Meeting: A formal meeting took place with the GM, all stakeholders, the Marketing Director, the Lead Developer, and the Project Manager to finalize new features, define redesign boundaries, assess marketing implications, set priorities, and establish the aggressive 6-month timeline.
The product focus was clear: Solid Security, our premier product with the most active installs, needed new features to fill market gaps, including Firewalls, Site Scans, and robust User Security Management. Additionally, the GM mandated that our lesser-known Backups solution be enhanced and marketed as a strong offering and an add-on to Solid Security and Solid Central.
Business and Technical Alignment
Before starting the design, I met with the Lead Developer to define clear technical and visual constraints.
We Lacked a Design System
We discussed that the absence of a formal internal design system was slowing down the design process and causing confusion. At the same time, we wanted to avoid starting from scratch.
The Solution
We adopted the newly created WP design system (from the WP core team). This was a critical decision that allowed design and development to align quickly using base components, ensuring our process was as straightforward as possible given the tight 6-month deadline.
Beyond adding new features, I felt we needed to address existing product shortcomings in our most profitable product, iThemes Security. Since our v7 release, we have been receiving poor reviews for a layout redesign that launched before my time at iThemes.
I suggested that we conduct a research round to explore how we can enhance iThemes Security for the rebranding to Solid Security. My GM agreed and gave me the green light to proceed with the research.
Support Ticket Analysis:
This provided clear quantitative evidence of problematic user flows, specifically noting issues with the initial Site Connection flow for Solid Central, and the Onboarding and Edit Settings flows for Solid Security.
Secondary Data: WP.org reviews
This offered another opportunity to understand how our users perceived our value add, and the usability of iThemes Security.
3.7
Avg star rating for 2023 at the time. Down from a strong 4.6 star rating.
To thoroughly analyze the essential Security Onboarding experience, I secured stakeholder approval to conduct targeted user interviews. I then facilitated the user interviews which something like this:
Source via email list
Segment users (Power, Mid-tier, Casual)
Qualify via Google Form
Invite to a 1-hour session focused on onboarding and day-to-day usage.
Core Research Questions
Focused on time-on-task, feature understanding, post-onboarding confidence, and resolving feature confusion.
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.
Usage Behavior: Most were "set-it-and-forget-it" users who relied on weekly emails. They had lower-than-expected dashboard usage and only visited settings when directed by our support team.
Missing Features: All four power users cited the lack of a firewall as a key product failure. Two power users specifically requested a more granular understanding of vulnerable software.
The main takeaways were clear: onboarding was lackluster, settings navigation was problematic, and dashboard usage was insufficient to maintain consistent site security. Users wanted granular user management.
After presenting the findings to the GM and Lead Developer, we promptly finalized the roadmap based on user data validating our assumptions and strategic business opportunities.
Existing Feature Fixes
Improve Onboarding (increase confidence/value), Improve Dashboard (new cards, UX), Simplify Settings Navigation, and create a New Security Management Screen.
Strategic New Features
Vulnerability Management: The GM plans to explore integration with Patchstack, an expanding vulnerability management tool, as a major market differentiator despite limited initial user mentions.
Site Scan: A standalone site scan feature would be developed to supplement or replace the Patchstack integration, demonstrating our team's expertise in the WP space.
To create practical solutions, I reviewed UX best practices (uxlaws.com) and drew inspiration from competitors (Defender, WP Engine). I spent several weeks progressing from mid-fidelity to high-fidelity designs, iterating across all core flows.
Focused on time-on-task, feature understanding, post-onboarding confidence, and resolving feature confusion.
Problem Solved
The architecture had two menus—a tab menu and a side nav—along with an unnecessary duplicate tab menu, which immediately increased mental load.
The Solution
I removed the duplicate tab menu and turned the side nav into a detached side nav. This reduced mental load and freed up space to add a new option to the side navigation.
Impact
Reorganized the layout to move the feature edit interaction from a modal (gear icon) to an in-page element (dropdown chevron), while highlighting the on/off toggle. I also added a direct link to the help document in each feature module.
Before
After
Goal
Increase users' perceived value and make dashboard usage—no matter how small—a reality through enhanced visuals and easy-to-understand information.
The Solution
Before
After
Vulnerabilities Card: Added a summary card highlighting the most urgent vulnerabilities, providing the most actionable and relevant information for users.
Problem Solved
Problem Solved: Onboarding was an ambiguous, nebulous set of questions that left users with low confidence.
The Solution
Added a straightforward Progress Indicator and redesigned the step indicator by removing unnecessary sub-tabs and adding numbers to reduce mental load and increase confidence.
Password policy question
User Groups creation
I simplified the User Group onboarding flow by replacing the step-by-step, one-by-one process with a more flexible tab navigation for user groups. This allows users to freely navigate and access the same cleaner settings modules from the main settings screen.
Before
After
Added a feature review on the end screen, complemented by snackbar notices to confirm actions and remind users of security updates. After several iterations, an upsell for basic users was included on the end screen, taking advantage of the high conversion rate linked to new installs.
Loading with snackbar notices
Onboarding complete screen
I proposed a simple, one-click Firewall settings section for onboarding, but the Lead Developer and GM rejected it. They felt it would increase support tickets due to automatic enabling and was unnecessary, as the firewall was primarily for power users who already had the know-how to configure it.
Firewall Security Levels
Deferred Improvements:
I proposed a more robust, permanent Onboarding Overview screen with additional setup modules to promote ongoing security monitoring. While appreciated, the GM and Lead Developer postponed this due to a tight deadline, opting to keep it as a single onboarding event. This was a known gap that would be addressed later (Solid Security Onboarding Phase 2). However, all other suggestions were approved.
We were pleased to see our assumptions confirmed (expert advice is dependable but must always be validated if budget and time allow). Once we moved on to new features, we used regular workshop hours with developers and conducted rapid iteration from low to high-fidelity designs.
Focused on time-on-task, feature understanding, post-onboarding confidence, and resolving feature confusion.
Technical Mandate
The Lead Developer confirmed we needed a background site scan (running twice daily) to populate the screen and suggested an email notification for high-impact vulnerabilities.
High-Level Management UI
I reviewed the partner UI (Patchstack) but designed a completely new high-level management UI. I used the experimental Dataviews table in the WordPress storybook, a "development magic" idea suggested to and approved by the Lead Developer for quickly building the complex, data-heavy screen.
Vulnerabilities Screens
Vulnerabilities Overview Table
Monetization Design
The Lead Developer and I followed the existing patterns used in our partner's UI. We created a single vulnerability screen to give users the ability to review each vulnerability in full detail. The UI was designed to highlight the value of the Pro plan by emphasizing how long a vulnerability has existed on the site, contrasting automatic patching with the manual correction required for free users. An additional upsell card was added below the table to support marketing efforts, serving as a key differentiator from both our partner's UI and our own.
Information Architecture
Followed the general structure of competitors (central scan modules with detailed results below), while emphasizing UI simplification.
User Flow
The flow was straightforward and fast: CTA click → minor visual animation during module review → results shown in the table. The simple visual animations were a deliberate and enjoyable addition.
Monetization
To promote upsells, the Pro modules were shown even in the free version. I made a simple prototype to help a junior developer create basic animations.
Need
Granular management for individual users on key features like login security, bad-agent attacks, and more.
The Solution
I jumped straight into high-fidelity design by implementing an edit CTA on a high-level table. To keep the management context clear, a modal was used for the edit CTA, which was agreed upon by the Lead Developer.
Key Decision That Made All This Possible:
Design System: Choosing the WP design system was crucial, as it established clear design standards (such as button states, modal designs, loading animations, etc.) that allowed me and the development team to work quickly and consistently on creating new features and editing existing screens, ensuring we met the tight deadline.
Final Testing and Iteration During Phase
Constraint: Due to the very tight schedule, there was no chance to test the final designs with actual users before launch, as I was quickly redirected to the website design right after product work.
Mitigation: We chose to proceed with new feature development and depend on internal testing and QA by leveraging our strong Support Team to test the rebrand changes. This was a necessary trade-off for faster time to market.
Lisa Canini
Frontend Engineer
Vultr
Final Readiness and Launch
The project was officially ready for launch, paving the way to assess the business impact and collect initial user feedback. A final DQA was performed for both the website and product launches. All assets were uploaded to a shared Notion for company-wide access.
Outcome & Impact
WP.org Product Rating
A dramatic positive turnaround in core product reputation and user perception.
3.7 stars
reviews in 2023 Before redesign
4.4 stars
after redesign
New Revenue Stream
Successfully boosted the bottom line by adding a new, strong revenue stream from the Patchstack integration partnership
Slight Reduction in Support Tickets
Verified a reduction in tickets related to initial Security onboarding friction and feature enablement issues.
Feature Confusion
users reported less confusion related to Solid security setup.
Lessons Learned
Ensure Designer Capacity Early
We could have avoided a few headaches and pivots if we ensured that the designer working on the website design had the capacity to work on the project for its full duration.
Establish the Design System Prior to Kickoff
Although we didn't create the design system late in the project, we could have had more time to establish use standards and ensure greater universality across components.
Lots of Moving Pieces Means Wearing Many Hats
I learned valuable lessons about when to push back on stakeholders, when to dive deeper into a brief that isn't fleshed out to my standards, and how to navigate a company with a startup approach but lots of red tape in decision-making.
