Grammarly Redesign
A redesign of Grammarly’s website to include features that improve language inequalities.
Made with
About the Project
Class Project at Georgia Institute of Technology
This project was for a course called Educational Technology where we learned about various learning science principles and UI design principles.
We were challenged to redesign an app to address a topic on learning in educational technology. This redesign needed to have five new features that improved the app or websites ability to address the issue of language inequalities.
My Role
I worked as in a team of five as a researcher and designer. Each team member was in charge of designing, developing, and testing their own features and helping one another create a cohesive design.
Impact
With this redesign, we wanted to make Grammarly a tool where language learners can feel comfortable and supported when writing in a language that is not their own.
The Problem Space
Target User Group
Young adults who are trying to learn a second language
Significance of Addressing the Problem
Students who move to a new country are forced to learn a new language with minimal resources. This can lead to students falling behind academically as they try to learn in a new language.
Language learners are often removed from their fluent peers so they don’t get the opportunity to learn through interaction.
Grammarly only offers services in English, so it isn’t a resource for other language learners.
The Process
1
Initial Contextual Inquiry
Iterative Design Process
2
3
Usability Testing
Prototype Iteration
4
Contextual Inquiry
Contextual Inquiry and Affinity Mapping
Researcher, Note Taker, and Analyst
We wanted to observe how users interact with Grammarly and another app called Beelinguapp to see what users want out of a language learning app (Beelinguapp) and how we can improve Grammarly to accommodate those wants.
We analyzed the data by conducting an affinity map of the users responses to the apps. We were able to find a few things from this analysis.
Research Goal
Users thought that ChatGPT was more useful than Grammarly
Grammarly was good for checking errors, but did not help with generating new content
Users wanted to see Grammarly be more culturally sensitive and add inclusive wording
Users who were students frequently use Grammarly for assignments
Findings
Iterative Design
Design Ideas
Design Implications
We moved into the design stage with these user needs at the forefront:
We need to ensure that we don’t remove learners' ability to learn languages from peers
We need to provide context for users as it is important in learning what words to use and when
Integrate cultural competence training within the app to help EL students understand and navigate the cultural nuances present in academic and everyday English.
Sketched Concepts
Each team member came up with a feature that they would address the problem and contribute to the app as a whole. The features are as follows:
Writing Templates: This feature provides templates for standard writing tasks such as a recommendation letters, initiations, and more. It shows text in a language students want to learn along with a language they are already comfortable with in the hopes of facilitating seamless learning.
Speech Accent: This feature offers sentences in different accents and dialects to provide users with more immersive language learning experiences. It exposes them to various accents to help them develop sharper listening skills and enhanced adaptability.
Cultural Settings: This feature allows for users to provide needed context of the goal, style, and audience of their written messages. Having this ability allows users to better understand differences in dialects and also enables them to gain a greater understanding of cultural norms in various regions.
Daily Challenges: This feature introduces a daily collaboration game with a native speaker to encourage users to learn with someone who is fluent in the language.
The fifth feature is the one I worked on called AI Translations.
AI Translations
The AI translation feature focuses on helping language learners translate words they don't know and provide them with background and contextual insights about the word and its uses.
This would help build a vocabulary of the language being learned with added context and without completely removing the users first language.
Kind of like learning language with a native speaker (the AI).
Feature Justification
This feature address two Learning Science Principles:
The Sociocultural Theory - learning doesn't happen alone, but rather in groups where social interaction and cultural tools are the primary drivers of intellectual development
The feature seeks to be a peer for students who don’t have access to native speakers and want to develop their language learning skills. This feature gives them the cultural tools needed to better understand how to utilize the language in various situations.
Cultural Learning - focuses on implementing culture into teaching to ensure that it is easier and more memorable for learners to understand
The feature aims to help students develop a better understanding of how culture plays a part in the language they are learning and how it compares to their own.
Prototype Iteration
Low Fidelity Prototypes
I began the design process by creating a persona and interface storyboard to better understand the user group and to fully understand how I expected my feature to work.
Persona
Interface Storyboard
Prototypes Version 0
Low Fidelity Prototype
Mid Fidelity Prototype
Feedback
After conducting user tests, I found that:
Users thought that the feature was helpful for language learners.
One user wanted to see more insights of a word such as synonyms, antonyms, examples of use, etc.
One user mentioned that it was overwhelming to have so many suggestions on one page.
Another user mentioned that the AI would have to be context aware for some languages.
I decided to move forward with detailed insights, and improving the layout
Prototype Iteration
Prototype Iterations
Prototype Version 1
Updates
I added more information about words and phrases
Translation: When a user types in their language, the AI provides them with a translation of the word to their chosen language.
Insights: When a user highlights a word or phrase, the AI provides them with cultural insights about that word or phrase.
I removed the long list of insights and made them scrollable
Version 1
Feedback
After conducting user tests, I found that:
Users thought that it was hard to move forward when then didn’t want to use a suggestion
Users were unsure how to use the feature
Prototype Version 2
Updates
I added a tutorial at the beginning of the document explaining all new features
I improved functionality for when users did not like a suggestion
I added a library where users can save translations and insights for future use
Version 2 Tutorial
Version 2 Library
Feedback
After conducting user tests, I found that:
User thought that the feature was very useful and informative
User wanted to see changes to the suggestions based on their chosen language level
Prototype Iteration
Final Prototype
Prototype Version 3
Updates
I separated the tutorial from the other features and made it triggered only when activating the feature itself
I added a skip button to the tutorial so that users didn’t have to go through it each time they activated the feature
I made small changes to functionality and style
I updated the flow so that when a user doesn’t like a suggested translation, they will be asked if they want to lower the learning level. If they say yes, it will lower the level of translation and insights given to them
Version 3
