UI/UX Design

UX Analysis of Grammarly

14 Feb 2018

8 mins read


Grammarly is an awesome application which makes it really easy to help you sound professional and grammatically correct when it comes to writing emails, term papers and articles. Grammarly product has 2 major offerings:

1) Browser Extension (Chrome, Safari, Firefox, and Edge)  – this is very useful as the extension works no matter which application you are working on in the browser.

2) Grammarly Editor is a web app or it can also be downloaded as an application on your desktop.

In this article, we will talk about what we can learn from Grammarly’s seamless user experience and what can be improved to gain more user base through few changes from UX standpoint.

Grammarly Website


For the browser extension, the user can start using Grammarly without even signing up which is awesome. This way the user can use the product without any friction of giving out any personal information or hassles of signing-up reminds us of the guest check for many e-commerce stores these days. Guest Checkout feature has definitely helped e-commerce stores drive more sales, similar might the case with Grammarly as it might be helping them grow their user base very quickly.

Once you get comfortable using Grammarly and it has built the trust with you, it does hold back key features and makes it available only once you are ready to sign up for free with them.

Grammarly Browser Extension Before Signing In

Once you sign up then you will have key features such as enable/disable on preferred websites and show definitions/synonyms. When logged in, the user can check the synonym of a specific word by double-clicking on it on the browser, then a small pop-up will appear over the word. These features are simple toggle off – on, so in case it bothers you then you can switch those features off.

Another unique aspect of the chrome extension is when you click on it – it doesn’t just say go buy the premium plan instead it lists the number of critical mistakes you have made since you started using Grammarly. This is definitely is a great way of showing what you have been missing out by not buying the premium plan and leveraging data effectively. 

The best part of Grammarly extension continues to remain is its ability to check grammar and spelling especially when you are writing an email or writing a post on the social network. The browser extension so far does not work in Google Docs which is kinda bummer.

Grammarly Browser Extension Before Signing In
Spell Check through Grammarly Browser Extension



For Grammarly Editor, there is not much onboarding. There is just one simple screen asking for login credentials. It has clear indication to login through social media or email. The CTAs are clearly visible.

Onboarding: Grammarly Log In

What they are missing

Frankly, I didn’t identify any usability problems with onboarding. Everything works as expected. Although, I feel that there should be onboarding slideshow to explain to the first time users what they will get in the app.


It has a good look and feel. It is easy to use on different apps. The desktop and web app looks pretty much the same. The menu options are on the left side and the list of documents along with the search bar is on the right.

Grammarly team has listed the documents in the “card style” with a little preview of the document as well as the number of errors written on it (written in a big red font). When the user hovers over the card, trash and export icon appears.

Overall, the design is simple with high contrast between the menu and the list of documents with red as their accent color.

What they are missing

  • The documents should have tags (maybe just 1 tag) for easy search of documents. Especially, if you have more than 30 documents.
  • There should be sorting options on the home screen so that the user can sort by date or tags.
  • When the user clicks on premium option in the menu in the web app, the user is directed to the payment options screen. There is no clear indication of how the user can go back. The logo which usually acts as the home button does not do anything here and there is also no back button. It just makes the user feel more intimidated to buy the Grammarly plan. It could be part of their strategy to discourage the user to go back 🙂 
Grammarly Homescreen


The core functionality is that the user could use the Grammarly Editor by creating a new document or by importing a docx, Openoffice, TXT or an RTF file.

When the user goes into editing documents, it is simple. The fonts are big enough to read with a clean and white background. The side menu is collapsed when the user hovers over the menu options, it shows up more options for each menu options.

The critical issues are underlined in red which is easy to see and clearly marks where the error is. Grammarly’s correct suggestions are shown on the right side of the editor. There are no delete and export icons on the editor screen.

What they are missing

  • The ability to format text (such as bold, italic, adding heading). I know, I know that Grammarly’s main focus is to check grammar but when you copy text or import the document, it losses all the formatting. Which kinda sucks when the users have to format it again.
  • There should be a dictionary available when the user selects the word.
  • The advanced issues should at least be highlighted even in the free version so that the users could prioritize to fix those issues.
Grammarly Editor

Grammarly Pricing Plan


Grammarly delivers a compact but effective user experience. It is optimized to do just one thing- that is to check the grammar and the spellings. Most of the features (I would say 99% of the total features) are premium with pricing starting from $29/month. It is too expensive for students, new writers, startups.

They should have a trial version or reduce the number of premium features and make few of them free. Or simply have 2-3 pricing plans to gain more users.

Idea Theorem is Toronto based digital agency which creates simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you are interested to get your product UX assessed.

Let’s have a chat!