LIMITLESS
With the development of mobile study tools, such as vocabulary studying apps, we find ourselves being able to much more productively fit studying into our daily lives. The downside is, however, that our learning styles are not created equal. Some people learn best visually, which works quite well with the current array of apps, but for others, typing a series of keys to enter a word's definition on a digital flashcard does not create nearly the same mental connections as putting pen on paper and writing, drawing, and annotating.
In this brief wireframing and rapid prototyping exercise, let's explore the possibilities of bringing analog inputs, such as handwriting and voice into a digital studying app...
...all without leaving the realm of paper and pen.
THE INSPIRATION
US Labor Market Growth: 1982 to 2019
US Born
Foreign
Over the past half century, globalization has changed the way the world operates. Companies are seeking an increasingly international profile, engaging overseas markets and using big data to understand intricacies of commerce far from their historical origin. Similarly, people, through the use of social media and the internet, are gaining an ever increasing exposure to other cultures and customs.
Curious to explore the world beyond what is close and familiar, more and more young professionals find themselves living and working abroad, seeking new roles, and advancing their careers. Between 1982 and 2019, US cities have seen an astronomical growth in foreign-born professionals from all corners of the globe. These professionals are trying to adapt to a new lifestyle, learn new languages, and advance their careers and, due to the diversity in their upbringing, are doing it via very different methods, on very different schedules, and for different reasons. This means that one-size-fits-all approaches to products that help them achieve these goals just won't work anymore.
The graduate courses he is taking involve a lot of advanced, niche vocabulary, which is particularly tough on Gunny since he is not a native English speaker. Additionally, he is a kinesthetic learner, most comfortable when he can draw, annotate, and diagram his definitions, rather than simply typing out words paragraphs. Unfortunately, this is hard to achieve with his hectic, fragmented commuter lifestyle.
PROBLEM
"Gunny needs a way to flexibly study niche vocabulary and pronunciation because he is a non-native English speaker seeking to successfully juggle graduate studies and career advancement with a busy personal schedule."
HYPOTHESIS
"We believe that by creating a flashcard app with custom analog inputs (such as voice, drawing, photos, etc) as well as a tag-based card sorting system (rather than fixed decks), we will achieve improving Gunny's vocabulary test scores by a full letter grade while decreasing needed study time by 2 hours per week."
The common thread in all of these is that in order to be successful, the study tool has to have
FLEXIBILITY
"GUNNY"
MEET OUR PERSONA, GUANYU YIN
One such individual is our persona, Guanyu Yin, although he prefers "Gunny". Gunny is an interpolation of the needs, goals, and personality traits uncovered over the course of interviews of real users from our target demographic.
▪ He is 25 years old
▪ He was born in Guangzhou, China
▪ Currently, he lives and works in Chicago, USA
▪ He already has a Bachelor's Degree
▪ His current position is a junior role in Business Development
▪ He is currently taking part-time graduate-level courses to get a head- start on advancing his career into management
▪ He has a 30 minute train commute to work and a packed schedule
MY ROLE
Due to the purely academic and theoretical nature of the exercise, I acted as a one-man team on this project, handling all of the research, design, information architecture, and testing. The latter was done with the help of several usability testers who gave some fantastic and eye-opening feedback on the layout and navigation of this theoretical app.
THE MISSING LINK
We know that we are looking for flexibility, but flexibility itself is a fairly vague and elusive term. To be able to evaluate what currently exists on the market as well as what we can bring to the table, we first need to narrow our search criteria to the following three parameters:
Flexible Content
Flexible Study Methods
Flexible Study Schedule
Keeping these parameters in mind, we looked at three very different, but very popular competitors in the vocabulary study market in to get to know our niche and find a point of departure.
One segment of vocabulary apps, represented by Vocabulary Builder, takes a more whimsical approach by letting the user test their knowledge with random vocabulary quizzes and giving them a "word of the day" to learn. These apps seem more geared towards helping their users tease their brain and pass the time on the way home, and are very limited in their level of customization for niche vocabulary study.
A more flexible type of study tool - one that is a true classic - is a flashcard app such as Study Stack. This app allows a user to create stacks with custom words and even download other peoples' stacks online, but only text can be used for words and definitions, and if one wanted to study some terms from one stack with some terms from another, they would need to create a new stack from scratch.
And a third, more modern approach is showcased by Magoosh, a highly successful name in the world of test prep. Their apps help both children and adults alike prepare for standardized tests such as the SAT and GRE by quizzing them on vocabulary found in those tests. This, unfortunately, is arguably the least flexible of all approaches, as it only works if you are preparing for one of the tests the app covers.
Vocabulary Builder
Study Stack
Magoosh Test Prep
In order to differentiate ourselves from the crowd and create a tool that would tangibly benefit Gunny in his continuing education endeavors, we decided to use the basic concept behind the flashcard app typology, but with the following expanded functionality.
CUSTOM ANALOG-INPUT DEFINITIONS
To be able to write, diagram, and annotate our definitions out on paper, then digitize and import them into the app.
VOCAL ANALYSIS AND CRITIQUE
To practice our pronunciation and use the app's analysis and grades to improve it.
TAG-BASED SEARCH SYSTEM
To automate the creation of flashcard stacks based on categories and subjects, allowing us to get to studying faster.
REINVENTING THE WHEEL
With new functionality, however, comes new confusion. After all, how does one introduce fairly complex and never before seen features such as vocal analysis to users who are accustomed to only the standard, bare-bones functionality of flashcard apps? Our mission was to make the process as clear and simple to understand as possible, and to do so, we dissected each into bite-size steps and pulled them all apart from one another. That way, the user could be given easy to understand triggers at every step that would guide them through the otherwise foreign process.
User Flow for Flashcard Creation
With Analog Definition
User Flow for Studying
With Pronunciation Practice
With the most complex processes defined, it was time to put them into context with an onboarding sequence as well as a navigation system. The latter in particular posed several interesting questions, as it needed to clearly allow users to traverse between creating and editing words, studying, and browsing words uploaded by the community.
Would a flat navigation that always indicates to the user which section of the app they are in be more advantageous, or is the valuable screen space saved by using a hierarchical navigation hidden behind a single, small, hamburger menu button worth the extra time spent navigating? How would the navigation through the creation of a new word or the initialization of a study session differ from the general navigation between different sections of the app?
The flat navigation reigned supreme. Its ability to visibly show the user where they are in the app was an asset to limiting confusion, which was a key advantage when introducing many other new functionality.
Sequential Approach
Flat Approach
Flat Approach +
The approach towards navigation began to change at this point as well. As the prototyping process began to integrate the user flow steps within each function into the overall navigational scheme, it became clear that users would not only need to move freely from "tab" to "tab" before starting a task, but would potentially want to do so in the middle of one as well.
This meant that there had to be an easy way to pause a study session part-way through, move to a different tab to create a new word, and then seamlessly return to their saved session where they had left it. All of this was built into the initial prototype and handed over to the users for testing.
USER FRICTION RESOLUTION
User testing revealed an interesting phenomenon. Even though the organization and user flows were logical, everything seemed to fall apart at the terminology and labeling of said functions. In other words, after several minutes of trial and error, as well as discovery and confusion, users without fail understood the functionality and began using the prototype with success. Doesn't seem so bad, right?
Wrong.
Research shows that, an average user's attention span is approximately 8 seconds. If that is all the time an app gets to make an impression, even one minute of confusion is one minute too long.
The original feedback for adding a tag was seeing it appear as a text string below the search bar. This method generated a lot of confusion, as tags would disappear from the main list as they were selected, and the X next to the text string was not an intuitive method of removing the tag. The revised version highlights the respective tag as it is selected, creating an immediate and much more organic feedback loop while helping the user spatially keep track of which tags are selected.
Reorganizing the visual hierarchy of elements on the screen to make the microphone button smaller, as well as adding labels, cleared up space to add a Pause Session button to both sides of each flashcard and made it much clearer to the users what the function of each element was. They no longer felt pressured to use the microphone if they didn't necessarily want to practice pronunciation, and the progress bar helped track session progress.
The functionality of the vocal grading system was already complex enough as it is, and the thesaurus-worthy terminology didn't help. The revisions of this screen focused on adding pop-up tutorial functionality, allowing users to select a sub-grade such as "Inflection" or "Diagraph Accuracy" and see an overlaid written explanation of what that particular word means and how that sub-grade is assigned to one's pronunciation.
Since the rapid prototype was made out of photographs of paper that were linked together and animated with the Marvel app, picking up the users' comments meant going back to literal, physical cutting and pasting to revise the prototype for another round of user testing.
While this prototype exists largely as a proof of concept for user flows and navigation of a highly analog vocabulary app, it poses some interesting questions as to the functionality of these new features. How would a system that grades your pronunciation actually work with custom, niche words? How would photographic data be stored, given how much space it takes up, and still be accessible in areas with low signal? How intricate could the analog inputs actually get?
If you are curious about the prototype, feel free to try it out for yourself below!