Rethinking Grammarly: A tale of Grammarly’s UI redesign

In this article, I’ll be unfolding the narrative of my recent exploration with Grammarly’s user interface.

So, what can you expect from this read 🤔?

• The Spark of the design
• Existing v/s New UI
• The Impact of Redesign

Join me on this creative journey as I unveil the thoughts, decisions, and processes that shaped the vision for a new Grammarly UI 🚀.

💥 The Spark of Redesign

While immersed in the daily grind of document correction using Grammarly, it struck me that there was room for improvement, a more intuitive, visually appealing experience could elevate the writing process. Thus began my endeavour to redesign Grammarly’s website UI.

📌 Existing v/s New UI

📌 UX behind UI

Throughout the process, the focus was not just on a visually appealing interface but also on enhancing the overall user experience (UX).

Here are the key aspects of the UX behind the redesigned UI.

.

1. distinctive Icons: Redesigning buttons and including icons enhances visual recognition, making it easier for users to identify and use specific features.
2. Color Weight for Important Elements: Changing the logo to a brighter color adds emphasis and draws attention to Grammarly’s iconic branding.
3. Streamlined the search functionality.
4. Sidebar Redesign: Rearranging elements in the sidebar creates a logical and organized structure and ease of navigation.
5. Consistent Layout: Adopting a three-column layout for Trash, Apps, Premium creates consistency.
6. Personalized User Section: Introducing a personalized user section with an avatar, name, and email encourages users to engage more with their accounts.
7. Support as CTA(Call-to-Action): The Support feature within the writing area creating a more seamless experience for users seeking assistance.

8. Redesigning Correct with Assistant feature: It enhances visual recognition, making it easier for users to identify and use specific features.

9. Account Type Badge: By relocating the account type badge along with user-specific information ensures that all user-related information is consolidated in one place.

10. Undo and Redo: Moving undo and redo functionalities to the writing area acknowledges their significance in document editing, providing users with more direct control.

11. Generate with AI: By bringing this key functionality to the user’s primary workspace, Users can now seamlessly engage with AI-generated content without interrupting their writing flow.

12. Plagiarism Checker, and Expert Writing Help: This features within the writing area ensures that users have quick access to these critical functionalities.

📌 The Impact of Redesign

• Brightening the logo enhances brand visibility and provides a fresh, modern look.
• The side-by-side layout ensures faster access to writing features by eliminating extra clicks.
• Relocating features into an organized and visually appealing layout aims to simplify navigation.
• Placing essential features in the writing area strategically centralizes tools and streamlining the writing process.

This was a journey of reimagining the existing UI and diving deep into the world of design thinking, where every element plays a role in enhancing the user experience.

Happy designing ✨