Murphy’s English Grammar in Use

Reimagining the app of the world’s best-selling grammar book for intermediate learners of English.

Some time ago I decided to improve my English, and the Raymond Murphy’s “English Grammar in Use” app became a thing I started using on a daily basis. Unfortunately, whilst it is a brilliant self-study reference and practice book, the app itself has a really weak UI. I tried to redesign it and fix its current problems.

I asked my tutor to let me interview her students to find out how they use the app. They, both new and experienced users of the app, were given several tasks to complete using the current app, such as:

Find a particular unit by its name
Find a particular unit by its reference in the book
Find all the unfinished exercises of the unit
Tell what exercises of the unit haven't been finished

After conducting these interviews, I listed all the pain points of each user and grouped them into certain tasks. Interestingly, even the experienced users faced issues, e.g. some of them didn’t even realise that the app has search functionality (which is hidden under a hamburger).

Once the pain points were defined, I had a rough idea of what a new structure might look like. I wanted the UI to not only have a modern feel, but also to follow the iOS design language. Since the app’s navigation wasn’t too complicated, moving away from a hamburger menu to a tab bar seemed like a no-brainer to me.

To solve the issue around finding a particular unit, the UI of the “All units” screen now displays the unit numbers while collapsed. Meanwhile, the last opened group is expanded by default.

To help users find unfinished exercises of a particular unit, I visualised the current flow of choosing a unit to study defining “Complete the exercise” as the end point. This helped me identify the features necessary to take the edge off the pain point. Well, almost*.

* — I designed the proposed flow and created rough sketches of all screens of the app. These were loaded using InVision and the resulting prototype provided to the students. Although, observing how they used the prototype showed me I was totally wrong. People don’t need such detailed information about a unit to keep track of exercises and unit completion easily. The only thing they want to know is whether the unit is completed or not, so I brought colour coding into play and got rid of the detailed information screen.

In addition to fixing the core functionality issues, I added a bunch of new features such as:

Recaps: a new section that refreshes your memory. The app monitors what (and when) you complete units, tracking how many mistakes you make to help choose further units.
Goals and Statistics because who doesn't love to watch their progress, right?
User Registration to sync user progress across all their devices. It’s worth noting that this particular feature got mixed feedback, so I decided to exclude it from the final prototype. Instead, it was replaced with a transparent iCloud sync. Less is more!

③ Translating prototype into UI

Once all feedback was collected, I started working on the UI. Initially, I used the default iOS components, but then I decided to try something different and went with a custom card-based interface.

All Units

The “All units” screen, in particular, received a lot of improvements. Collapsed groups of units — topics — now have a little progress bar and indexes of contained units, which is great in helping the user understand where they are (and match units in the app with the paper book’s ToC.)

Unit

Search

The new search screen is also accessible from the tab bar. Now it’s much easier to differentiate items by their type: units are highlighted by their number, and glossary items are labelled with an icon.

Profile

④ What I’ve learnt

This project made me appreciate the importance of interviewing. Without having any available analytics of usage the original app, I got a lot of insights just by asking people open questions and observing their behaviour. This helped me a lot to start working on the redesign being not related to the software developers.
I’ve learnt how to plan my time better. I set a goal to complete the redesign in a month of spare time. This strict deadline pushed me to create a roadmap with the time limits for each task from conducting interviews to creating UI and follow it closely.
I’ve understood which tools are great for me. I‘ve been using a lot of prototyping tools while working on the project. I tried Flinto, Framer Studio, Principle, and InVision. Each tool has its own pros and cons, and I’ve become more adept at testing concepts using the proper prototyping tool and at the proper fidelity.

To test the UX part, you’d better use InVision, which is great for low-fidelity prototyping. To create micro-interactions with no logic, Principle and Flinto are the right choices. Otherwise, Framer Studio is the only option.

I tried to build the entire app using Framer, but it was a time-consuming and meaningless process. Although, I found it handier and more powerful than the others, and I picked it up dramatically. It has endless possibilities so I felt in love with it. ❤️