Case Study: Flash
Case Study: Flash
Project Overview
Project Overview
Flash is a mobile app that allows people to practice vocabulary anywhere, any time.
Flash is a mobile app that allows people to practice vocabulary anywhere, any time.
Project Scope
Project Scope
Self-directed project completed as part of CareerFoundry's Intro to UX Design Course.
Self-directed project completed as part of CareerFoundry's Intro to UX Design Course.
Project Role
Project Role
UX Designer
UX Researcher
UX Designer
UX Researcher
Tools
Tools
FigJam, Marvel, FlowMapp
FigJam, Marvel, FlowMapp
Duration
Duration
June 2022 - July 2022
June 2022 - July 2022
Problem
Problem
People need a quick and easy way to practice vocabulary in short bouts throughout the day.
People need a quick and easy way to practice vocabulary in short bouts throughout the day.
Concepts
Concepts
Customize flash cards → type, draw, or add photos to create flashcards
Create card decks → users can keep cards organized in a way that makes sense to them
Spaced repetition → practice mode that is done in multiple, short sessions, and shows newly added and difficult cards more frequently
Customize flash cards → type, draw, or add photos to create flashcards
Create card decks → users can keep cards organized in a way that makes sense to them
Spaced repetition → practice mode that is done in multiple, short sessions, and shows newly added and difficult cards more frequently
Learnings
Learnings
Keep research goals in mind during the interview process
After conducting the first interview, I realized that it’s not as easy as it seems! Some of the data I gathered wasn't as relevant as I'd hoped, so I made sure to keep my research goals in mind for the other interviews to gather as much relevant info as possible.
Do more user research
In order to evolve a proto-persona into a persona, who can represent segments of users as accurately as possible, much more user research needs to be done. For future projects, I want to incorporate more research methods, such as surveys, to gain a better understanding of the target audience.
Test, test, test!
My idea of how users would perform was proved wrong when they didn’t complete tasks the way I thought they would. This was such a great learning experience, and it taught me to never assume we know what users will do!
Keep research goals in mind during the interview process
After conducting the first interview, I realized that it’s not as easy as it seems! Some of the data I gathered wasn't as relevant as I'd hoped, so I made sure to keep my research goals in mind for the other interviews to gather as much relevant info as possible.
Do more user research
In order to evolve a proto-persona into a persona, who can represent segments of users as accurately as possible, much more user research needs to be done. For future projects, I want to incorporate more research methods, such as surveys, to gain a better understanding of the target audience.
Test, test, test!
My idea of how users would perform was proved wrong when they didn’t complete tasks the way I thought they would. This was such a great learning experience, and it taught me to never assume we know what users will do!
Links to Deliverables
Links to Deliverables
01 DEFINE
01 DEFINE
How might we design a mobile app that empowers people to learn new vocabulary?
How might we design a mobile app that empowers people to learn new vocabulary?
How might we design a mobile app that empowers people to learn new vocabulary?
Problem
Problem
Problem
People need a quick and easy way to practice vocabulary in short bouts throughout the day.
People need a quick and easy way to practice vocabulary in short bouts throughout the day.
Goal
Goal
Goal
Design a flashcard app that allows users to create custom cards and practice in short intervals to promote learning.
Design a flashcard app that allows users to create custom cards and practice in short intervals to promote learning.
02 RESEARCH
02 RESEARCH
Background
Research
Background Research
Background Research
I started by doing some background research on evidence-based learning methods that I could implement into the app:
Spaced Repetition
Spaced repetition involves studying in multiple shorter intervals, spread over a longer period of time. Hundreds of studies have demonstrated that this spacing effect can improve learning in the long-term, as opposed to cramming everything in one sitting. (Source)
Active Recall
Active recall requires the person to reproduce learned information as a way to engage the mind in the learning process. Studies have shown that it produces better results than passively learning, such as simply reading or listening to content. (Source)
Combining spaced repetition and active recall in the app could be an effective strategy to help users learn new vocabulary.
I started by doing some background research on evidence-based learning methods that I could implement into the app:
Spaced Repetition
Spaced repetition involves studying in multiple shorter intervals, spread over a longer period of time. Hundreds of studies have demonstrated that this spacing effect can improve learning in the long-term, as opposed to cramming everything in one sitting. (Source)
Active Recall
Active recall requires the person to reproduce learned information as a way to engage the mind in the learning process. Studies have shown that it produces better results than passively learning, such as simply reading or listening to content. (Source)
Combining spaced repetition and active recall in the app could be an effective strategy to help users learn new vocabulary.
Competitive
Analysis
Competitive Analysis
Competitive Analysis
Feyn: Flashcard app that allows users to write/draw digital flashcards by hand and practice with spaced repetition and active recall.
AnkiApp: Flashcard app that allows users to create or import cards and practice with spaced repetition and active recall.
Vocabulary: English vocabulary learning app, not customizable.
Feyn: Flashcard app that allows users to write/draw digital flashcards by hand and practice with spaced repetition and active recall.
AnkiApp: Flashcard app that allows users to create or import cards and practice with spaced repetition and active recall.
Vocabulary: English vocabulary learning app, not customizable.
Competitive Analysis Findings & Opportunities
Competitive Analysis Findings & Opportunities
User
Interviews
User Interviews
User Interviews
The next step in my research was to conduct interviews to gain a better understanding of the different approaches people take to learning and the challenges they face. I sorted the data into an affinity map to identify different themes that came up across interviews.
The next step in my research was to conduct interviews to gain a better understanding of the different approaches people take to learning and the challenges they face. I sorted the data into an affinity map to identify different themes that came up across interviews.
User Interview Affinity Map
User Interview Affinity Map
Key Insights
Key Insights
Key Insights
Participants felt that sometimes it was hard to find time to study due to other responsibilities, and at times there was a lot to learn in a short amount of time
Making their own study materials (e.g. notes, flashcards, study guides) was more effective and felt they had more control over their learning
“Making your own study materials is useful, because you’re in control of your learning.”
- Interviewee 2Studying was most effective when done in multiple, shorter chunks, rather than cramming everything in one sitting
“I did lots of trial and error, and found that I can’t study everything last minute, so I would need to do shorter periods over multiple days.”
- Interviewee 2
“I believe repetition and feedback (knowing if your answer is right or wrong) are the most important aspects of learning/studying methods.”
- Interviewee 3Online tools (e.g. Google Docs, Quizlet, Chegg) can be useful when short on time because there might be study guides/flashcards that already exist and saves time from making them, but they might also not be helpful especially if the information is incorrect
Participants felt that sometimes it was hard to find time to study due to other responsibilities, and at times there was a lot to learn in a short amount of time
Making their own study materials (e.g. notes, flashcards, study guides) was more effective and felt they had more control over their learning
“Making your own study materials is useful, because you’re in control of your learning.”
- Interviewee 2Studying was most effective when done in multiple, shorter chunks, rather than cramming everything in one sitting
“I did lots of trial and error, and found that I can’t study everything last minute, so I would need to do shorter periods over multiple days.”
- Interviewee 2
“I believe repetition and feedback (knowing if your answer is right or wrong) are the most important aspects of learning/studying methods.”
- Interviewee 3Online tools (e.g. Google Docs, Quizlet, Chegg) can be useful when short on time because there might be study guides/flashcards that already exist and saves time from making them, but they might also not be helpful especially if the information is incorrect
LEARNING #1: Keep research goals in mind in the interview process
LEARNING #1: Keep research goals in mind in the interview process
After the first interview, I realized that some of the data I gathered was not as relevant as I’d hoped, and this was partly due to the questions I had written and the follow up questions I had asked. As I moved to the next interviews, I made sure to keep my research goals in mind when I asked questions so I could gather as much relevant information as possible. Writing questions and interviewing are definitely skills I want to improve on as I grow as a UX designer.
Proto-Persona
Proto-Persona
Proto-Persona
Based on the interviews, I created a proto-persona who represents the time-poor segment of users:
Time-Poor Segment: Angela
Angela wants to improve her French by practicing French vocabulary during her breaks throughout the day since she doesn’t have much time otherwise in her busy schedule.
Based on the interviews, I created a proto-persona who represents the time-poor segment of users:
Time-Poor Segment: Angela
Angela wants to improve her French by practicing French vocabulary during her breaks throughout the day since she doesn’t have much time otherwise in her busy schedule.
Proto-Persona: Represents the Time-Poor Segment
Proto-Persona: Represents the Time-Poor Segment
LEARNING #2: Do more user research
LEARNING #2: Do more user research
As this was an introductory course, we focused on creating proto-personas to begin learning and understanding the process of turning user research data into personas. In order to evolve a proto-persona into a persona, much more research needs to be done. Although my interviews did allow me to uncover my main segment of users, I want to incorporate more research methods in future projects to gain a deeper understanding of the target audience.
03 IDEATE
03 IDEATE
Concept
Concept
Concept
After the research phase, I began to brainstorm possible solutions to the problem. I decided to focus on:
Customizing flash cards
Users can create custom flashcards by typing, drawing, or importing photos onto the cards.
Creating card decks
Users can create card decks to keep their flashcards organized in a way that makes sense to them.
Practicing with spaced repetition
A practice mode that is done in short intervals and shows newly added and difficult cards more frequently.
After the research phase, I began to brainstorm possible solutions to the problem. I decided to focus on:
Customizing flash cards
Users can create custom flashcards by typing, drawing, or importing photos onto the cards.
Creating card decks
Users can create card decks to keep their flashcards organized in a way that makes sense to them.
Practicing with spaced repetition
A practice mode that is done in short intervals and shows newly added and difficult cards more frequently.
User Flows
User Flows
User Flows
With these ideas in mind, I created 2 user flows to plan out the main features:
Objective 1: As a student, I want to create flashcards to practice French vocabulary so that I can improve my French and do well in my classes.
Objective 2: As a student who also works a part-time job, I need a quick and effective way to practice French vocabulary during breaks in my schedule.
With these ideas in mind, I created 2 user flows to plan out the main features:
Objective 1: As a student, I want to create flashcards to practice French vocabulary so that I can improve my French and do well in my classes.
Objective 2: As a student who also works a part-time job, I need a quick and effective way to practice French vocabulary during breaks in my schedule.
User Flows
User Flows
Sketching &
Prototyping
Sketching & Prototyping
Sketching & Prototyping
Now that I had an idea of the pages I needed to include in the app, I began sketching wireframes for onboarding, creating decks and flashcards, practicing, and viewing practice stats. Once I was happy with the sketches I made, I used Marvel to create a low-fidelity prototype that could be used for testing.
Now that I had an idea of the pages I needed to include in the app, I began sketching wireframes for onboarding, creating decks and flashcards, practicing, and viewing practice stats. Once I was happy with the sketches I made, I used Marvel to create a low-fidelity prototype that could be used for testing.
Onboarding
Onboarding
Creating Decks & Flashcards
Creating Decks & Flashcards
Practicing with Flashcards
Practicing with Flashcards
Viewing Practice Stats
Viewing Practice Stats
04 TEST
04 TEST
Usability
Testing
Usability Testing
Usability Testing
After sketching out some ideas, the next step was usability testing to put my ideas to the test! From these tests, I uncovered 3 main issues and rated each one using Jakob Nielson’s rating scale:
0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before product can be released
After sketching out some ideas, the next step was usability testing to put my ideas to the test! From these tests, I uncovered 3 main issues and rated each one using Jakob Nielson’s rating scale:
0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before product can be released
Usability Test Results
Usability Test Results
LEARNING #3: Test, test, test!
LEARNING #3: Test, test, test!
The testing phase was insightful and surprisingly fun! I went into the tests with an idea of how users would complete tasks, but was surprised when there were moments they didn’t complete tasks the way I thought they would. It definitely showed me the importance of testing, and to never assume we know what users will do!
05 ITERATE
05 ITERATE
Iteration
Iteration
Iteration
Key changes made based on usability test results and feedback from designers:
Key changes made based on usability test results and feedback from designers:
Added stats icon & info icon on practice page
Added a stats icon on the practice page as a shortcut so users can view stats on the practice and profile pages. Added an info icon if users want more info about each practice mode.
Added stats icon & info icon on practice page
Added a stats icon on the practice page as a shortcut so users can view stats on the practice and profile pages. Added an info icon if users want more info about each practice mode.
Changes Made to the Practice Page
Changes Made to the Practice Page
Decreased the number of screens needed to create/edit cards
Instead of hitting save after editing the front, then having to hit save again after editing the back, users will be able to scroll between the two and edit on the same screen. Also added blank states for cards as a prompt for users.
Decreased the number of screens needed to create/edit cards
Instead of hitting save after editing the front, then having to hit save again after editing the back, users will be able to scroll between the two and edit on the same screen. Also added blank states for cards as a prompt for users.
Changes Made to Creating/Editing Cards
Changes Made to Creating/Editing Cards
06 LOW-FIDELITY PROTOTYPE
06 LOW-FIDELITY PROTOTYPE
Low-Fidelity
Prototype
Low-Fidelity Prototype
Low-Fidelity Prototype
Access the prototype on Marvel here: Flash Lo-Fi Prototype
Access the prototype on Marvel here: Flash Lo-Fi Prototype
07 NEXT STEPS & REFLECTION
07 NEXT STEPS & REFLECTION
Next Steps
Next Steps
Next Steps
User Experience
User Experience
Create mid-fidelity prototypes and continue testing functionality and usability
Develop app UI and create high-fidelity prototypes
Conduct more usability tests to evaluate if Flash meets user needs and goals, and uncover areas for improvement
Assess app accessibility and make changes to improve inclusivity
Create mid-fidelity prototypes and continue testing functionality and usability
Develop app UI and create high-fidelity prototypes
Conduct more usability tests to evaluate if Flash meets user needs and goals, and uncover areas for improvement
Assess app accessibility and make changes to improve inclusivity
Reflection
Reflection
Reflection
This project was a good introduction to the UX design process. It gave me a hands-on approach to learning about each stage of the process and its importance. Prior to learning about UX, I didn’t think much about how and why websites/apps are designed the way they are. Now that I understand what goes into creating beautiful, user-friendly products, I feel like I have a newfound appreciation for it, and am super excited to continue growing my knowledge and refining my UX design craft!
This project was a good introduction to the UX design process. It gave me a hands-on approach to learning about each stage of the process and its importance. Prior to learning about UX, I didn’t think much about how and why websites/apps are designed the way they are. Now that I understand what goes into creating beautiful, user-friendly products, I feel like I have a newfound appreciation for it, and am super excited to continue growing my knowledge and refining my UX design craft!