Overview: Flashly is a vocabulary app specifically designed for people to conveniently yet effectively learn new terms through visual and customizable learning as well as competitive social features. Flashly focuses on professional/career-related decks so users can learn the relevant vocabulary they want to apply in their lives.
Roles: UX Researcher, UX Designer
Company & Project: CareerFoundry UX Design Program: Intro Course
Timeline: October 2020 - November 2020
To begin my research, I compared three different vocabulary apps to analyze strengths and weaknesses. This process helped me to start gathering ideas for my app and evaluating the competition to have a better understanding of the market.
Findings visualized and summarized below.
A simple, intuitive flashcard app to study vocabulary quickly. The diagram cards with the conceal/reveal option are a unique and fun feature.
It may take a while to make all the flashcards as there are no pre-made decks. Another drawback is that it does not track progress so users may not want to have this as their primary method of learning.
This app has a pleasing design with a well-tracked and visualized learning process. Tailored studying from user feedback and friendly competition can help motivate users. Through the class system, users can immediately start studying instead of having to make their own decks.
The main drawback would be for users who want a simple tool to study quickly as all the options may be overwhelming.
This is another simple flashcard app but unlike Flash Cards Go, deck progress is visualized. It features the option to share/download folders which is useful so users don't always need to create decks.
The main caveat are the obnoxious ads that could distract users from learning. Additionally, the interface design is not very appealing.
After conducting app research, I then conducted user research. I chose to conduct user interviews as I love directly interacting with others and felt it was a great way to learn how they study and what their needs for a flashcard app would be.
My primary aim was to better understand how people approach learning a new subject and vocabulary.
See the interview script and questions here.
From these interviews, I created a user persona to design my app for. Meet Liam!
Liam is a young professional who wants to learn relevant vocabulary for his career field so that he never feels confused communicating with others at his job. He's very passionate about work but also prioritizes social time and friends.
Liam needs a way to conveniently but effectively learn new subjects and vocabulary because he wants to make a good impression on others, excel at his job, and still have time for his personal and social life.
I will know this to be true when Liam is learning new concepts without sacrificing excess personal time or work performance.
By building a flashcard app with professional/career-related decks and competitive social features as well as visual and customizable learning, Liam will be able to advance in his career while still staying connected with others.
Task: Download a pre-made deck of vocabulary terms and customize the deck by adding personally-made cards.
Entry Point: Open application
Success Criteria: User downloads pre-made deck and creates additional card(s).
Task: Connect social media accounts to compete and learn with friends/others.
Entry Point: Home Screen
Success Criteria: User sees lists of other users’ progress to can compare to their own progress and begin competitive learning/games.
To brainstorm ideas and focus on core functionality, I sketched wireframes with pencil and paper. Creating these rough drafts helps me to start building the app without being distracted by the nitty-gritty interface details.
You can see some of my initial wireframes below. Feel free to check out my low-fidelity prototype if you're interested!
Once I created a prototype, my next step was to test it out. While I felt shy showing my app to others (especially just basic sketches), this was a necessary and insightful part of the process to improve my design.
SCOPE: Testing the basic functionality of vocabulary app called Flashly
SCHEDULE: Online or in-person on 10/27/2020
SESSIONS: Three test participants interviewed for 10 - 15 minutes each
EQUIPMENT: Notes were taken on my computer and the app was tested with the user’s phone
METRICS:
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 on the project
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 the product can be released
DIRECT TASKS:
1. Sign up / log in
2. Download premade deck
3. Create a personal flashcard to add to the deck
4. Connect social media account to challenge a friend
SCENARIO TASKS:
1. You’ve heard about an app to learn career and business vocab with friends. You want to try it out so you download the app and open it for the first time. Sign up for an account to begin.
2. UX is a career field you’ve been hearing about and are interested in learning. Find the premade UX deck to download.
3. You have an image of a useful UX-related chart saved that you want to use to study. Create your own flashcard with this image to add to the deck.
4. You remember your friend, Alex, using this app who’s also interested in UX. Connect your social media account to see who else is learning the same deck(s) as you. See their progress and then challenge Alex to a quiz to motivate each other to learn.
I specifically chose these tasks to test because successful initial use of the app (essentially a good first impression) and successful social studying features are what will draw users to Flashly and keep them happy!
I selected three participants from my target audience, people very similar to my persona Liam, young professionals in their twenties. From the test, several key issues were pointed out regarding signup, onboarding, download and add features, create options, navigation, and connecting accounts. See findings in my report below.
On the left, we have the signup and registration screen. Initially, users had to signup with their email (which was a pain mentioned during testing) but now can signup through email or a social media account which can also help speed up the process to start studying with friends sooner!
On the right, I added coach marks to clarify the instructions on how to proceed with the onboarding screens after some some test participants were confused how to proceed through the onboarding process.
More feedback and revisions from test participants:
See these revisions implemented below!
During this process, there’s been a lot of learning and not just vocabulary, but also the ups and downs of designing. For me specifically, some key things I learned were:
Any input can inspire a solution, even if it’s not immediate.
Asking the right questions is essential to getting good feedback.
Clear instructions and context make a difference.
The next major step would be getting critiques on my high-fidelity wireframes. I'd also begin fleshing out the user profile and settings, the feature to create multiple cards, and the scoreboard.
I would then test my high-fidelity prototype to provide participants a more realistic feel of my app. From this, I can gather more data for further iterations and improvements before hand-off.
