Flipped

A virtual learning space is where some individuals learn most efficiently because it gives them some element of control over time, place, path, and/or pace. This project was one of my first projects in the UX Immersion program where I was assigned to create a flashcard mobile app. This UX approach involves focus and repetition so users can retain their knowledge in the long term and hopefully motivate users to incorporate lifelong learning in the palm of their hands.   

Goal

Develop a mobile app experience that impels users to learn new information, such as terminology, through a gamified approach and simplify learning with self created flashcards. Users can also discover existing card sets on the app instead of creating their own. 

Role

UX/UI Designer

Duration

March - April 2023

Tools

Figma, Marvel, Mockup app, Google Suites

User Research

Competitive Analysis

I analyzed 2 different flashcard mobile applications’ strengths and weaknesses to create a more compelling product. Both create strong engagement through their easy-to-use features for creating flashcards and gamified approaches. There are a variety of learning styles that can cater to different people besides repetition, such as true or false and quizzing. Lastly, a flashcard app has the potential to diversify users’ learning through specific subjects.

Strengths
- Rich community-based learning and gamified approach
- Organized UI
Weaknesses
- Too many ads
- An upgrade is required for various features

Quizlet

Established in 2007, it a multi-national American company that provdes tools for studying and learning.

Strengths
- Gamified approach, and Home and Discover pages offers variety of learning subjects
Weaknesses:
- Followers feature has low potential of being used and home page has too many distractions

Kahoot!

Established in 2013, it is Norwegian game-based learning platform, used as educational technology.

User Persona

Creating a user persona was one of the ways to understand a user’s motivation better. My persona, Ulysses Gomez, characteristics and insights were based on my survey and interview questions.

Meet Ulysses!

Mapping the User Journey

The two main features I planned to test include: creating a flashcard deck and to discover an existing flashcard set by category. Therefore, user flows are created to visualize how I expect them to navigate the app.

Ideation

Sketches

The ideation phase can particularly take a long time, therefore, I used the 6-8-5 brainstorming method to come up with new ideas and explore ways to solve the problem at hand. The 6-8-5 sketch method was an efficient way to generate 6-8 ideas within 5 minutes each time. My focus was on detailed solutions rather than spending a lot of time trying to come up with the "best design" and I ended up coming up with several ideas that solved the problem as quickly as possible.

Wireframe

Low-fidelity Wireframing

I created low-fidelity versions of the application in preparation for the prototype. I chose the best sketches from my brainstorm method and laid out how users navigate through each flow with my iPad. I also used the Mockup app to organize my sketches.

Test

Usability Testing

After I gathered enough user research and design, I recruited similar participants to my user persona to test Flipped features and user flow. I created a clickable prototype with the Marvel app and tested 2 user flows - the first user flow is to create a flashcard set and the second user flow is to discover an existing flashcard set by category. 
The usability test was carried out with 3 participants. I chose a low number of participants because I was confident I would still capture diversity in my user group and have time efficiency. Two were performed virtually and one was performed in-person. In summary, I gained overlapping insights and discoveries with my participants. 

Testing Feedback

The results were analyzed with Jakob Nielsen’s Severity Rating Scale. I received valuable feedback that were positive and negative. Positive feedbacks included simple user flows, category selection in the discover page, and the gamify approach of flashcards. Negative feedbacks included confusion in icons and information architecture.

Feedback 1
Problem: Unclear of how to save the created set
Solution: Add save button on screen
Severity: 3 (major problem)
Feedback 2
Problem: Drop down icon does not flow 
Solution: Modify icon to a Back icon
Severity: 2 (cosmetic problem)
Feedback 3
Problem: Unclear of what the bottom half of the screen entails
Solution: Add description and place it at top of the screen for better information architecture
Severity: 3 (minor usability problem)

Prototype

High-Fidelity Prototype

After receiving feedback, I built a high-fidelity prototype using Figma and created a minimalistic study card app with a fun gamified approach. Flipped lets users discover their preferred approach of learning with a set of personalized cards.

Here's a snippet of a few  UI screens users may encounter when creating a new set, saving a new set, and browsing for a specific category.

Reflection

This mobile app project is aimed to motivate users to learn through an active recall and gamified approach. Flipped can be accessed anywhere and anytime where there is mobile service. Individuals similar to my persona, Ulysses, can continue to learn with the control over their time, place, and pace. It has an empowering effect on users to advance their learning by personalizing their card sets, or learn new information by browsing existing card sets in the Discover page. Flipped has the potential to become a fundamental app for users succeed in their educational endeavors, regardless of their educational stage in life.
While I am confident Flipped is a good learning app, I could consider increasing my participants for the usability test. The value behind that is to cover any other flaws or further improve the app. I received invaluable feedback from 3 testers that I believe if I had at least a couple other participants, I may notice new patterns or insights. A challenges I faced was the ideation step, where I typically spend a lot of time sketching. Although it was very time efficient to incorporate the 6-8-5 brainstorming method, I found it challenging to come up with several creative sketches to solve the problem within 5 minutes. Nonetheless, I plan to continue to practice this brainstorming method so that I can practice coming up with solutions quickly. Flipped has capabilities of being a stronger app through more usability testing and iterations. With that said, I may revisit this app one day to add increase accessibility and include more UI features like motion design.