Rewrite

March 14, 2021

I passed the IELTS exam in 2020. This is a test that validates your level of the English language proficiency. It consists of four parts: reading, writing, speaking, and listening. Most people see the writing part as the hardest.

And in 2021 I thought about a tool that would help people improve their writing skills for the IELTS exam by highlighting typical mistakes and providing tips on how to avoid them.

Editor view

Problem Description

I was in a few Telegram groups consisted of people preparing for the exam.

One such group was solely focused on preparing for the writing part. They used a giant Google Docs file where they put their essays. Despite good intentions, people did not have enough incentives to read other people’s works and most of the essays were left unchecked. Another issue with this approach was that people were students themselves and they found only basic mistakes.

Another problem was usage of too many different tools. A typical student would need to write his essay in a text editor. Then to set a timer. After the essay is written, the students usually go through a self-checklist to pick the most frequent errors. Then, they check if it is enough words. After that, they go to something like Grammarly and check grammar. The problem with common grammar checkers is that they are not designed for exam requirements. Very often, it would highlight passive voice as “complicated” language. Then there’s also a need for thesaurus.

So I thought this could be automated.

Design

My design process started from talking to a few people who were preparing for the exam. I asked them what tool they used and how checked their essays. I also went through their self-checklists and found that they were very similar. For example, they all had a section about word count, paragraph count, usage of simple and linking words.

After that, I started to sketch the app. I wanted to make it as simple as possible because it was only a side project. So I needed to choose the most important features and leave the rest for later.

This initial list of features was:

  • Word counter
  • Grammar checker configured for the exam
  • Custom checks taken from the self-checklists
  • Score based on the number and types of mistakes (this was later removed and the screenshots already show the new design)

I then researched similar apps to see what design patterns they used. I found that they used two different approaches. One was to have a sidebar with a list of checks and a main area where the text is displayed. The other approach was to highlight the text and show the check results in a popup. I decided to go with the first approach because it was more flexible and I could add more checks in the future. It also allowed me to add checks that were not related to the text, e.g. word count or paragraph count.

A component library in Figma

After that, I started designing the app screens in Figma. The following screens were created:

  • Sign in screen, Sign up, and Password reset screens
  • Dashboard screen
  • Editor screen

Let’s look at the editor screen in more detail. The editor screen consists of a sidebar and a main area.

Editor with open sidebar

The sidebar is hidden by default because otherwise, all mistakes are highlighted and it’s hard to focus on the text. It can be opened by clicking on the icon in the top right corner.

The sidebar has a list of checks. Initially, these check cards were shown on a white background. But after trying this version on a cheap monitor, I realized that it was hard to see the cards on a white background. So I changed the background to a light gray color.

Expandable check card

Each card is clickable. When clicked, it expands and shows the check results. Since the space in the card is limited, it can also have a link to a more detailed explanation of the check.

The UX design detail that I liked most was the way that underlined text interacted with the corresponding check card. Since there could be many checks, people need to know which check is related to which part of the text. So if an underlined check is clicked, the sidebar scrolls to the check card. If a check card is clicked, the text is scrolled to the underlined text.

Another important detail was the ability to apply suggestions without manually copying them. So if a check has a suggestion, it can be applied by clicking on the button. This is especially useful for the grammar checks.

Results

The app is live at tryrewrite.com. It might need to a few seconds to wake up Heroku dynos since it uses Eco Dynos Plan.

After releasing the first beta version, I conducted a few more interviews. One of the main feedbacks was that people did not trust the app calculated score. So I removed it until I can find a better way to calculate it.

Another interesting insight from these interviews was that many people who prepared for the exam were students. Their parents already paid for teachers who checked their essay. I did not find out it before because I was in a Telegram group with people who were already working.

I also removed all additional pages because I wanted to focus on the core functionality. So now the app has only one page with the editor.

Lessons Learned

Some important lessons I learned from this project:

  • Talk to more people before starting a project and talk to people from different backgrounds;
  • You can always remove features and pages to focus on the core functionality. I implemented a lot of features that I removed later because they were not important for the MVP;
  • Use the cheapest way to validate your idea first. Today, I would not spend time on creating web application and would use a Telegram bot.