Problem
Redesign the app UI to increase readability and engagement.
Solution
Apply modern visual design, UX writing, and interaction principles to create a more compelling experience for learners.
Before and After
The App
The Magoosh Vocabulary Builder app is a learning tool for those wanting to improve their understanding of English words and widen their vocabulary.
The app is built around a simple structure of activities based on the type of educational test the user may be taking, which are subsequently grouped into levels of difficulty.
Current design
While the design of the app is functionally basic, there are various elements that require improvement, such as:
- The visual design is bland
- The menu/back button is too close to the restricted space at the top of modern iPhones and is difficult to interact with
- There is a poor use of overall screen real estate
- Language could be simplified
Goals of the redesign
I took an hour and a half on a rainy Sunday afternoon to see what I could do to improve the experience of this app. My goals were primarily to bring the visual design up to date, improve the use of space, and make the app more engaging.
Disclaimer: This is my own work and was not requested by Magoosh in any way.
The Redesigned app
Visual Design
One of the first things I did was take Magoosh’s brand colors to create a simple background gradient and inject some life into the design.
Next, I took the OS-style cards and updated them to include depth via shadows and other elements of material design.
Throughout the new design, the cards use a white body at 20% opacity and a background blur to bring in elements of glassmorphism.
Finally, the card size was made uniform to bring an ordered design.
Language
First up was simplifying some of the language in the design, removing redundant words, and improving the text hierarchies.
“General Words for GRE and GMAT”
became…
Although the original CTA for “Study These Words >” is arguably useful, the design of the card is affordance enough to encourage interaction.
Other changes to the text:
- Adding encouraging messages
- Adding interesting insights into language
- Removing dominant language such as MASTER and replacing with more appropriate wording such as LEARN
User Experience
One of the quickest and simplest fixes was increasing the distance of the hamburger menu, and any potential back buttons from the top of the UI, thus fixing the issue of the touch area being too small
Next, I focussed on button design to simplify language (“Study this section” becomes “Study”) and afford this section to be clicked.
Throughout the design, on-brand colors are used to communicate state, such as locked or completed statuses.
Conclusion
By adhering to modern design principles, maintaining brand values, and considering the UX copy of the app, we can create a more engaging and visually appealing app in a short amount of time.