top of page

QuillBot UI Refresh: Modernizing Without Disrupting Performance

Executive Summary

When user feedback and internal "Fresh Eyes" reviews confirmed QuillBot's UI had become outdated, I spearheaded a complete visual redesign that modernized the brand while maintaining zero impact on SEO, conversion, and retention metrics. By forming a dedicated "skunk works" team and securing CEO approval to operate independently, I transformed what could have been a risky rebrand into a strategic success that elevated QuillBot's visual standards and influenced future marketing initiatives.

​

I navigated significant organizational challenges—inconsistent design standards, an overextended team, and technical implementation struggles—by establishing mentorship partnerships, bringing in specialized talent when needed, and creating structured workflows between design and engineering. The results speak for themselves: marketing adopted the new design system before the official rollout, the refresh had zero negative business impact, and we established a scalable design foundation that continues to influence the visual design across the site and new product features.

​

Through strategic stakeholder management, accessibility validation, and user testing, this project demonstrated how thoughtful design leadership can revitalize a brand while strengthening business fundamentals. More than a visual refresh, I created a replicable framework for major design initiatives that balances innovation with operational stability.

Challenge

User feedback consistently described QuillBot as "old and outdated," while our internal "Fresh Eyes" program—where new employees provide first impressions—confirmed these concerns. The inconsistent branding and dated visual design could no longer support our growth ambitions. I needed to modernize QuillBot.com while preserving our strong SEO performance and conversion metrics, which are one of the core drivers, alongside virality, that drive conversions. 

Key Responsibilities

  • Led the complete initiative from concept through implementation

  • Co-managed the project with engineering leadership

  • Oversaw 1 manager and 1 IC while building team capabilities

  • Met monthly with founders for feedback and product stakeholders

  • Drove design system integration and standardization efforts

Goals​​

  • Update and standardize visual design and branding across QuillBot.com

  • Maintain SEO dominance with zero impact on conversion and retention metrics

  • Tokenize colors and contribute scalable components to StyleQ, our design system

Impact

  • Zero negative impact on SEO, conversion, or retention metrics

  • The marketing team adopted new styling before the official refresh was rolled out

  • Scaled the design system with revamped components that designers loved using

  • New text markup colors set the accessibility standard for background highlights

My Approach​

Building the "Skunk Works" Team

I secured CEO approval to establish an isolated "skunk works" team, protecting the project from daily product development distractions. This dedicated environment allowed us to focus exclusively on crafting a cohesive visual language without competing priorities derailing progress.

Before
QuillBot old site.png
After

Strategic Project Management

To maintain stakeholder alignment, I implemented a structured approach:

  • Weekly team reviews for immediate course corrections

  • Monthly milestone meetings with founders for strategic oversight

  • Comprehensive timeline with clear deliverables and dependencies

  • Transparent progress updates that enabled data-driven decision-making

Uniting design and engineering

I created workflows to ensure seamless implementation:

  • Developed component task lists for the UI designer to organize weekly deliverables

  • Established regular alignment sessions between designers and front-end engineers

  • Built working relationships between team members who previously worked in silos

  • Integrated design system contributions into daily workflows

 

When our UI designer struggled with technical implementation despite coaching from our Principal Design Systems Lead, I made the strategic decision to bring in a specialized freelancer to maintain momentum while preserving team morale.

Component task list.png

Validation Through Research

I conducted two critical studies to ensure accessibility success:

 

Markup Color Blindness Study

I led targeted research with color-blind participants via UserTesting.com to establish accessible color standards. This research revealed that soft yellow highlighting provided optimal visibility without distraction, creating standards now followed across all product teams.

 

First Impressions Study

I validated the redesign through user testing before stakeholder presentations. While responses were mixed, the majority confirmed the design felt more modern and appealing to our target 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.”

Before

QuillBot_Origninal markup.png

After

Outcomes​

The visual design refresh was clearly a win—the new look got picked up right away by both design and marketing teams, even before we officially launched it. More importantly, the redesign didn't hurt our conversion rates or user retention at all, which showed we'd struck the right balance between updating things and keeping the core experience intact. Beyond just making the brand look better, the refresh also shifted how the marketing team approached new product landing pages, giving us a more consistent design language that should hold up well over time. The new markup colors became the go-to foundation for designers moving forward. This whole project showed how the right design work can breathe new life into a brand without messing with what's already working.

Reflection

We should have started with a bigger team from day one: 1 principal design system lead, 1 UI designer, 1 design system lead, and 1 front end engineer. Not having that dedicated front end engineer really slowed us down—we kept having to wait for core engineers to get freed up to prioritize our work. Having a proper design system lead would have optimized our output too, since the person we had wasn't technically minded. She also lacked project management skills, which she did pick up eventually, but it definitely held us back early on. Looking back, I should have been way clearer about success metrics upfront and more honest with myself about what the timeline would actually look like given the team we had.

​

Strategic Design Leadership

Design Intrapreneur

Identified and addressed critical brand perception issues, emphasizing the importance of launching products the organization could take pride in while maintaining business fundamentals.

​

Design visionary

Demonstrated the competitive advantage of exceptional UI by setting new standards through hands-on leadership, actively involving executives in evolving our visual direction and long-term design strategy.

​

Strategic Unifier 

Promoted cross-functional collaboration where strategic decisions involving multiple departments prioritized open communication and ensured all stakeholder voices were heard and integrated.

bottom of page