top of page

Kram Kards

UX Design Case Study

Purpose

Kram Kards is a solo project completed as part of my Intro to UX Design course taken with CareerFoundry.

​

This was the first UX Design project I ever worked on. It served the educational purpose of introducing the concept and application of the Design Thinking Process through hands-on learning.

Role

UX Designer

Duration

October - November 2020

30 Days

Key Tools

Pen and Paper

Adobe Xd

Marvel App

Skills

Research

  • Competitive Analysis

  • User Interviews

  • User Persona

  • User Stories

Design

  • Information Architecture

  • Task Analysis

  • User Flows

  • Low-fidelity Wireframes

  • Paper Prototypes

Evaluate

  • Usability Testing

  • Prototype Revisions

Overview

Technology has made it much easier to learn just about any subject on apps and websites, but many people still have difficulty finding time for further learning when balancing the other priorities in their schedule.

​

 

In the academic world, an “ESA” (Engage-Study-Activate) approach has been proven to be one of the most successful methods for learning and retaining new information. The key to success with the ESA method is the “Activate” stage where learners apply new knowledge to real-life situations with applied practice. Busy learners, particularly adults, are in need of ways to put their new vocabulary into action without impeding on other commitments.

Untitled design.png

Objective

The goal of Kram Kards was to provide adult learners with a flashcard app that allowed them to learn vocabulary quickly and efficiently by using engaging study sessions based on proven teaching methodology.

​

In order to do this, I needed to create an entertaining and educational solution that could fit into the busy schedules of adult learners. This is done by affording searchable premade sets of vocabulary cards, and additional activities like games and quizzes in customizable study sessions for maximum activation of new words in accordance with the "ESA" teaching methodology.

Methodology

In alignment with the methodology I learned with my CareerFoundry course, their adapted Design Thinking Process was selected for this project:

As a new designer, it was extremely beneficial to learn an applicable methodology through hands-on learning. Although it was only an introduction to the process, it was crucial to my understanding of the real-world application of UX and the Design Thinking Process.

Phase 1

Research

As this was my first time doing UX research, a "fear of the unknown" was an initial challenge that I faced. This was one of the easiest challenges to deal with throughout the project as my studies were intertwined with the project so I could learn while doing.

 

The next challenge I encountered was participant recruitment. To overcome this challenge, I reached out to peers in my course and friends who openly expressed having used flashcard or vocabulary apps in the past.

Skills

  • Competitive Analysis

  • User Interviews

  • User Persona

  • User Stories

Tools

  • Zoom Video Calling

  • Microsoft Word

  • Microsoft Excel

Competitive Analysis

In order to understand the problem space, I first conducted a competitive analysis on three of the most popular flashcard apps currently on the Google Play Store. The following apps were analyzed:

Ankidroid Flashcards

Pros

  • Customizable cards and review sessions

  • Detailed statistics page

  • Library of decks available online

Cons

  • No onboarding of complex features

  • Case-sensitivity creates difficulty for review sessions

  • Account required to unlock all features

Lexilize Flashcard Maker

Pros

  • Can include images on flashcards from web or device

  • Basic statistics available for free

  • Variety of study methods offered

Cons

  • Aimed at language learners

  • Most features require a premium account

  • Difficult to navigate because of ambiguous UI elements

Frogitecture Flashcards

Pros

  • Easy to create custom flashcards and folders

  • Searchable public folders available

  • Clearly displayed instructions on each page

Cons

  • Requires an account to use app

  • Cannot copy and paste within the app to create cards

  • No unique or engaging study methods offered

User Interviews

To understand the potential users and their current experience in the problem space, user interviews were conducted with three adult participants from diverse backgrounds who are currently studying a variety of topics. I was most interested in learning about their motivation for learning new vocabulary, their current feelings regarding vocabulary and flashcard applications, and how they are able to find time for studying in their daily lives.

​

Link to User Interview Script

  • Adult learners most often use vocabulary apps for 10-15 minutes at a time

​

  • All participants expressed that applying new vocabulary in contextual situations was the best way to retain their meaning and usage

​

  • Engaging activities like games and writing exercises are preferred to simply reviewing flashcards

​

  • Correct pronunciation is important for building the confidence to use new words

​

  • The number of distractions in an environment is a big factor learners consider when deciding whether or not to study at a particular time

After analyzing the interviews, I determined that the biggest problem is that flashcard apps are not engaging enough for users to effectively learn new vocabulary exclusively on an app.

User Persona

The primary persona, Erica Lee, was created as a representation of the target audience in order to maintain a focus on their needs, motivations, frustrations, and pain points throughout the design process.

Erica Lee

Seattle, WA

27, Female

Market Research Consultant

 

"I'm serious about my career and seeing the world."

 

"I love to learn new things, but I'm also a very busy person."

Behaviors

  • Backpacks when she travels

  • Loves to share photos of exotic dishes

  • Enjoys the "big city" atmosphere at night

  • Studies languages to make more friends

Needs & Goals

  • Learn industry jargon for different companies to complete work assignments

  • Engaging and fun ways to study

  • Methods that allow her to understand context usage

  • Study habits that fit into a busy schedule

Device Usage

  • iPhone, iPad, MacBook (Personal)

  • PC, Google Pixel 2 (Business)

User and Job Stories

With Erica established as the star of the show, it was important to understand the context in which she would be using my product by writing user stories and job stories.

User Stories

“As a research consultant, I want premade vocabulary decks, so that I can easily study useful terms for different industries.”

“As a busy young adult, I want engaging ways to study new words, so that I don’t become distracted by more “fun” apps when trying to learn.

Job Stories

“When I am assigned a new project, I want to confidently use industry jargon, so that I can present research with authoritative vernacular.

“When I am learning something new, I want to feel excited about studying vocabulary, so that I don’t lose focus on achieving my goal.

Phase 2

Design

I felt confident after seeing how my existing skills translated to conducting User Interviews in the last stage. However, I have never been artistic and have never worked a "creative" job so UI design was a new concept to me.

 

I use apps everyday but never put much thought into how they look and function before working on this project. This meant it was important for me to familiarize myself with industry terminology and to study visual design principles.

 

I learned two very important lessons during this stage of the design process. I learned the importance of embracing constructive criticism in order to create a better product. This lesson also taught me that as a UX designer, I should never fall in love with my design and risk feeling emotional attachment to it.

 

On a technical level, I learned that paper wireframes can show a lot of detail but since this project I have switched to only using Sharpie markers for paper wireframes to maintain their low-fidelity and not waste time.

Skills

  • Information Architecture

  • Task Analysis

  • User Flows

  • Low-fidelity Wireframes

  • Paper Prototypes

Tools

  • Pencil & Paper

  • Marvel App

  • Adobe Xd

Task Analyses and User Flows

To create a working prototype in order to test my product, information architecture was implemented to create a well-organized space for users to flow through.

 

Task analyses were written to identify the steps required for users to perform crucial tasks and user flows were created using Adobe Xd to create visual representations of the task analyses.

 

User interviews revealed that engaging study sessions were of the highest importance for retaining new words and their meanings. Another consideration is how quickly users can enter a study session when returning to the app. Here you can see the various paths which a returning user can take to enter an engaging study session:

User Goal: Quickly complete a study session to maximize available time

 

Entry Point: Login (Existing Users) / Register (New Users)

 

Success Criteria: Study Session Completed

​

  1. Open App

  2. Splash Screen

  3. Login/Register

  4. Home Screen

  5. Select “Study Now” or Create/Choose a Study Plan

  6. Complete Study Session

Low-fidelity Wireframes

My first ever low-fidelity wireframes were drawn with pencil and paper to layout the different functions of the application. Below you can see some of my first, low-fidelity, paper wireframes.

Paper Prototype

With wireframes in hand, I then had to use a prototyping tool for the first time. I decided on using Marvel to create the prototype because of its ease of use on both desktop and mobile devices for new users like myself.

Phase 3

Evaluate

I knew that conducting usability tests would be an exciting experience, but I was not prepared for the high amount of critical feedback my app would receive. Fortunately, by reframing the idea "constructive criticism" into "constructive feedback" I was able to embrace the negativity and turn it into positive changes for Kram Kards.

 

After gathering insights from the participants and grading errors according to Nielsen's Error Severity Rating Scale, I got my pencil and paper back out to start refining my design.

 

Another aspect of UX design that I got to experience was presenting my product to my mentor at the end of the course. This was a great opportunity to learn how to craft a narrative about the design process and to gain hands-on experience with professional presentations.

Skills

  • Usability Testing

  • Prototype Revisions

Tools

  • Pencil & Paper

  • Adobe Xd

Usability tests

To test the design, I recruited three participants from my target audience for a usability testing session of the prototype. I conducted one in-person moderated test and two remote moderated tests using Zoom.

 

I then analyzed the recordings of the tests to record observations, quotes, and any errors made during the test. The errors were then graded according to Jakob Nielsen’s Error Severity Rating Scale.

Key Issues

  • No “back” or “exit” buttons when completing a study session

​

  • The term “Kram” is not properly introduced to users

​

  • Users cannot search for or sort cards within their folders

​

  • No way to hear the pronunciation of each word

Major Failures

“What if my bus stops and I need to quit my study session?”

4.png

“How do I go back or exit?”

“Can I hear how it's pronounced?”

“I don’t understand what “Share” does."

“What is Online Mode?"

“Can I go to the previous one again?”

"Clever is good, but only if the cleverness helps convey - not obscure - the benefit."

 

-Steve Krug, 'Don't Make Me Think'

Prototype Revisions

Once the key issues were brought to light, revisions were made on the existing prototype to address them appropriately.

Some solutions were easy to implement, such as adding back and exit buttons. As well as an “audio playback” button to the flashcards so users could hear the pronunciation.

Other solutions required more work to address, like determining a better onboarding method to introduce the features and their in-app names.

Summary and Reflection

Upon completing this project and this course, I was happy to reflect on the lessons learned throughout the process. The hands-on approach helped me acquire a diverse set of new soft skills like UX research, wireframing, prototyping, crafting user stories, journeys, and personas, usability testing, and presentation techniques. I also worked with new software like Adobe Xd and Marvel for the first time.

 

Throughout the process, I learned that I need to be more open to constructive criticism and found that when I incorporated that feedback, my project benefitted. I was able to identify my weaknesses as a UX designer beyond my fear of the unknown. I also found out that every stage would require a lot of studying, especially visual and UI design which I had no experience with before this.

 

Finally, I learned that I love the Design Thinking process and now that I have witnessed its power in action I feel confident applying it to my future projects.

Future Steps

The next steps for Kram Kards would be to create a higher-fidelity prototype that addresses all of the key issues for further usability tests. At the time of the completion, I created my first mid-fidelity wireframes using Adobe Xd. Applying this level of fidelity across the entire prototype, including the revisions previously identified to address key issues, would be done prior to running a second round of usability tests.

Thank You for Watching!

bottom of page