Design Maturity | knowledge share | growth initiatives | grammarly for developers | gen AI
Case Study: Grammarly for Developers — Enabling Seamless Integration
In addition to leading our Grammarly Business design team, I also oversaw our Grammarly for Developers workstream. This team's initial focus was designing the Grammarly Text Editor SDK, allowing developers to incorporate Grammarly directly into their products with just a few lines of code.
The user problem
The Grammarly SDK was introduced to meet the growing demand from developers and companies seeking to enhance their applications with advanced writing assistance. Integrating Grammarly directly into applications via the Text Editor SDK offers several advantages over relying solely on users to install the Grammarly browser extension:
Seamless User Experience: Embedding Grammarly's features within an application ensures that all users benefit from writing assistance without needing to install separate software. This integration provides a consistent and uninterrupted experience, enhancing user satisfaction.
Enhanced Adoption Rates: By eliminating the need for individual installations, developers can ensure that a more significant portion of their user base has access to Grammarly's tools, improving overall communication quality within the application.
Tailored Functionality: Developers can customize Grammarly's features to align with their application's specific context and user needs, offering a more cohesive and relevant writing assistance experience.
Improved Performance and Compatibility: Direct integration reduces potential conflicts with other browser extensions and ensures optimal performance within the application's environment.
We adopted a comprehensive approach that optimized processes while maintaining a strong focus on user-centered design, specifically tailored to developers as the primary audience.
Designing for a development ecosystem
As Grammarly for Developers team designers, we adopted a comprehensive approach to empower developers by designing key surfaces tailored to their needs. Our design efforts focused on creating a Grammarly Plugin that allows developers to integrate the Grammarly interface into third-party environments seamlessly. We developed an intuitive App Console for managing plugin installations and crafted comprehensive documentation and guidance to support developers throughout the integration process. These initiatives ensured developers a smooth and efficient experience, empowering them to maximize the potential of Grammarly’s tools within their workflows.
Grammarly Plugin: Unlike the standard Grammarly interface, the plugin prioritizes customization to enable seamless integration and optimize usability for diverse integration use cases. Developers can tailor the plugin to fit the application's specific workflows, ensuring a smooth experience.
App Console: The console was a hub for managiGrammarly'sy’s writing assistance tools. It offered application management, API access, and usage analytics features, enabling developers to integrate efficiently and monitGrammarly'sy’s Text Editor SDK within their applications.
Documentation and Guides: We crafted an intuitive interface for accessing detailed resources, including integration guides, references, and best practices, ensuring developers could easily navigate the integration process and maximize the value of Grammarly’s tools.
While community functionality is essential to developer support, we relied on third-party apps during the initial phases to allow our small team to focus on zero-to-one delivery.
Designing for developers
Designing for developers presents a unique challenge, requiring a deep understanding of this group as a distinct persona with specific needs. We approached this challenge at Grammarly by embracing the developer community and recognizing their different traits. Through research and iteration, we identified key approaches to address their needs:
Power Users: Developers are power users who demand high efficiency and control in their tools.
Efficiency: Prioritizing tools that streamline tasks and reduce friction in complex workflows.
Workflows: Designing for seamless integration with developers' existing workflows.
Control & Customizability: Providing flexibility through deep customization options to suit varied development environments.
Transparency & Debugging: Ensuring that developers receive detailed feedback and debugging capabilities.
Security: Leveraging the validated security measures already in place with our Grammarly Business platform to meet developer security needs.
Designing for developers required an elevated focus on User-Centered Design (UCD) principles, ensuring every decision aligned with their unique needs. Drawing from my years of teaching UCD, I found it deeply rewarding to apply these methodologies in a real-world developer context. The result was a highly productive and adaptable experience, meticulously tailored to developers’ technical requirements and work habits, enabling them to work more efficiently and effectively.
The Grammarly Plugin
The Grammarly UI within third-party applications is tailored to provide a lightweight, nonintrusive experience. It offers just the essentials to enhance writing without disrupting the primary functionality of the host app.
Allowing for Customization
The Grammarly SDK provides versatile customization options, enabling developers to tailor the integration to their unique requirements. These include adjusting the intensity of grammar suggestions, enabling or disabling specific writing features, and customizing the user interface to match the application's design. This flexibility ensures that Grammarly’s writing assistance tools seamlessly integrate into diverse workflows and enhance user experiences.
Theming
The Grammarly SDK offers customization options to help developers match the interface to their app's design. Developers can adjust the font to align with their brand’s typography, customize button and link colors to fit their color scheme and modify border-radius settings for rounded or square corners. These options ensure Grammarly’s interface blends seamlessly with the app’s overall style. Below are three examples of styled suggestion cards with the default design on the left.
Spacing
Grammarly occupies less space, often appearing in a side panel or as an overlay on text. Users interact with Grammarly in a way that doesn’t interfere with the third-party application’s main interface, so only key suggestions and corrections appear.
Subdued visuals
Visual cues, such as underlines and icons for corrections, are subtle to avoid clashing with the third-party app’s design. Interaction with suggestions is minimal, usually limited to quick fixes, with detailed explanations in a pop-up format.
Grammarly button position
By default, the Grammarly button is positioned at the bottom-right corner of the viewport. If this default placement works but you’d like a slight adjustment, you can easily customize its position using Grammarly’s predefined CSS variables. For developers requiring full control, the plugin offers complete flexibility, allowing the Grammarly button to be placed anywhere on the page to align with your app’s design preferences.
Light and dark modes
The Grammarly plugin supports light and dark modes, offering flexibility to match user preferences and app themes. In light mode, the background is white with a black Grammarly button, while in dark mode, the background shifts to dark gray with a white Grammarly button.
App Console
When designing the Grammarly for Developers App Console, we focused on delivering an intuitive and efficient experience for managing integrations and plugins.
Key aspects of our approach included:
Simplicity and Clarity: A clean, minimalist interface with well-organized sections and intuitive workflows for effortless navigation.
Seamless Integration: Built to integrate smoothly into developers' existing tools and workflows, ensuring compatibility and ease of use.
Efficient Plugin Management: Simplified processes for installation, configuration, and updates, supported by clear guides and real-time status updates.
Customizable Settings: Flexible options for tailoring grammar suggestions and feature access to meet specific development needs.
Comprehensive Documentation: Embedded access to code snippets, API references, troubleshooting resources, and FAQs for instant guidance.
Transparency and Feedback: Real-time performance indicators and status updates to facilitate troubleshooting and monitor the impact of integration.
This approach ensured the App Console was functional, user-friendly, and adaptable, empowering developers to seamlessly integrate and manage Grammarly’s tools within their applications.
Documentation and Guides
Our approach to designing the Grammarly for Developers documentation prioritized clarity, accessibility, and practicality, ensuring developers had all the resources they needed for seamless integration.
Key principles included:
Clarity and Simplicity: Concise, jargon-free guides made the content accessible to developers of all experience levels.
Structured Organization: Clear sections—such as installation, setup, API references, and troubleshooting—combine with a searchable table of contents for effortless navigation.
Practical Code Examples: Real-world code snippets helped developers quickly implement solutions.
Regular Updates: Frequent updates and versioning ensured access to the latest features and changes.
Contextual Troubleshooting: Common issues and error messages were paired with actionable solutions for quick problem resolution.
Interactive Features: API explorers and live code examples added an engaging, hands-on learning experience.
Guides for All Skill Levels: Tutorials and in-depth technical documentation catered to beginners and advanced users.
By adhering to these principles, we created user-friendly, comprehensive documentation that developers could rely on throughout their integration journey.
Outcomes
Grammarly for Developers was a highly successful initiative that enabled hundreds of companies to integrate Grammarly's powerful writing assistance tools into their applications. By offering a comprehensive SDK and API, Grammarly made it easier for developers to enhance user communication with real-time grammar checking, style suggestions, and language improvement features. The initiative gained significant traction by offering businesses a more polished, professional writing experience within their platforms, improving productivity and user engagement. With tools for individual developers and enterprise solutions, Grammarly for Developers became a go-to resource for enhancing digital communication in various applications, from content creation to customer service. Some of the companies that incorporated the SDK into their offerings included:
Hootsuite: Integrated into the social media platform to enhance post quality.
GoFundMe: Helped users create polished fundraising page descriptions and updates.
Upwork: Assisted freelancers in creating professional job proposals and project descriptions.
G2: Ensured clear and professional product reviews on their platform.
Mailbird: Integrated into the email client to provide grammar and style suggestions while composing messages
Challenges
While this was one of the most efficient, collaborative, and productive cross-functional teams I’ve ever participated in, every project has its challenges. Some key obstacles we encountered included:
Resourcing: When I joined Grammarly, the Grammarly for Developers team had just one dedicated product designer. Over time, we expanded the team by hiring a product design lead and securing support from research and content design teams. Despite its small size, the team’s accomplishments were truly remarkable.
Process Optimization: The team operated without dedicated design support, so shifting the engineering team toward a more user-centered approach required time and effort. We successfully implemented a user-centered process by demonstrating the value of design, understanding the team’s perspective, proactively proposing solutions, securing buy-in, and practicing patient persistence. Key improvements included structured kick-off meetings, precise requirements documentation, a flexible design discovery phase, iterative design informed by user feedback, and a rigorous design quality assurance process.
These efforts transformed the team's work, enabling us to deliver high-quality solutions aligned with user needs and business goals.
Conclusion
Despite significant adoption, positive outcomes, and excitement within the developer community, Grammarly discontinued the Text Editor SDK in January 2024. With GenAI's rising prominence, the company strategically enhanced its core product with AI-driven solutions. While the decision disappointed the team, it was a logical response to the competitive landscape.
The cross-functional team built strong collaboration and a deep understanding of third-party integrations and quickly aligned with Grammarly’s new strategy. Leveraging their expertise, the team delivered Grammarly’s App Actions feature—a seamless integration of third-party applications directly into Grammarly’s interface. This feature streamlines workflows by enabling users to perform tasks such as:
Creating or managing tasks in tools like Asana, Jira, monday.com, Wrike, and Smartsheet.
Accessing and sharing files from cloud storage platforms like Google Drive, Microsoft OneDrive, and SharePoint.
Scheduling meetings or sharing availability via Calendly.
Inserting images or GIFs from Unsplash and Giphy to enhance content.
The App Actions feature has significantly enhanced Grammarly’s value proposition, demonstrating the team’s ability to adapt and innovate. The impact of Grammarly for Developers continues to resonate, and we remain optimistic about its potential for future revival.