Frayerly

Frayerly helps users create flashcards from the materials they are already studying, and then review them in quick bursts within different contexts 

ROLE

UX Designer

TOOLS

DURATION

1 month

DELIVERABLES

Problem

Continuing education is time consuming. For busy adults balancing parenthood, a 9-5, and school, finding the time to learn and reinforce new vocabulary is difficult. They need a way to take notes on new vocabulary in complex texts and review those notes regularly that saves them time.

How can we help busy adults learn and reinforce new and complex vocabulary?

I explored this question as part of an Intro to UX course. I first conducted a competitive analysis to see how other apps approach vocabulary acquisition. For initial user research, I conducted 4 user interviews which I used to create a proto-persona, user stories, and problem statement. Then I did task analyses for two primary features, sketched paper wireframes for those task flows, and created a low-fidelity Marvel prototype from the sketches. Finally, I conducted usability testing to ensure that the pain points were resolved. The project timeline was 1 month.

Inspiration

Conceptulaization

Iteration

INSPIRATION

The project brief asked me to design a mobile app for young or mid-career professionals in continuing education focused on learning and reinforcing new, complex vocabulary in quick bursts. 

As a former English teacher, I know that the best way to reinforce long term memory of new vocabulary is to make connections between the new word and other contexts. In many classrooms, teachers use something called the Frayer Model to help students put new vocabulary in different contexts and aid memory. So I decided to use this as the basis for my initial hypothesis.

Competitive Analysis

I looked at 3 vocabulary learning apps, Vocabulary, WordUp, and Knudge.Me, focusing primarily on the pros and cons of their UX. Vocabulary is a simple, elegant flashcard app that distinguishes itself through its customization option. WordUp uses solid learning theory like different contexts and rewards to help second language learners with vocabulary acquisition, but isn’t very helpful for native speakers looking to increase proficiency in professional fields. Knudge.Me uses games and rewards to help motivate users, but the reward system is locked behind a paywall. None of these apps perfectly solved the problem.

Task 1.1: Competitive Analysis

User Interviews

I conducted 4 user interviews with people young or mid-career professionals in continuing education, and created an empathy map from the interviews.

Test Script & Questions

Task 1.2 User Research

Empathy Mapping

Key findings: 

Empathy Map

CONCEPTUALIZATION

Proto Persona

Beyond using my key findings to inform my persona's behaviors, needs, and goals, some of the most important considerations for me in creating this persona were representation. For this reason, I chose to make my proto-persona encompass a lot of diversity, . They present as femme, but use they/them pronouns (one of my interviewees was LGBTQ). They are mixed race, from an immigrant family (one of my interviewees is from an immigrant family). They are a parent of a small child, navigating a career change (two of my interviewees were navigating career changes with small children). 

Task 1.3 User Personas

User Stories

As Ana, I want to track progress towards fluency with new professional vocabulary and jargon so that I am successful in my studies.

As Ana, I want to be able to look up definitions and examples of new words as I’m reading so that I can place it into the bigger picture of my field.

As Ana, I want short vocabulary review activities so that I can practice daily while juggling all the aspects of my schedule.

As Ana, I want personalized recommendations for supplemental reading material based on concepts I’m shaky with so that I can make the most of my limited time.

As Ana, I want reminders to practice vocabulary review every day so that I consistently reinforce my learning.

As Ana, I want to a discussion forum to apply my new vocabulary to conversations with real people so that my understanding of the words’ contexts is flexibly tested.

As Ana, I want to a variety of different, fun vocabulary review activities so that my learning is reinforced in different contexts.

Problem Statement

Ana needs a way to take notes on vocabulary in context and review them regularly in a quick, varied way because it will make it easier to read complex texts for continuing education in her limited study time. We will know this to be true when we see her reviewing relevant vocabulary daily in short study sessions.

Ana needs a way to look up professional jargon, find it in relevant supplemental reading material, and discuss it with other professionals because it will help her place the jargon into the larger framework of her field. We will know this to be true when we see her discussing jargon from supplemental reading with people.

Hypothesis Statement

We believe that by creating flashcards of highlighted words in user chosen virtual texts for Ana, we will achieve regular review of relevant vocabulary in short study sessions.

We believe that by folding the flashcards into short study games with daily push notifications, searching other virtual texts for those terms, and providing a discussion forum for Ana, we will achieve regular review of relevant vocabulary in short study sessions and discussion of jargon in supplemental reading with people.


Task Analysis

I conducted a task analysis for both a new and existing user attempting to use two related features: creating a new flashcard and reviewing an existing flashcard.

Task Analysis

Low Fidelity Wireframes

Using the flows created during task analysis, I sketched out wireframes for these two features as both a new and existing user would move through them. For the new user, I included an onboarding flow.

Onboarding

Create a flashcard

Review a flashcard

ITERATION

Usability Test

I conducted 5 in person usability test sessions to test usability and identify pain points in 5 user goals.

Usability Testing

Usability Test Report

I identified seven issues, rated their severity, and came up with solutions to solve the issues before sketching revised wireframes that addressed the issues.

Usability Test Report
Usability Test - Revised Wireframes

FINAL THOUGHTS

Takeaways