GOAL: To design a vocabulary app to facilitate learning new languages effectively. The idea is to build a native app for convenient access on mobile phones such that it would enable people to learn on the go.
PROBLEM STATEMENT: How Might We Develop a Vocabulary App that Enables Users to Recall in Context by Taking Control of Their Own Learning Style?
MY ROLE: UX research, Design and Usability Testing
DURATION: 3 months
Process in a Nutshell
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/70189227-fca1-4cdb-a6a4-6238116396d8_rw_1200.png?h=f5990d97fcc4b7c2f9dd4a95f4b0eab4)
Market Research & Discovery
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/35482847-122c-4683-9bea-94cc883a833c_rw_1200.png?h=aedd8c4f7367dc18e66b767d6d0e4afe)
User Interviews
Next, I searched for potential users and interviewed 3 users. Below is an example persona. Based on the data gathered from each user, I listed what each user was thinking, doing & feeling.
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/0951e6c7-9f83-4d10-b683-8e149a821646_rw_1920.png?h=1030873d07fc29525efed6aa1c6726e1)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/19529846-61e0-4c9e-b302-aed7d1e8ffb1_rw_1920.png?h=b1b6fb1d166d2ca36d756c05c6607a64)
User Flows
I created 2 user flows, 1 for creating a new lesson and another one for creating a new flashcard deck.
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/f648c61f-8749-4b56-8a73-be4adedf01c8_rw_1200.png?h=abcdf799e9333bcf56d6e6561f5bea3f)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/c39ea0af-3433-4994-8583-36d43aa36498_rw_1200.png?h=8accef6d58754c9e2f1bc8c7fec7e7a4)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/65ba8e25-e79c-4b68-8b33-d930403e4e7a_rw_1200.png?h=936a11197dedbd21f7948add285a7e54)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/d696467d-3538-4237-bb6f-22400ad45b8c_rw_1200.png?h=8fbc36649092767cd72ae862bd0c5707)
Ideation
Paper Sketches
I sketched out the first user flow to show how a user at beginner level would navigate through the app ton learn new words or conversations. From my own experience of learning French language through in-person classroom teaching I know that short conversations can really help expedite the learning process as they help you to recall words and phrases in context. I wanted to mirror the same approach in a vocabulary learning app.
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/a4fc0064-909e-4c23-bda0-c097442acde6_rw_1920.png?h=5c6d07f48ae01d0da49a12cd3f857656)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/a888c5d1-1bae-461a-998e-faaea5af31ea_rw_1920.png?h=492697458c1c71609862becad0f1007e)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/e6fe07f8-234b-43c5-9ae0-c95fe7132ac6_rw_1920.png?h=70409d087a090ceb791faa5085cf4177)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/3ac9ac84-b7e6-4d78-9352-809120cc90e4_rw_1920.png?h=3cc3bfa4061ead7fe48d68b62100bed5)
Usability Testing
Testing the Low-Fi. Paper Wireframes
I uploaded the paper sketches into Marvel and assigned hotspots on individual screen for the first user flow- Creating a Lesson. The flow basically started with- Selecting Words or Conversations-- Choosing and item to 'Add to List'--Creating a Lesson from the List. I conducted tests with 3 participants. Each session lasted for 10-15 min. For measuring the errors, I used Jacob Nielsen's Error Rating Scale.
Direct Tasks:
1. Onboarding & Sign In
2. Click on the Available Categories to start Learning Words/Phrases
3. Save Liked Items to List
4. Create a New Lesson
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 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 product can be released
Revised Sketches
Based on my observations of user interactions with paper prototypes, I made the following key changes to my paper wireframes.
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/04794ce2-1f16-43a1-b8e0-27fc9a5efb38_rw_1920.png?h=b44dfd6c19c98d11f6c2bf7298798a09)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/cfcd66a1-d29d-47eb-99cf-e4640d602dd2_rw_1920.png?h=c779a72d1c4de0cc98448d33191cb0b2)
Mid-Fidelity Prototypes
The next step was to transfer the drawings onto a higher fidelity version. I used Balsamiq to develop mid-fi prototypes based on each of the 2 user flows.
![Welcome to Linguit](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/10f75408-6ea2-4dad-b4be-a6ae7e0719e7_rw_600.png?h=11904da519ccb958d22880436d6ee976)
Welcome to Linguit
![Sign up page](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/d228329d-22db-4b60-b5a9-f5bf1ff693b4_rw_600.png?h=051099fc923b2dfee4ddd7b2f595a456)
Sign up page
![Select Language](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/15d82fc5-8da9-4229-bc3b-91a094a29eb0_rw_600.png?h=a1f0e50eb36829d6ebee27c922870c06)
Select Language
![Select Level](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/2a22a045-6b66-41c1-b1b3-b5bd5c06b33c_rw_600.png?h=41dc019ee8d53d15bedf4b8ce246df97)
Select Level
![Confirmation](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/e150b205-4bff-44d6-a5bf-615cd13a0115_rw_600.png?h=308885f42e16076c7abb6f35e6e5f362)
Confirmation
![Sample Lesson](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/0b9ee0d5-f25a-45fd-9572-56aa0dfd13f7_rw_600.png?h=2941f438ddae794689849126670c113a)
Sample Lesson
![Exit Sample Lesson](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/637ed9d6-8281-4496-8639-f734a26d01f7_rw_600.png?h=79e381e8688fad46247de0773830b1b2)
Exit Sample Lesson
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/20e9f173-0567-4257-aaea-5614e2c0071c_rw_600.png?h=318016a9470a2818cef81aa3fad97d49)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/da954b39-13bf-4c6f-b12b-6814b98c1380_rw_600.png?h=5fc55df1a98330b2cefd91ca24466733)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/dbcb91de-ca84-4451-9de5-a07ca33f9e22_rw_600.png?h=b529a2179f8c18d91242c6e9a852f405)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/9043141d-0033-49e4-bb99-9fc5ba0746e1_rw_600.png?h=462aab8061e3fede700812e9c1f352aa)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/66ff251b-1fdc-40dd-bec3-827e717b523a_rw_600.png?h=215c5e03766a64ffe9d7a645c420d2a1)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/e7431ac1-f615-4a2f-b928-ff3e2c7d73a4_rw_600.png?h=9f7a0ffa57623fb6eff02e00f4ed62cf)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/a219e8b4-0b85-449e-8916-e060fcb7dd31_rw_600.png?h=83c78820341dbbc3cfa9a9bbc3caa335)
Video-clip of testing Mid-fi Wireframes
Observations
- There should be a "Back" button at the end of the Sample Lesson.
- Having both- the 'List' and the 'Lesson' were confusing. Most users felt that the two could be combined.
- A few users did not understand the significance of ‘My Flashcards' vis a vis 'Create New Decks' on the home page.
- All users would like and easier and quicker way to practice the items that they have saved.
- All the users loved how they were asked to select 'levels' at the time of Onboarding.
- They liked how learning was split into 3 main categories- Words, Phrases and Conversations
- Pictures and visuals could be helpful and make the app more interesting and attractive.
High Fidelity Prototypes
Onboarding
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/247b9721-a86e-4143-8a1e-1218888508f6_rw_600.png?h=1c2c19cb15533283174d8341a1fe245c)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/dc196693-04fc-4ba5-bd95-f96bcb64f9e1_rw_600.png?h=05445e781bfff53242e5e2d5b79d6d36)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/874b4cd2-90c8-44f5-a2d5-0f9fe89d8a2a_rw_600.png?h=54521edd15ceb6b6e94e8bbcd6493d00)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/4e2b8e58-20e3-4352-88fa-8c57cc29346f_rw_600.png?h=1af25cbed9688db7229f3385f364f2de)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/0a6daceb-2eac-4cf4-9d49-edab7764c635_rw_600.png?h=59af4bda93e59ef465ff6d9739b1a46a)
![](https://cdn.myportfolio.com/e2d98829-3e82-43c3-a6f4-e715107b4852/4fc910d2-507c-43a2-94f5-83dcb8abf12f_rw_600.png?h=897adf7959a2b461920d8f78d648a09b)
Next Steps
- Flesh out the remaining user flows in high fidelity
- Continue testing them out with more users
- Hand-off to developer