Creating A Unique Visual Identity

Outcome: Boosted brand perception and user sentiment; enabled designers to produce consistent icons 3x faster

Grammarly is an AI writing assistant that supports people with brilliant writing anytime anywhere. As Grammarly scaled to support different verticals, the product’s iconography lacked consistency and failed to meet accessibility requirements. Furthermore, the style did not support the new brand perception Grammarly aspires to be: an empowering fierce supporter.  
           
I led an initiative to audit more than 200+ icons across 14 interfaces (Browser Extension, Mac & Windows App, iOS and Android devices, Web and Microsoft Docs/Google Docs) with the goal of identifying the scope and proposing a unique icon system that can help Grammarly stand out in the crowded space of generative AI.

Team

Services

DESIGN SYSTEMS
FACILITATION
VISUAL DESIGN

Date

2022

ROLE

LEAD DESIGNER

Audience & Problem

As Grammarly expanded into new platforms and verticals, its visual identity struggled to keep pace—lacking visual consistency, falling short of accessibility standards and no longer reflecting the company’s evolving brand as an empowering fierce supporter.  

Problem

  • Reduce cognitive overload
  • Reduce fragmented experience
  • Reduce visual sprawl and design/technical debt

Goals

  • Create a unified experience that deepens user trust across multiple touchpoints
  • Ensure equitable experiences for all users, including those relying on assistive technologies
  • Metrics to keep an eye on: Time and effort saved by having a scalable system in place, WCAG compliance, brand perception

Approach

Strategy & Kickoff

I rallied support from brand, design systems, and accessibility partners to get this initiative on the roadmap. In the early stages, I built a collaborative audit process that brought over 200 icons across 14 interfaces into focus. After identifying key challenges, I went on a roadshow to share insights, gather feedback and align teams around a clear path—prioritizing the core iconography and illustrations that matter most to our users.

Explorations

While exploring design directions across multiple interfaces, I focused on striking the right balance of boldness, empowerment and confidence—core brand attributes that differentiate Grammarly in a competitive AI landscape and signal trust, intelligence and clarity to users at every touchpoint.

New Library

For the first MVP of the new visual system, we launched the updated iconography library in our generative AI products—helping set a bold, unified visual tone for future innovation. I also created documentation in our design system to empower other designers with clear guidance, ensuring consistency and scalability as the product ecosystem grows

Results

Impact

  • Boosted brand perception and user sentiment — 15% more users found Grammarly more “intuitive” and “trustworthy”
  • Improved WCAG compliance by 100%
  • Enabled designers to produce consistent icons 3x faster by leveraging standardized templates
  • For the MVP, we strategically focused the new iconography system on Grammarly’s generative AI products, aligning with engineering capacity during a challenging period impacted by the war in Ukraine. Next we want to expand to Mobile—where there are opportunities to elevate consistency and user experience at scale.

Learnings

Design

  • Became an expert in crafting and maintaining product visual identity systems by learning from the awesome Bonnie Kate Wolf
  • Ensured icons had descriptive text for screen readers to provide better context and functionality
  • Scaled consistency by building templates for the android, browser extension and iOS native app so designers can easily create consistent icons with confidence

Leadership

  • Galvanized XFN support by turning initial enthusiasm into shared ownership; inspired partners to voluntarily invest time and resources into bringing the project to life, even before it was formally prioritized on the roadmap
  • Established a recurring Friday session to upskill product designers on creating icons from scratch using our new templates—scaling design standards, fostering cross-team alignment and building long-term consistency across the product
  • Brought product designers from across all product areas into the synthesis process, creating a cross-functional feedback loop that accelerated the identification of semantic issues and ensured the icon system aligned with real user needs and use cases across the product ecosystem

Next Steps