QuillBot UI Refresh: Modernizing Without Disrupting Performance
Executive Summary
As user feedback and our 'Fresh Eyes' program confirmed that QuillBot’s UI had become outdated, I spearheaded a high-impact design refresh to modernize the brand while preserving SEO, conversion, and retention. Forming a dedicated “skunk works” team, by permission from the CEO, I shielded the project from daily distractions, ensuring a focused, strategic redesign. Despite challenges like inconsistent visual standards and an overextended design team, I turned obstacles into opportunities by facilitating mentorship between our UI designer and the Principal Design Lead, ultimately strengthening our design system. When technical struggles persisted, I made the tough but necessary decision to bring in a specialized freelancer to maintain momentum. To keep stakeholders aligned, I established a pragmatic project management approach with weekly team reviews and monthly milestone meetings with founders. I also ensured design-engineering collaboration through structured task lists and workflow alignment. The redesign was validated through a markup color blindness study for accessibility and a first impressions study on UserTesting.com, which confirmed the update is modern and appealing. The project was a clear success—marketing adopted the new design even before the official rollout. More than just a refresh, this transformation established a scalable design system that elevated QuillBot’s brand while setting the foundation for continued visual enhancements.
Starting point
Increasing feedback signaled our UI had fallen behind. Users described it as "old and outdated" in feedback channels, while new employees in our 'Fresh Eyes' program confirmed these concerns. The outdated visual design and inconsistent branding could no longer be ignored. I assembled a small "skunk works" team to modernize QuillBot.com, aiming to build a cohesive, contemporary brand experience while preserving our strong SEO performance.
Responsibilities
-
Lead and drove the initiative
-
Co-managed the project with engineering
-
Oversaw 1 manager and 1 IC
-
Managed upward and across the org to keep key stakeholders aware of progress
Goals​​
-
Update and standardize visual design and branding
-
Maintain SEO dominance and not impact conversion and retention
-
Tokenize colors and contribute components to StyleQ, our design system
Impact
-
No impact to SEO, conversion and retention
-
Marketing employed the new styling before it was released to the design team
-
Elevating the visual design bar, the QuillBot.com is now more polished and modern
-
Influenced the design of new landing pages led by Marketing
Challenges
What appeared as challenges became our launchpad for innovation. The lack of visual standards, combined with our design experts operating at capacity and inconsistencies from rapid growth, presented the perfect opportunity to establish a unified visual system. When our UI designer struggled with technical implementation, I had her partner with the Principal Design Lead that coached her in creating design components and color tokens. This approach not only delivered immediate results but also built sustainable design system capabilities that are still being applied today.
Solution​
Going Skunk
I established a "skunk works" team isolated from daily product development distractions. This sheltered environment allowed us to focus exclusively on crafting a cohesive visual language that would elevate the overall product experience
Before
After
Stakeholder management
To keep the project on track and aligned with stakeholder expectations, we established a pragmatic project management approach. Weekly team reviews and monthly milestone meetings were held with the founders, providing a platform for progress updates, feedback, and course corrections. A comprehensive timeline was developed and shared, outlining key deliverables, dependencies, and target dates throughout the project's lifecycle. This level of transparency and frequent touchpoints ensured that the founders remained invested in the initiative while enabling data-driven decision-making at every stage.
Uniting design and engineering
In order to bring the UI Refresh designs to life, I coordinated the necessary engineering resources to work with the platform design system team. To maintain the project's momentum I created a component task list for the UI designer to organize and prioritize her weekly deliverables. She and front-end engineers would align on the set of components to be delivered. In previous positions, this UI designer rarely interacted with engineers and this task list was my opportunity for her to establish a working relationship with them for her to understand what they needed from her. As this work would become a critical contributor to the design system.
When our UI designer struggled with Figma's technical requirements despite dedicated coaching from our Principal Design Lead, I brought in a specialized freelancer to maintain momentum, ultimately making the difficult but necessary decision to part ways with the original designer to preserve project velocity.
Markup color blindness study
To establish consistent, accessible markup colors across all products, I led a targeted study with color-blind participants via UserTesting.com. Our AI uses color-coded text to show changes (what we call "markup"), but new designers had begun deviating from our standards. Research revealed soft yellow highlighting provided the best visibility without causing distraction. Using these insights and a Figma Color Blind plugin, we refined our complete markup color palette, creating standard now followed by all product teams.
Design validation
Before sharing the designs with leadership and to ensure confidence in the site's improved quality, I conducted a first impressions study on UserTesting.com. Responses were mixed but generally leaned toward being a modern update appealing to our users.
“It was really the same. both pages offer the same amount of information but i just want to say that the better design choice for page B was more inviting and more "human" and that makes for a better connection.”
​
“My intial impression of the new landing page is that it looks very clean and organized. The sidebar looks straight-forward and easy to understand.”
Outcomes​
The visual design refresh was a clear success, with the new aesthetics quickly embraced by both the design and marketing teams—even before the official rollout. More importantly, the redesign had no negative impact on conversion rates or user retention, reinforcing the careful balance between modernization and core user experience. Beyond elevating the brand’s visual appeal, the refresh also influenced the marketing team’s approach to new product landing pages, creating a more cohesive and future-proof design language across all customer touchpoints. This project proved how strategic design can revitalize a brand while maintaining business stability.
Strategic Design Leadership
Design Intrapreneur
Identified and addressed a critical pain point in the outdated writing platform, emphasizing the importance of launching products that the organization can take pride in.
​
Design visionary
Demonstrated the differentiating power of great UI by setting a new standard through leading by example, actively involving founders and executives in evolving the interface to drive a fresh visual direction and vision.
​
Strategic Unifier
Promoted a cross-functional collaborative culture where strategic decisions involving multiple departments were made with an emphasis on open communication and ensuring everyone's voice was heard.