Desktop HD.png

NAIVE

155a57fbf9a5738c96d9dfd8fe55943f.jpg

NAIVE

 

Product Brief

A flash card app with supreme algorithm that motivate user to learn everyday by following human memory pattern and increasing learning efficiency.

 

My Role

Design a intuitive and encouraging user experience and coherent user interface to ensure deliver a high efficiency experience. Work with engineer to make sure the advantage of the learning algorithm is carried out. Work with product manager to ensure the idea of this product has been understood and tools are well utilized by users

 

Design Context and Goal

Based on user research done prior to my participation (research done mostly among language learner, which NAIVE was trying to focus on)

  • 80% user feel like it is hard to keep doing the flash card memorizing every day (especially through language learning which is always long and painful)

 

  • 90% user prefer given some kind of prize for reaching the goal of learning and all of them need to keep clear track of their progress.

 

  • 40% user feel like it is easier to learn from paper material, making their own flash card helps memorizing.

 

  • Among 20% of serious language learner (actively learning and has short term/long term goal of taking exam or getting certificate), flash card is essential.

 

  • 80% user of this group know or have tried flashcard app ANKI, most of them feel that it is helpful but often hard to use.

Design Goal:

  • App interactive helps increase the efficiency of memorizing

  • Clean and simple flow that requires only intuition instead of thinking through

  • Clear visualization of data and progress

naive 2.0.gif
 

User Study

target group

  • Age: 22 - 35

  • Minimum Education: Bachelor Degree

  • Tech Savvy but not necessarily in related professional

  • Active language learner, taking a class, or seriously planning to do so

  • No leisure learning - serious learner with a clear goal

  • English as primary language or at least medium proficiency

 

persona

persona tom hague.png
 

Case Study

Existing Product

Flash card app is not new in the market. So I did some usability test with users like Tom Hague above on some already known product in the market such as: 

  • Anki

  • Tinycard from Duolingo

  • Quizlet

As they are not exactly only flash card for language, they all have flash card feature, which is also a major feature of their product. After some usability testing, I found some pain point when people use the apps that could help me knowing the user better.

 

download.png
10535-logo-tinycards-flashcards-by-duolingo.jpg
shirt-1512516266-4758c5f34a89d80297183b7a1c42ee25.jpeg
 

Pain Points

 

Pain Point #1 - the learning process and progress visualization

  • Not knowing my progress - How do I know if I remember the set or not.

  • Could not understand the graphic that shows my progress

  • Too many choices, I need somebody to decide how to study these cards

case study-07.png
 

pain point #2 - creating decks

  • Easy, fast and simple instruction

  • Not too much formatting

  • Can I add picture?

  • Can I adjust the order?

case study-08.png
 

pain point #3 - Browsing and downloading

  • I want to find my target object as quick as possible - I need clear instruction of where to go.

  • Recommendation is good but not too much.

  • Graphic could be distracting

 

User Flow

flow-06.png
 

Wireframe

 

Sign up / Log in

naive wireframe-01.png

My Decks (My library)

naive wireframe-02.png

Download Deck

naive wireframe-04.png

Learning

naive wireframe-05.png

Create New Deck

naive wireframe-03.png
 

Design Decision

Design decision, think process and modification based on usability testing

Consistency

V1.0 V2.0

V1.0 V2.0

Human Factor and Hierachy

V2.0 V2.0

V2.0 V2.0

V1.0 V2.0

V1.0 V2.0

Flow and Visual 

V1.0 V2.0

V1.0 V2.0

 

Usability Testing and Reflection

  • Always consider human factor

  • Same function should be available when user click in for detail - so that they don't have to go back and access what they are looking for

  • Visual Consistency is important to help user understand context