Study Aid is a mobile app that empowers people to learn new vocabulary. Users will be able to create and download flashcards that helps them retain information in a more efficient and fun way. Additionally, users will be able to upload pictures from their phone's library when creating flashcards. User research showed that this feature was especially appreciated by medical students. 

For this project, I was responsible to conducting competitor and user research, user personas, user flows, wireframing, prototyping, usability testing and interface design. 

Overview

Students are confronted with an overwhelming amount of information and new vocabulary that they are expected retain and recall in a short amount of time. This added stress leads to poor revision techniques and consequently exam performance for some students. The goal of Study Aid is to provide a solution to this problem commonly faced by students, by providing them with the opportunity to create their own custom flashcards in a fun, easy way that makes revision easier and less intimidating, therefore empowering them to learn and retain information wherever they go.

Competitive Analysis

Why

I examined the functionality and usability of three mobile applications that claim to aid vocabulary building (English language only). The analysis discusses the pros and cons for each app, and discuss the features that enhance of diminish their UX and UI, and to what extent are they able to meet the needs of their users.

  • Vocabulary Builder from Magoosh

​Pros

  • Categorical division according to test type level of proficiency makes it easy to navigate the app

  • Audio pronunciation of the words especially helpful for non-native English speakers

  • No need to sign up

  • Signing up fairly straight-forward

  • Using words in a sentence help with understanding

  • Words you get wrong appear more frequently during quizzes to help learning 

  • Gamification incentivises learning and using the app

​Cons

  • The quality of audio is very poor 

  • No phonetic transcription of words, which is crucial for users with impaired hearing

  • The "syncing questions with the web version"feature is hidden in the Settings menu and is confusing to navigate and understand

  • The tutorial at the sign-up stage elongates onboarding unnecessarily

This app is targeted towards students looking to build/revise their vocabulary for the SATs, IELTS, GRE, and other standardised tests, and it does a pretty good job at doing just that. It is very easy to use, is clearly divided into different categories, and the gamification keeps the user interested. The list of "Other Magoosh Apps" in the Dashboard, in terms of Magoosh as a business, I found a very smart move. Five different but related study apps (including GRE, TOEFL, and Study Timer) all by Magoosh are listed, and tapping on their icons takes the user directly to the app-store where they can download these apps easily. In doing so, Magoosh has done a good job at integration and targeting their market. The UX and UI of Magoosh is very straight-forward and easy to navigate. The app allows users to learn new words based on their study needs.

 

However, when using the app for the first time, users are asked if they are studying for a particular exam, for which the option of "No exam, this is just for fun!" is given for users such as myself. When I clicked on that option, I was expecting to get crosswords, word-puzzles or random vocabulary tests which combined the vocabulary of all the various test types, but I had to choose between the GREm GMAT or IELTS vocabulary, when that is not what I was expecting. Adding the option of "No exam, this is just for fun!" is misleading, and limits the target audience to current students of standardised tests only. Secondly, while the option to play with other users is a fun option, there should however be an option to play with a user's friends as well, as opposed to only random people. 

Over all, using this app was fairly easy. However, in terms of UI design, the grey on grey contrast for text, and the lime green and buttermilk yellow prompts, make it difficult to read. Another important oversight was not adding a swipe feature, instead having to click on the back icon on the top left to go back.

  • AccelaStudy Vocabulary Builder

​Pros

  • The app is interactive and responsive with no lag times

  • Users can use the app without signing up, and signing up is quick and easy

  • Good quality audio pronunciation of the words (helpful for non-English speakers)

  • Use of words in two sentences helps with the understanding

  • Users already know how many words are there in a quiz before starting 

  • Multiple study options (including "Handsfree") 

  • Customisation option by creating own study stacks and focusing on specific vocabulary categories (adjectives, nouns, verbs)

​Cons

  • No phonetic transcription of words

  • No tutorial option, only a very lengthy user guide in the Settings menu

  • No option to directly mute the audio pronunciation by tapping the speaker icon on the flashcards, instead users have to go in the Settings menu to mute/unmute

  • Free version of the app only has 100 words; paid version has 2100 words

  • No gamification makes the app boring after a certain point

  • In 'Flashcards', tapping the screen reveals the definition of the words, and swiping left or right for a new flashcard also displays the definition of that words by default, not the word itself

This app is targeted towards students looking to expand their vocabulary for GRE and GMAT tests. In such, the app succeeds in meeting the goal of its users. The free version of the app has limited functionality, however, with only 100 words to prepare from. 

The "Prepare" section lets the user track his/her progress, gives the option to create and access personalised study sets, and focus on either adjectives, nouns, or verbs (or all three) from the words stored in the database. The classification of words as adjectives nouns, and verbs is a feature that is absent from other similar apps. The "Learn" section provides four different methods to learn the words in the database. First is the "Study" option, which gives users a word, its classification (noun, adjective, or verb), its definition, synonyms, and two example sentences. The "Spaced Repetition" section displays a word, and the meaning appears after tapping the screen, and users can choose a tick mark or an X, depending on whether or not they got the definition right. Third, the "Flashcard" option displays a word, and tapping the screen displays its meaning. Lastly, the "Handsfree" version is audio-based, and it dictates the word and its meaning (for when you're driving, jogging, or just relaxing). All these four options have their own utility, and cater to the needs of several different user types in different scenarios and contexts. 

Design wise, the UI of the app is aesthetically pleasing. The font is legible, practice words are typed in bold, and the crisp contrast of black font on white background gives a clean, minimal feel. The onboarding process is very quick, and optional sign-up option allows immediate access. However, same as the Magoosh app, there is no swiping feature to go back a screen; users have to tap on the top-left corner of the screen, which is slightly inconvenient. Additionally, no gamification makes the app boring to use after a short while. Seeing how the app is primarily geared towards students, only providing them with 100 words in the free version and charging them for an additional 2000 words seems unwise, as there are other substitute apps in the marketplace free of cost.

Overall, this app is much more interactive than "Vocabulary Builder from Magoosh", with a much more crisp and updated UI. Not providing a tutorial option (perhaps at the beginning of each of the four learning methods) makes the app a little difficult to navigate at first, as the user guide in the Settings seems laborious an excessive. Nonetheless, despite the word limitation, no tutorials, and having to go into Settings to mute/unmute the audio, the different learning techniques, the customisation of study sets, and the option to store progress on the cloud which can then be accessed from different devices make this app fun to use. 

  • GIKI Vocabulary Flashcards

​Pros

  • Excellent gamification makes the app a lot more fun to use. The user knows how many points they currently have, and how many points are needed to unlock the next level. Word memorisation games are timed, encouraging users to beat their own time in proceeding rounds, and collect Giki points along the way

  • The approach to word memorisation is different from the aforementioned apps: Word Root method, along with synonyms, antonyms, definition and example sentences of every word make it a unique app

  • Progress bar at the top of the screen shows user progress and when each level is about to be completed

  • Three different vocabulary memorisation games: "Matchlosopher"(matching antonyms), "Synosaurus"(choosing synonyms), and "Anagramy" (scrabble-like game)

  • By signing up using their Facebook accounts, Leadership tab in the "Progress" section ranks the user and their friends based on how many Giki points they have

  • Phonetic transcription of the words

  • 30 levels to unlock in the free version

​Cons

  • Alarm pop-up every time a user opens the app, which quickly became bothersome

  • Mandatory sign-up 

  • Unlocking each level is time consuming, therefore, the app may not be best suited for students trying to cram vocabulary before an exam

  • No audio pronunciation of the words, despite the speaker icon 

  • No search feature to look up words

Giki Vocabulary Flashcards is a colourful and interactive app that focuses more on learning than word memorisation. Through Word Roots, it helps users in learning certain prefixes and suffixes, allowing them to correctly work out the definitions of thousands of difficult words without having seen them before. Each level can only be unlocked by learning a set of new words and testing that knowledge in different word memorisation games to collect enough Giki points to allow moving on to the next level. 

While signing up is mandatory, signing up using Facebook or Google accounts make the process fairly quick. Using bright, non-study related pictures during onboarding make the app seem less intimidating as it didn't give off a "studying" vibe. The use of colourful images and animation (e.g. confetti drop every time a user completes a level) made the app a pleasant experience. The UI is very clean; white font and colourful illustrations and animations on a black background make for a good contrast and user experience. The app is also very easy to navigate. It can be seen that the designers intended for this app to aid in a deeper understanding and learning of the English language, as opposed to providing an app for quick memorisation. The choice of words on the tabs ("learn", "grow"), the Word Roots method of learning, providing synonyms and antonyms, all point to Giki's efforts to aid a holistic understanding of the English language. 

However, a mandatory sign-up feature increases the time before users can get in the app and start using it. Allowing users to use (at least) some features of the app in guest-mode would allow them to get to know the app before deciding if they want to continue using it or not, and make an account. Secondly, the constant pop-up of "Set an alarm" to "remind me to study" at a certain time seems forced and intrusive, and very unnecessary. Nonetheless, the overall experience of using this app was fun and engaging. 

User Research

User Research

Key learnings:​

  • All three interviewees said they learn best by writing things down 

  • Two of the three interviewees said they prefer to study alone

  • Flashcards are a quick, efficient way to revise words/concepts

  • All three participants really stressed on the importance of making their own flashcards

  • The option to customise flashcards using different fonts, colours, and backgrounds, and to have them neatly organised in separate folders was a common theme in all three interviews

  • Two of the three interviewees thought adding quizzes (MCQs, true/false) was an important feature to help with memorisation and revision

  • All three interviewees thought virtual group study via communal sharing of flashcards is a nice (and important!) feature, if executed correctly

  • Two interviewees felt a difficult-to-use-and-understand app would be counterproductive and frustrating

  • The option to customise flashcards would make the app more fun and interactive

Things to consider, moving forward:

  • Make your own flashcards by taking and uploading pictures of own (hand-written) notes and turning them into flashcards, with the option to customise them through different fonts, colours, backgrounds

  • Search feature to cut down time spent looking for relevant words and/or flashcard(s)

  • Gamification very important (MCQs, true/false, match synonyms and antonyms etc.), with the option to attempt the quizzes as time-bound 

  • The option to share flashcards with other people (editing them should not edit the original flashcard)

  • When signing up for the app, it should ask for an individual’s education-level, so when searching for flashcards for specific topics, users can know what level of education the flashcards are suitable for

  • Ample space for different folders to save flashcard decks, without it impacting the device’s battery life and slowing it down

User Persona

​User Stories

  • As a first year med student, I want a simple app that lets me make flashcards, even of my hand-written notes, easily and quickly

  • As someone with too much to do in such little time, I want to be able to customise my flashcards to help me retain information longer

  • As a sociable person with time constraints, I want to exchange flashcards with my peers without risking wasting time by studying in a group, so that I can expand my knowledge and use my time efficiently

​Job Stories

  • I like to take down notes because it helps me retain information longer. When I am revising, I like looking at the notes because it helps me recall information. I need an app that lets me revise from my handwritten notes, by turning them into flashcards

  • When I am commuting, I am going through my notes on my notebook or laptop. I need an app to make revision more ‘portable’ and convenient

  • When I am stressed during exam time, I like taking short breaks and going for a walk. I want an app that lets me categorically organise my flashcards so I can take a walk to clear my head and still use that time efficiently

Problem Statement 

Jennifer Green (First Year Med Student) needs a way to organise all her notes and revise quickly and efficiently, because she is pressed for time and has a lot on her plate.

Hypothesis Statement 

We believe that by creating an app with a minimalistic interface that lets Jennifer create her own customised flashcards and share them with her network, and also quizzes her to challenge her learning, we will help Jennifer in acing her exams and assist her in achieving a study-life balance since she will be able to utilise her time spent on revision more efficiently.

Information Architecture

At this point, I had app features, problems and possible solutions for me to begin working on the information architecture; how I perceived my persona, Jennifer, to complete two crucial features of Study Aid: adding and saving new words on flashcards, and sharing flashcards with people.

Wireframes and Prototypes

Usability Testing

Direct Tasks

  • Sign up using Facebook

  • Edit your profile picture

  • Attempt a true/false quiz for the Criminal Law topic

  • Add a New Flashcard under the Criminal Law deck

  • Move the Capital Stock flashcard you just created to the Corporate Law deck
     

Scenario Tasks

  • You want to sign up via Facebook and start using the app

  • You want to change your profile picture from the default avatar to a picture of your choosing

  • You just finished revising for a topic, so you want to quiz yourself to check your revision progress

  • You just learnt new concepts and terms, so you want to save them to your flashcard deck by adding new flashcards

  • You mistakenly saved a flashcard under the wrong deck, and now you want to move its location to the right deck

 

Participants

  • Participant 1 – 22 years old – Student

  • Participant 2 – 25 years old – Doctor

  • Participant 3 – 26 years old – Student, and part-time teacher

 

Metric

  • Jakob Nielsen’s error severity rating scale:

 

Task-specific Observations

  • Make the “Choose Topics” option when attempting a quiz more visible and obvious (Iteration 1)

  • Create a “Change Location” button on the screen underneath the flashcards (Iteration 2)

 

General Observations

  • Sort and Delete buttons were confusing for participant 1 and 3, so I replaced them with different ones (Iteration 3)

  • All three participants suggested the decks should appear underneath the category by tapping the category, instead of appearing on a different screen, so I changed the interface of the app accordingly (Iteration 4)

Updated Prototype: prottapp.com/p/59b357

Iterations

1

While P3 said that it takes him some time to get used to a new app anyway, P1 and P2 were quick to suggest that choosing topics should be made more obvious and visible. All three respondents had the same trouble completing the task, so I have broken down this process into three steps. Now, after choosing the type of quiz users want to attempt, they will have to choose their topics (from a drop down menu), and only then will the start button appear on screen

2

Even though two of the three participants had no problem completing this task, perhaps changing the “+” sign and replacing it with an “Add...” button may be able to make this task even more easy and accessible for the users

3

This task was perhaps the most challenging for all three participants. The “Edit” button confused all three. Keeping in mind the main problem, I have added a new “Change Location” button at the bottom of the screen. Now, the “Edit” button will only edit the physical look of the flashcards, i.e. the text, image, font, and the background colour

Final Design

View more projects:

Dark theme

Dark theme

Ahsan Iftikhar |      2018

  • Artboard Copy 4
  • Artboard Copy 5