Anki Redesign
Enchancing flashcard creation in the memorization app
cursiveHead(1)
cursiveHead1-1
cursiveHead1-1
cursiveHead1-2
cursiveHead1-2
cursiveHead1-2
portfoliopic9
cursiveHead1-4
cursiveHead1
cursiveHead1-4
CursiveHeader

SUMMARY

Adding smoother onboarding and organization to make Anki easier to use for the absolute beginner.

* Note: This is a personal side project and is not affiliated with Anki.


ROLE      User Research, Wireframes, Prototypes, Interactive Design

TEAM     Solo project 

TOOLS    Figma, Principle, Whimsical   


LearnDeck

PROBLEM STATEMENT

Anki is a memorization app based around using flashcards and spaced repetition to learn any subject.  Although proven to be an extremely effective learning system, Anki is infamously difficult to use for the new user, so much so that there are countless Youtube and reddit tutorials dedicated to simply learning all about Anki’s functionality.

Timeline(1)

EXISTING SOLUTION

Anki lacks a friendly user interface.

 

ankipic

The existing app, Anki, presents users with a flashcard system that allows them to input terms and definitions.  Their spaced repetition method is highly recommended for memorization.  However, I felt it could be further enhanced by bring user needs to the forefront, such as more friendly UI and navigation on a mobile version.

solution

PRIORITIZATION MATRIX

I had to make sure my proposed enhancements fit within the product road map

 

matrix

Based on my own experiences as an Anki user and from ancedotal evidence from others I knew who had attempted to use the app, I knew their were overlapping issues that a redesign could solve.  And like most people I know who have stuck with the app, its because despite how antiquated the interface is, Anki has something its competitors don't: SPACED REPETITION.

USER & BUSINESS GOALS

 

User Goals

Onboard confidently on a mobile device; create and organize your flashcards


Business Goal

Increase the retention of new users by decreasing confusion created by interface.

USER JOURNEY & RESEARCH

Designing for a habit-forming product

 

* 73% of new users experienced discoverability issue while lauching Anki

* Users experienced confusion when dealing with empty states

* Competitors' services did not have spaced repetition

* Anki is completely free

* 84% of users found flashcard creation on mobile tedious

 

needs2

IDEATION

How might we encourage users to create and organize their flashcards on mobile?


SKETCHES(1)

SOLUTION

Update the UI to emphasize creation and organization

In order to quickly generate solutions, I used "the sketching the key features" approach.  I sketched out different variations of each of the features in a short sprint.  After completing the variations, I analyzed and chose the best solutions from the batch.
 

solution2
framesONe(1)
framesONe(1)
framesONe(1)

WIREFRAMES

To fix onboarding I had to decide if a tutorial or just a well-organized empty state was more appriopriate

 

wires-1-1

To not overwhelm the new user, I decided that simple was the route to go.  Most beginning users just want to make some cards and confidently work with them.  For a more experienced user, a more thorough tutorial might be necessary.

TESTING

The actionable feedback called for ADD button for flashcard creation

add-arrow

I sent out what I had so far to 6 friends who were interested in a memorization app.  The participants commented on the ease-of-use in comparison to the original app.  Although users still thought that flashcard creation took more time than it did on a desktop, users still found the process to be efficient and editing was easy to accomplish.


DESIGN PRINCIPLES

1. Intuitive

2. Visually pleasing

My biggest priority was to make the landing page the central hub of the app.  The user needed to be able to do all their tasks right from there.  It needed to be straightforward and responsive.  And moving away from the spartan approach of the orginial Anki app, I wanted to make an updated UI that was visually pleasing, but still recognizable to longtime users as the Anki app they know and love.

sliderOne

Empty states are a great way to ease a new user into the rhythms of the app.  By having conversational text, the user finds the app much more approachable from the get-go.  By having the two prominent buttons for creating, it shows that the emphasis is on organization right from the start.  The new user can get right to work creating their flashcards and then organizing them.

slider2-1
keyboardView

On mobile, it’s all about the keyboard - having keyboard extensions allows for greater flexibility in organization. 

Also, the ADD button and options to include images are embedded right on the keyboard, keeping them in easy reach for the mobile user.  Coupled with a more intuitive input field, this solves one of the most common gripes of mobile users - how tedious it is to create new flashcards from a phone.

settingsPic

WELCOME SEQUENCE

onboardSequence-1

ADJUSTMENTS

I went back to my friends to ask for feedback.

The response was overwhelmingly in favor of the changes I had made.  A smoother onboarding experience really helped the new user find their footing much faster.  They liked the simplicity of the flashcard creation and organization.


settings

Because the ability to customize the settings is one of the best things about Anki, I wanted to further develop out the Settings view.  Since adjusting the settings isn't something that a new user necessarily has to worry about, I gave the option for a default settings view.   For those more experienced users, being able to adjust the speed or modes of their flashcards would further enhance their productivity.

MY TAKEAWAYS

What I could improve on

One of the things I was worried about with this redesign was straying too far away from the original, very sparse design aesthetic of the Anki app.  I would have liked to have done more user research to gauge reactions from longtime users... would they like the changes?  or find them too jarring?  As a creature of habit myself, I can understand how turning on your favorite app and finding it completely different might be a really disorienting experience.


Reflection

Working on redesigns is an aspect of design work that I love.  Areas of friction exist hiding in plain sight, so being able to seize upon one of those and try to improve it in a critical and practical way is really kinda affirming for me.  It makes me really believe I picked the right path by becoming a designer.


Selected Works

CommonLitUsability Case Study

CursiveA desktop learning hub for young students

OneSource RedesignImproving navigation on a school district's HR website