project overview
project type
year
my role
client
What I owned?
Brew Can Co. needed to stand out in a crowded coffee market filled with colorful, busy designs. I created a bold black-and-white identity that feels more like a premium art piece than a grocery store product, with a simple hand-drawn coffee cup that adds personality without clutter.
What principles did I lean on?
Brew Can Co. needed to stand out in a crowded coffee market filled with colorful, busy designs. I created a bold black-and-white identity that feels more like a premium art piece than a grocery store product, with a simple hand-drawn coffee cup that adds personality without clutter.
How did I work with developers and stakeholders?
Brew Can Co. needed to stand out in a crowded coffee market filled with colorful, busy designs. I created a bold black-and-white identity that feels more like a premium art piece than a grocery store product, with a simple hand-drawn coffee cup that adds personality without clutter.
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
tools I used
the problem:
the goal:
Branding: Strategy and Execution
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.
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.
Design Iterations and Trade-Offs
We immediately started refining original branding concepts, iterating three times during bi-weekly meetings with the company GM, who led the redesign.
1
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.
2
Refinement:
I rapidly created a few versions of each page, often in mid-fidelity, within a week or sometimes within a few days.
3
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.
Forward thinking
Modern
Robust graphics
Engaging interactions
Sales Focus:
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.
Authority:
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).
First two weeks:
next one and a half months:
High-Fidelity Collaboration
Final 1.5 Months (Stage 1)
Upon 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 finish the remaining website redesign entirely on my own. Despite the tall order, 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, consisting of both new marketing initiatives and the redesign of existing iThemes resource pages, all requiring adherence to the new aesthetic:
Addressing a New Critical Development Constraint
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.
Animated Hero Section
Rapid Iteration and Design Execution
My process for delivering the remaining screens was rapid, high-velocity, and consistent:
Stakeholder Alignment: 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.
Screens Fully Designed and Owned by Me
The Blog and all its associated pages (article template for the migration):
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 additional sections needed for the product pages:
The Contact Page
The Support Page:
Our Affiliates Page
Development Handoff and Critical Pivot
Forced Pivot and Scope Adjustment
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.
Product Redesign and Feature Launch
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.
Kickoff and Strategic Scope
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.
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.
Deep User Research: Validating Product Flaws
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.
Targeted User Interviews (iThemes Security Users)
To thoroughly analyze the essential Security Onboarding experience, I secured stakeholder approval to conduct targeted user interviews.
1) Source via email list
2) Qualify via Google Form
3) Segment users (Power, Mid-tier, Casual)
4) 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.
Findings:
Low Confidence: 5 users rated their security confidence at 5/10 or below immediately post-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 4 power users cited the lack of a firewall as a key product failure. Two power users specifically requested more granular understanding of vulnerable software.
Data Synthesis:
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.
Decision Framework and Product Roadmap
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.
Ideation and Design: Existing Feature Improvements
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.
Settings Navigation Simplified:
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
Improved Dashboard Aesthetics and Info Presentation
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
Refined the IA of existing cards (Lockouts/Bans, Updates Summary) by separating data and adding more white space to enhance scannability. User-specific details in the "User Security Profile" were hidden behind a click to disperse information.
Before
After
New Card: Security Summary
Security Summary: Proposed this card to highlight important information and suggest improvements tailored to the user's specific security needs. It also showcased the latest blog security info, a proven driver for conversions. Importantly, it displayed to both free and paid users, with certain details (like vulnerabilities) behind a paywall—a key marketing decision.
New Card: Vulnerabilities Card
Vulnerabilities Card: Added a summary card highlighting the most urgent vulnerabilities, providing the most actionable and relevant information for users.
Onboarding Improvements and Feature Review
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.
SolidWP Branding
The Support Page:
User Group Rework
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
Confidence & Conversion
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 Endscreen
Rejected Feature:
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.
Ideation and Design: New Feature Creation
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.
Vulnerabilities (Patchstack Integration)
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.
Site Scanner
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.
User Security Management
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.
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
Patchstack integration
before redesign
Support tickets
Verified a reduction in tickets related to initial Security onboarding friction and feature enablement issues.
Drastic reduction
Reduction in Onboarding Related Support Tickets (Solid Security).
User sentiment
feature confusion
users reported less confusion related to Solid security setup.
