Eager Beaver Mobile App

UX/UI Design
Eager Beaver is a mobile flashcard app, empowering people to learn new vocabulary.

My Role
UX/UI Designer

Tools Used
Marvel, Figma, Typeform, Optimal Workshop, ProtoPie

Scope
6 weeks

What I did
Competitive Analysis, User Research, Information Architecture, Mobile design, Usability Study, Design Language, Interaction Design
The Problem:
How might we help people to learn new vocabulary?

The Background

People of all ages and backgrounds take courses, master new languages and memorize new information. Curiosity to learn something new, is a critical to an active life, no matter your age, location, or circumstances.

The 5 W’s of Eager Beaver:

Who: The target audience is 25–45 year-olds enrolled in online courses or language learners.

What: A mobile application focused on learning new vocabulary.

When: This application is meant to be used on-the-go for quick 5–10 minute study sessions. That could be on a bus or train, waiting between classes, on a lunch break, etc.

Where: Using the app for 10–20 minute intervals, at a cafe, at home, or on the go.

Why: It can be difficult to keep track of all the jargon when studying a new discipline. Students need a way to methodically categorize, reference, and study new vocabulary and concepts so they can move forward confidently in their field.

What can we do better?:
Competitive analysis of StudySmarter, Quizlet & Spacify

I conducted Competitive analysis of StudySmarter, Quizlet & Spacify: popular flashcard apps each promising different flashcard learning techniques and resources to help users reach their learning goals. This helped me outline some features of Eager Beaver needs to have to stand out:

• Straighforward way to add your own flashcards, with option to upload photos.

Access to other user’s publicly shared flashcards.

• An integrated dictionary to help language learners.

• Option to study only the flashcards the user isn’t sure about.

Additionally Eager Beaver will have engaging statistics to keep users motivated and a distraction-free interface.

User Interviews: How do people approach learning a new subject and vocabulary?

To gain an understanding into the needs and wants of users and how they approach learning new vocabulary, I interviewed 3 people with different experiences in what and how they learn.

After synthesizing the data from the interviews, into what users are Doing, Thinking and Feeling, I was able to take out some key insights:

• People look up words & terms they come accross in Google.

• Folks learn better when they use their visual memory by writing down notes.

• They see mobile apps as useful in helping them learn.

• People think memorizing new vocabulary is the most difficult part.

• They feel accomplished when they can recognize new words and use them in context (in conversations, at work, etc.)

• Folks feel frustrated when they have to look up a word/term multiple times.

Empathizing with learners

With the information from the interviews, I started narrowing down the scope of the project, creating a proto-persona. That  ensured the further design decisions stayed user-centric.

In order to move forward with the design and define the core functionality of Eager Beaver, I’ve created User & Job Stories from the perspective of my proto-persona Nina.

Primary Features: What would help Nina the most?

From the stories, there were 4 main features of Eager Beaver that emerged:

Dashboard: with run streak and goals, recently viewed (continue learning)

Flashcards overview: with list of flashcards organized into subjects & access to other users’ publicly shared flashcards

Deck overview: with study sessions, recently added cards, & cards marked repeat

Dictionary: with option to add different languages

User Flows:
How would Nina add & study flashcards in Eager Beaver?

I set out to map my proto-persona’s User flow. This step helped me keep the design user-centered, by showing me what pages or screens of the app will be needed from the perspective of Nina.

Structuring the content: Sitemap

In order to ensure a clear structure of the app, I’ve created a sitemap, based on the user flows.

Wireframing:
Sketches & first clickable prototype.

I turned these sketches to a clickable prototype, using Marvelapp. This allowed me to quickly test my solution and iterate on it.

Learnings from Usability Test:
Problems and solutions.

The Marvel prototype was tested with 3 users. The finding from the usability test were documented and rated by severity.

To see the detailed usability report click here.

The most severe problems were:

• Lack of onboarding

Ambiguous icons & labels (in the navigation bar; library, decks, assign deck, flashcards)

• Add new flashcard involving confusing search option

• Deep architecture, requiring multiple clicks to get to a study session

These issues were addressed in the next high-fidelity iteration of Eager Beaver. I simplified the architecture by reducing the number of options in the navigation bar & having “flashcards” as the only category within users saved items.

Deciding on the Look & Feel of Eager Beaver

Eager Beaver is relaxed, fun and colorful. Despite the bright colors, it is undistracting and there is no unnecessay clutter in the UI elements.

Interaction Design

Interacting with Eager Beaver relies on well known gestures and triggers, feedback and step by step actions, to minimize cognitive load and let users concentrate on learning.

The user can see their progress in the study session: how many cards they have mastered and how many they need to repeat.

Closing a session mid way, gives the option to resume and jump right in where the user left off.

Adding a flashcard gives the user confirmation feedback and an option to continue browsing or jump to saved flashcard.

The process of adding a flashcard is broken down to one step at a time, so conginitive load is minimized.

Welcome to Eager Beaver!

Onboarding

Get to know the app.

Sign up & Log in

Create an account easy with email or social media.

Study Session

Swipe right if you
Got it!

Dashboard & Statistics

Keep that run streak, you are doing great!

Flashcards

Discover your fellow learners’ flashcards.

Flashcards

Take a photo to turn your notes into flashcards.

Dictionary

Look up any word and add it to your flashcards with a click.

What’s next?

As a design is never finished, there are some features and interactions I would like to develop futher:

• A feature where users can learn only the cards they have marked as “repeat”. This feature can offer a unique value propositions for Eager Beaver.

• Profile and settings screens

• Individualized learning goals and progress notifications

What I’ve learned from Eager Beaver

Being the solo UX/UI designer for the project has had its challenges. Despite the limited timeframe, I was able to make design decisions and move quickly thorugh the design process. The work on Eager Beaver has been divided into two parts: Discover & Define stages which took relatively little time and Develop & Deliver, where I spent more time working on high-fidelity prototype.  

I’ve gathered important learning from each stage of the process:

• In User Interviews, ask non-leading questions. Processing the information is time consuming.

• Differentiate between your own assumptions and the findings from the User Interviews and Usability Tests.

• Wording of features is important. Try conveying information visually.

Moving into the final design I’ve realized how time consuming but important high-fidelity prototyping is. Adding microinteractions had a great impact on the whole look & feel and identity of the app. I had the chance to create a prototype in ProtoPie which I found to be a powerful tool that I would like to continue mastering.



Icons by Material Design
Illustrations by
Freepik Storyset.