Reimagining Anki for iOS

2023/06/19 #uiux

As a long-term language-learner I know that consistency is the key to success. It’s really important to keep at it and study at least for a few minutes each and every day to make true long-lasting progress. While in theory this is easy enough, in practice there are many factors that can distract or demotivate along the way. Considering many of us now use our electronic devices to study languages one of those factors can also be software.

I have long been a bit dissatisfied with the user experience of the app I use for my daily vocabulary study. It's called “Anki” and it is actually an amazing tool to find, organize and study vocabulary (check out their website here). However, the official Anki-iOS app is a bit of a letdown for me personally. While feature complete and technically robust and impressive it simply lacks the delight factor that makes me motivated to study when opening the app and keeps me motivated while using it.

To fix this I set out to create a concept of how the Anki app on iOS could be reimagined with just a few small tweaks to create a much more suitable, frictionless and motivating tool to study vocabulary on the go.

I kept the goals for this project as simple and focused as possible:

Implement Anki’s most important features for studying on the go
Create a frictionless user experience
Make the user experience delightful and motivating
Keep the concept compatible with the Anki service (which means all features of the concept have to neatly map to existing Anki features)
Achieve all of this with as little effort as necessary

After setting those goals I first made screenshots of the current Anki app, laid them out in Sketch and identified what features of the app were important to keep and how to rearrange the user flow in order to reduce friction.

After I settled on a user flow I created mockups of how the screens could be redesigned to enhance delight but still stay compatible with Anki. To honor the goal of achieving this goal with as little effort as necessary I mainly used the stock components offered by the current iOS design system.

After this the next step was to test the design out as a prototype. I hooked up the screens in Sketch and tested the flow on my iPhone.

I decided to give it a go and create an actual prototype in Xcode using Swift & SwiftUI. Taking advantage of SwiftUI I also added a search functionality to the main screen making it possible to search for a deck by name or even search for decks with a specific word within one of their vocabulary cards.

Overall, I am satisfied with how this project turned out considering the short timeframe and minimal effort that was necessary to achieve a much better result. It once again proved to be extremely effective and insightful to take the extra step of extending the prototype phase to a create a programmatic version of the concept. I plan to expand on this idea in future posts.