Flashy, a vocabulary learning app


My first UX Case Study

Image alt tag

My Roles: UX Researcher, Information Architect, UX designer

Project Duration: 8 weeks

Tools: Sketch, inVision, Pen & Paper

Team: Individual with the supervision of a Senior and Mid-level UX Designer.

Challenge:

How might we help people to memorise new vocabulary?

This was my first UX project ever, and I was thrilled. Even though I thought I grasped what UX was about (which I clearly didn't), I still had very little idea of what a UXer did on a daily basis. Were they discussing all day long what features to include? Were they telling off others for not understanding their vision? Were they taking part in business meetings with business tycoons to explore new strategies and concepts? It turned out that some of this was true (albeit the telling off) but I was missing the most important part. A UX designer had to solve a human problem, something people were frustrated with, and bring peace and calm to the universe. So before merrily soldiering on into the battlefields of UX, I took some time to review the process that I was to follow.

1. Empathise

Formulating a hypothesis

My first task in the process was to formulate a hypothesis to help gain a clearer vision of the concept. As I learned, hypotheses were in the end hypotheses, and they could be disproved or revised in light of new observations.

Hypothesis:

   People need a way to learn and review vocabulary  in order to learn a foreign language.

   We will know this to be true when they will be users will be logging in regularly to review vocabulary.

Flashy: a vocabulary learning native app.

Competitor Analysis

To verify my initial hypothesis, I started by analysing 4 vocabulary learning native apps for IOS and Android. I wanted to choose not only market leaders (Memrise), but also some lesser known apps with interesting features.

What did I find?

  • None of the apps had an import option for importing apps from different sources e.g. Excel sheets.

  • Most apps had a gamification experience to make flashcard learning more engaging.

  • All apps allowed or had their content organized by category.

  • Some apps did not have a feature that helped review important words.

Flashy: a vocabulary learning native app.

User Interviews

But it didn't make much sense to build a product and hope for it to solve a problem if I didn't reach out first to the centerpiece of the challenge: The people. Why were they learning new vocabulary? What were their challenges? How did they feel? What did they do? I carried out 3 user interviews with Karina, Joe, and Andrzej.

What did I find?

  • Karina understood that the process of learning was difficult and challenging.

  • Joe felt he learned best by doing.

  • Andrzej felt excited and accomplished when he had mastered a new word.

  • Coming back to Karina, she thought that a mix of activities would help her best in her learning.

It would have been great to conduct a survey at this stage!

Conducting a survey would have helped me gather quantitative data as to further validate my insights but I lacked the time nor the skills at the time to do it. With hindsight, I realise that in a given project there is not always the time nor resources to dive deep into a step of the process. However, it is the designer's responsibility (as well as other stakeholders') to call for the right shots.

2. Define
Martyna, a persona

Martyna, a persona

User persona

The insights interviewees had given me, allowed me to create a user persona as to reconcile business, technical, and design capacities as well as to help me maintain focus on the user I was designing a solution for.

Flashy: a vocabulary learning native app.

Customer journey map

But what was this persona to do when they were using the app? What features would I ideate to solve their needs and minimise their frustrations? For this, I created a journey map to visualise the steps Martyna would have to go through to accomplish a task.

Martyna:

Martyna: "As a user I want to not down different uses of use in context."

User Journey

Creating user flows would allow me to visualize which concrete steps from a given entry point, a user would have to follow to reach a certain outcome. So I created user flows, one such in the example to the left, which illustrates the feature of highlighting one of a few available examples for a given word.

All in all, this was my last step of building the information architecture of the app. With the features of my app in place, I could dive right into the next phase of the design process, which was the ideation of low-fidelity and mid-fidelity wireframes to later be assembled into a clickable prototype.

3. Ideation
Paper wireframes, namely: home screen, Game screen, Flashcard Screen, Requesting information on onboarding screen.

Paper wireframes, namely: home screen, Game screen, Flashcard Screen, Requesting information on onboarding screen.

Low-fidelity wireframing

I started off the ideation process by creating wireframes with pencil and paper. these were my low-fidelity wireframes that I would then turn into Mid-Fidelity wireframes.

Mid-fidelity wireframing

Once I had created my low-fidelity wireframes, I then created some mid-fidelity wireframes  My purpose was to make them as realistic as possible but without implementing the UI design.

4. Prototype

Yes, this is the real thing where participants get to interact with in the user testing! Have a go at it yourself!

A prototype!

My work was finally bearing fruit! I was gaining insight into the peculiarities of UX design! I created a prototype with my mid-fidelity wireframes and abracadabra, here it was: The prototype! It had three main features, namely:

  • Intro Screens, Set Up information questions and onboarding. 

  • Viewing or reviewing flashcard sets (a set being a group of flashcards grouped together by a common theme, e.g. Fruit)

  • Add a Flashcard set created by another user to the home screen.

  • Create an account (this is not really a feature per se, but I wanted to see how user would react when prompted to create an account in exchange for value).

5. User Testing

The final day had arrived- the user testing day! Now it was the time to find out if any of my work made any impact on the users and if they would be able to manage their way through the app. For this, I created three tasks for them to complete:

  • Access the app and review a vocabulary set.

  • Edit a Flashcard and include an image.

  • Highlight one of the examples given.

  • Add a set of flashcards to the homescreen (and sign up when prompted).

Here are some of the issues I found.

Flashy: a vocabulary learning native app.

Issue 1: Adding more definitions (Low severity)

“What if words have more than one definition (polysemy)? It would be nice to add more defintions.”

After receiving this feedback from one of the participants, I decided to create an edit option to add definitions with the copy “Add secondary definition”.

Flashy: a vocabulary learning native app.

Issue 2: Users are not sure what to do once they get to the home screen (Mid severity)

“I don’t understand what I should do next once I’m on the dashboard”

2/5 users felt confused as to what to do when they first landed on the home screen. For this reason I created a small onboarding process to quickly explain two features that users could accomplish once they were on the home screen.

Flashy: a vocabulary learning native app.

Issue 3: Users would like to review all cards at once (Mid severity)

“How can I play a memory game with all of my flashcards at once?”

One of the users pointed out the necessity to review all words at once, if they were to study for an exam or just because they desired to do so. One of the ways I envisioned to address this was for me to add a game feature on the menu if users want to play with all their flashcards, by themselves or challenge other users.

Conclusion

My participants gave me incredible insights, but they all wanted to add ideas of their own, and some of them were quite valid after all. But I had to keep focus as to not increase the complexity of the app. For this, I decided to focus on the main features of the app while suppressing extra features.

Final thoughts

I finally discovered what a design process was like! Having built this app I thought that I could build anything. But as future projects would prove, having an understanding and being able to apply the process is paramount to UX but not the end.

Applying tools and processes were great ways to solve a challenge, but in the end, they served the purpose for the UX designer to call the right shots. It is in the end the designer's judgment, as well as the other stakeholders', to make the right decisions that will enable them to achieve the desired outcomes.

Like what you saw?

Let's share ideas & discuss ways to collaborate!