A NEED FOR CHANGE
With teens spending an average of six to nine hours on smartphones per day; a need for a shift in learning patterns and mediums arises. This creates an opportunity for vocabulary learning on the go. Applications have transformed our devices into language learning laboratories- creating flexible, engaging and focused displays of content.
Upon investigating, flashcard applications do lack one critical element despite how far they’ve come- stimulation…
To become an established application for vocabulary learning through gamification.
Differentiate from competitors through innovation.
Create a seamless platform to enable the user to have a customized experience, streamlined to their goals, strengths and weaknesses.
Methods of Research
KEY FOCUS AREAS
What are the challenges and/or barriers associated with app use and adoption?
What learning methods will help users retain vocabulary better?
What are pre-college teens needs? How are they being unmet?
Mid-fidelity and high-fidelity prototype feedback
WHAT’S OUT THERE?
Elevate, Magoosh and Brainscape are three vocabulary learning apps with significantly different approaches. Elevate achieves learning through gaming and stimulation, and a visually stunning UI.
Magoosh and Brainscape’s key features were their flashcards. Magoosh also had a gaming factor integrated (in multiple choice format) while Brainscape had a rating factor that increases the frequency of how often the word appears when revising.
I found myself drawn to use the Elevate app more based on its competitive game based interface (although I’m personally biased towards this type of method as it helps me retain best). It also has unique gaming features that help the user memorize vocabulary in a fun way, enabling them to spend more time on the app and gain more knowledge.
Brainscape definitely serves its purpose as a flashcard app, but doesn’t allow for much personalization of the flashcards. I much preferred Elevates method of a two-week trial period followed by a 40$ annual fee as opposed to Brainscapes, pay by bundle method. This creates a significant amount of friction between the user as he/she constantly has to ‘buy’ content.
I found Magoosh to be the weaker of the competitors of the flashcard apps, since its abilities are so limited, however its navigation bar is significantly cleaner than Brainscapes, and less distracting- giving it a competitive advantage.
DEMYSTIFYING THE USER
I interviewed a variety of candidates interested in learning vocabulary applications that hailed from different backgrounds and created a questionnaire that pointedly gave me more qualitative research. This helped me empathize with their situations and assess the different scenarios, breaking down the results into three categories- ‘doing’, ‘feeling’ and ‘thinking’.
Upon conducting user interviews, I could precisely pinpoint certain pain points users have, frustrations and use this to my advantage. How much time is a user willing to put in on average? What features can I include in the app that help the user retain better? What does a user enjoy when learning versus what makes the experience overwhelming or boring? More importantly, how could I empathize with these factors and evoke a better learning experience from the app?
Upon compiling the user interview data and research statistics for SAT test takers, I created a user persona that well reflected the type of user the app is built for. The hypothesis reached was;
We believe in employing learning techniques that are intuitive to the user and maximize efficiency. This includes a combination of ‘study mode’ which consists of a dynamic flashcard feature and ‘quiz mode’ enabling the users competitive spirit and ensuring engagement.
User improvement, stimulating and adaptive learning are key concepts.
BUT HOW DOES IT WORK?
USER FLOW DIAGRAM
When creating the user flow diagram, I identified two key success criteria’s needed when using the application. Namely:
Studying a new deck for new users
Learning vocabulary through game play
Creating a user flow map helped lay the foundation for potential features needed and what a user would particularly be looking for when trying to achieve a success criteria. It helped streamline the processes; for example, how many clicks does it take to create a flashcard?, can this be made more efficient and intuitive? Would this app have a central homepage- or would a user’s location be a question of what task the user is doing then? There were certain dead ends in the flow that had to be reconfigured to help the user reach a point of conclusion; for example- what happens after finishing a game? Where are you redirected? Eventually this was applied to the sketches shown for the prototypes.
THE PROCESS OF ELIMINATION
An integral part of the design process were the concept sketches- and the more variations the better! For Ninja, I created multiple versions of each screen and element.
I focused on several major screens and loosely outlined their elements to begin with, such as the splash page, onboarding screens, welcome screen, sign in and welcome back screens, search page, create a flashcard page, decks page, gameplay page (integrating two different types of gameplay) and user profile and settings page.
I considered several alternate designs when conceiving the navigation bar, from the hamburger, to an upper bar formation, and finally agreed on the five button navigation format currently shown below, with a central circular button.
MID-FIDELITY PROTOTYPE 1
I used Balsamiq to lay out these prototypes digitally, using the preset graphics provided as placeholders. This gave users a good visual indication of where text would go, how the app generally flows and the gestural quality of the app and whether that integration is intuitive to the user. I then connected the app via Prott and create a user flow that makes sense, pin pointing dead ends and inefficiencies.
APP FLOW MAP
The app flow map shows each screen and how the user flows through the app. This helped make integral decisions, for example when considering the gameplay page.- should this be a separate page, requiring an additional click or integrated within the same page for a faster experience? Do logo integrated splash screens have to appear every time a task is complete or does this hinder user performance? The use of Prott’s integrated timer allowed me to assess user reactions to waiting at a certain screen and if they were effective or not.
With a fully functional mid-fidelity prototype created through Balsamiq and made interactive through Prott, the app was ready to test. I created a usability test plan that allotted 15-20 minutes per person, and used the Nielson Norman Group scale to create my usability test report. By severity, there were some glaring errors, such as size of buttons, certain gestures missing, some functional errors- such as inability to edit flashcards etcetera. While this was nowhere near the UI I had envisioned for the app, it was an effective and efficient blueprint that worked better for testing than a lo-fi hand drawn prototype. This allowed me to create a version of the app that was closer to my vision, applying all the changes in a high-fidelity app design.
I annotated all of the feedback to have a visual representation of the changes to be applied to the next prototype, identifying key functionality and UI issues.
REENVISIONING THE UI
Since the app consists of two main aspects- work and play- I wanted the UI to reflect this switch in ‘mode’. When learning, the UI is clean and light, making the color story of the interface conducive to ‘study’- using a white background with dark lettering and gradients of red and orange for the accessibility buttons.
When the user is in gameplay mode, the app shifts to a dark UI, using gradients of blue and purple to reflect a mood that is active, stimulated and competitive. The blending of these two color schemes helps differentiate aspects of the app, shifting tone to help the user switchgear.
EFFICIENCY IS KEY