QuillBot: UI Refresh
In user feedback channels, occasional UI comments such as 'old and outdated' surfaced. Similar feedback came from new employees through our 'Fresh Eyes' initiative as they reviewed the site. I couldn't ignore the outdated visual design and inconsistent branding issues any longer. After gathering a small team, I spearheaded a 'UI Refresh' skunk works project to modernize QuillBot.com. The goal was to build a cohesive, modern brand experience that resonates with customers while retaining 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
The challenges included a lack of visual design standards, with product designers not adhering to brand guidelines. Additionally, the visual design expertise was concentrated among a few designers already operating at full capacity. Rapid growth had also led to numerous design inconsistencies across the product, exacerbating the need for a cohesive visual language. The UI designer that was available lacked the technical skills required to drive results.
Solution
Going Skunk
To address the challenges, I decided to take a proactive approach and set up a "skunk works" team to focus specifically on revitalizing the visual identity. This small, dedicated team worked in an environment protected from the daily distractions of ongoing product development. The skunk works allowed us to focus our efforts on creating a cohesive and modern visual language to 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 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 out of her. As this work would become a critical contributor to the design system.
Our talented UI designer struggled to grasp Figma's auto-layout and mapping colors. Expected delivery dates was weekly, but soon stretched to weeks. She was coached by the Principle Design Lead who owns the design system. He went above and beyond teaching her design system and Figma fundamentals. I hired a Upwork freelancer skilled in UI and design systems, who accelerated the project. Unfortunately, we had to part ways with the UI designer because of the strained velocity, despite our best efforts to upskill her.
Markup color blindness study
Markup is a term we use to show output text changes made by the AI. The text changes are coded by color. The paraphraser markup colors are the standard for all primitives to follow. The markup ended up being compromised on other products by new designers. To standardize markup colors and make them color blind accessible I ran an unmoderated study on UserTesting.com with color blindness participants. The key finding, use a soft yellow highlight that's not distracting. After the results, we tweaked the other markup colors with the Color Blind plug-in. The new markup colors became the standard all teams follow.
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 initiative yielded resounding success, with the new brand aesthetics being enthusiastically adopted by both the design and marketing teams even before its formal release. Notably, the redesigned visuals did not adversely impact conversion rates or user retention, a testament to the careful consideration given to preserving the core user experience. The project accomplished its goal of elevating the visual design bar, resulting in a more polished and modern brand presentation. Furthermore, the influence of this initiative extended beyond the primary product, as it inspired and informed the marketing team's redesign efforts for new product landing pages. Collectively, these outcomes demonstrate the power of strategic design thinking to revitalize a brand's identity while ensuring business continuity and paving the way for a cohesive, future-proof visual language across all customer touchpoints.
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.