Murphy’s English Grammar in Use

Reimagining the app of the world’s best-selling grammar book for intermediate learners of English.
③ 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. ❤️

© 2020 Maxim Melnikov.