// MULTIDISCIPLINARY DESIGNER
iPhoneXFreeMockup.jpg

Vocab Ninja

 
ezgif.com-crop.gif

VOCAB NINJA

 
 
Darkvslight.jpg
 
 

A NEED FOR CHANGE

PROBLEM STATEMENT

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…

 
 
ezgif.com-gif-maker (5).gif
 

Project goals

  • 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

 
 
noun_Competitor Analytics Analysis_970319.png

COMPETITOR ANALYSIS

noun_interview_2315139.png

USER INTERVIEWS

noun_Ux Personas_200277.png

USER PERSONA

noun_information architecture_1203155.png

INFORMATION ARCHITECTURE

noun_Prototype test_338617.png

PROTOTYPE TESTING

 
 
 

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?

COMPETITOR RESEARCH

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.

 
2.jpg
1.1.jpg
6.jpg
 

LEVELING UP

RESULTS

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

USER INTERVIEWS

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’.

 
rashilcopy.jpg
rashil2.jpeg
ASHANA_1.JPG
saatchi2.jpg
Ashani_2.jpg
saatchi2_jpg
 

EUREKA!

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?

 
 
 

THE CHALLENGE

USER PERSONA

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.

 
 
1 copy.jpg
2.jpg
 
 

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.

 
final123.jpg
final3.jpg
 
 

THE PROCESS OF ELIMINATION

CONCEPT SKETCHES

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.

 
IMG_5444.jpg
 
 

THE COLLATION

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.

 
Task1.5_Wireframing_HetalKarani_V2_Page_4.jpg
Task1.5_Wireframing_HetalKarani_V2_Page_5.jpg
 

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.

 
Task1.5_Wireframing_HetalKarani_V2_Page_3.jpg
 
 

THE DISCOVERY

USABILITY TESTING

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.

 
pg2.jpg
PG4.jpg
PG52.jpg
PG3.jpg
PG6 copy.JPEG
PG7.JPG
 
 

ADAPTATION

WIREFRAME ANNOTATIONS

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.

 
Slide11.jpg
Slide12.jpg
Slide13.jpg
Slide14.jpg
Slide15.jpg
Slide16.jpg
 

STYLE TEMPLATES

Typography.jpg
Buttons.jpg
Buttons%2BCopy.jpg
Color%2BScheme.jpg
 

REENVISIONING THE UI

STYLE GUIDE

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.


Simple Mockup Free Scene.jpg
Black Clay iPhone.jpg
 

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

APP FLOW

In comparison to Ninja’s previous prototype’s app flow, this version is tighter and consists of less redirections and splash pages when completing a task. The app is highly gestural and can easily be operated through the bottom navigation bar, each icon effectively acting as a quick switch.

 
Screen Shot 2019-05-18 at 5.18.51 PM.png
 

FINAL PROTOTYPE

screen.jpg
 

features

 
 

Search and Preview

The search page is the primary means of how a user can access the plethora of study material available online, which makes it necessary that it’s easily accessible and shows recent/popular searches for efficiency. A user has the ability to preview decks before adding them to the deck main page.

ezgif.com-gif-maker (1).gif
ezgif.com-gif-maker (2).gif
 

CREATE ACCOUNT

Designing a flexible set of steps that can capture the amount of data the user feels comfortable submitting—prioritizing name, email and password fields and option to login via social media. The customer does not have the option skip, immediately integrating their performance and progress as soon as they start using the app. This also minimizes the need for notifications and reminders to create a user profile when using the app.

 
 
 

Create Flashcards

The flashcard itself consists of a variety of features. As the user holds it in their hand, visually it is intended to replicate a pile of cards. Gestural touch sensitivity allows for the user to easily swipe left and right, moving through the deck efficiently. Features included are audio recordings, synonyms, ability to personalize and add notes and bookmark card.

ezgif.com-video-to-gif.gif
 
 

The app fuses two types of gameplay, allowing the user to apply this to any deck of their choice to revise the unit. Quickfire requires typing in synonyms into the word bar, while multiple choice requires choosing the right answer. We believe this keeps the user motivated, tracking their scores and helping them understand their weaknesses.

 
 
 

User Profile and SETTINGS

Allowing users to view their progress, scores, units left, strengths and weaknesses. User can change settings for notifications, and set a timer and schedule for each day adjusting frequency to study units.

ezgif.com-gif-maker (4).gif
 
istockphoto-1058837202-612x612.jpg
 
curved-arrow-black-png-0.png