Mango Study

This was the first project completed individually throughout my UX/UI design journey.

Overview

Mango Study is a vocabulary app designed to empower and motivate its users to learn more vocabulary without added stress.

Purpose

This project served as an introduction to the ux design process as part of my ux training program. It was meant to exert my acquired knowledge and skills in UX design.

The goal was to create a vocabulary app (MVP) that empowers people to learn new vocabulary.

Tools Used

Marvel, Figma

Google Surveys

Zoom

Slack

Roles

UX Designer

UX Researcher

Process

For this project, I implemented the design thinking process and maintained a user-centered approach. My process was to verify my assumptions with potential users and discover current issues with competitors in the market. This way I would really gauge the competitive field and understand my users at a deeper level.

Once I grasped the mentality of my users and the problems they were facing, I moved into creating user flows (IA), personas, and low fidelity mockups. After conducting more interviews and testing, I moved towards a Hi-fi mockup to showcase the main features.

Understand + Observe

To gain a better understanding of competitors, I ran a quick competitive analysis on multiple apps, most of which focused on learning new vocabulary (however, I also considered apps outside the target market to gain inspiration). This allowed me to dissect their strengths and weaknesses in order to determine where they felt short.

This is what I got from the competitive analysis:

  • Many apps that expose users to new vocabulary lack in self-testing features/ learning aspect.

  • Some vocabulary apps had functional issues with their touch points.

  • Some apps lacked in discoverability and made it difficult for users to access certain features (either settings for personalization or the social aspects of the app)

  • There were vocabulary apps that were too pricey.

  • Many vocabulary apps did not use color schemes that promote learning.

Looking at Competitors

User Research

To better understand my target users, I sent out a survey. From this survey, I gathered four participants and interviewed them.

These interviews were moderated and remote. I used zoom and screen sharing for the process. After gathering my findings, I separated them into what my target users were “doing,” “thinking,” and “feeling.”

Here are my insights about potential users:

  • They need a quick way to create personalized vocabulary sets.

  • Many focus on a lot of repetition and study on their own time

  • They can sometimes have a short attention span/ procrastinate.

  • They are incentivized to study with reminders or challenges.

  • Many have busy schedules and would like to squeeze in some extra study time without stressing over it.

  • They learn best through repetition and would like real-life context examples or to be able to create their own sentences (& use mnemonic devices).

  • Participants mentioned that they would love to be tested on terms they missed the most without having to worry much about it.

  • Users feel good about getting things right (positive reinforcement)

  • They would explore a social aspect of a vocabulary app, allowing for competitiveness & discussion to be fruitful.

Interviewee Quotes

POV + Ideate

User Persona

To put my users into perspective, I quickly created a proto-persona, Mathew.

I also created user stories to translate Mathew’s needs into an array of tangible solutions…

Problem Statement

Mathew needs a way to incorporate multifaceted, effective study mechanisms that allow him to reach his goals without adding more cognitive load so that he can manage his work and personal life better by remaining engaged with little effort.

Hypothesis

By creating an app that incorporates use of personalized settings for self-testing, inciting educational challenges, & low cognitive load testing mechanisms that retain the user’s attention, we will help Mathew retain information quickly & accurately.

App Feature Requirements

I re-visited the given app feature requirements for this project before laying out the content structure.

These were the minimum requirements given:

  • A splash screen

  • An onboarding process

  • A way to sign-up/ login

  • An admin area where users can access their information

  • A menu for navigation.

  • A way to upload new vocabulary words that allows users to input their own definitions, written or otherwise.

  • A means of reviewing vocabulary that allows users to study efficiently and effectively.

Information Architecture

Before jumping into wireframing, I mapped out the IA for my two main user flows. This way, I would have a better idea of what is needed for my users to perform these actions with ease.

I used Draw.io to create my user flows, although google drawings or overflow also worked.

User flow #1

User flow #2

Prototype

Wireframes

Before moving into high fidelity, I sketched out my wireframes on paper. This way I was able to focus on high-level interactions rather than getting caught up in the details. I added a global navigation and integrated some vocabulary content. Then, I asked close friends and family to test my flows & began a digital mockup that would be used for testing.

Onboarding

Personalizing Settings

Adding a new word/ creating new vocab set

Clickable Mock Up (low-mid fidelity)

Onboarding

Task 1: Set up personalized settings for microlearning

Task 2: Adding a new word to a new vocabulary set/ creating one?

I transferred my wireframes into a digital mockup so that I could begin user testing. I focused more on high-level interactions rather than specific placement. I added some color to mimic the feel of the app better. As you can see, I did not measure my designs to fit the prototype frame, which I fixed later on. However, I made sure that my hotspots were clickable.

Testing

User Testing

Mango Study’ vocabulary app~ Tested onboarding, creating new study sets, adding new words to existing sets, and personalizing study reminders/microlearning settings.

Schedule ~ Met in person with two participants on 6/21/2021 for a ~15 min session each. Then, met online with two more participants on 6/22/2022 for two other ~15 min sessions. I scheduled with participants 1 to 2 weeks before.

Equipment ~ Marvel, Zoom, Phone, Computer

Metrics ~

Implemented user testing early on to ensure the project was headed in the right direction, considering app feature requirements & the solution to user needs.

Direct Tasks:

1) Create an account with Mango Study. Land on the home screen.

2)Create a new study set. Share to a friend.

3) Add a new word to recently created study set, Animals.

4) Set personalized study reminder preferences.

Script & User Scenario Tasks can be found here.

Findings

I ranked found errors based on Jacon Nielsen’s Error Severity Scale (shown above). Then, I proceeded to prioritize the errors based on their severity and fixed them in that order.

Before jumping into the redesign, I made sure my IA was up-to-date. These are the updated flows.

Task 1: Set personalized Microlearning settings

Task 2: Upload a new term/set

Updated IA

Design Revisions

For Task 1

  • Consistency was set for the onboarding screens.

  • Hotspot was fixed for responsiveness to touch.

  • Changed the home screen to incorporate user’s name so as to show that their account was created successfully.

  • The home screen was edited to a clean look with added notifications and messages icons.

Since Marvel made design feel a bit constricted, Figma became the new domain for the prototype.

Before Testing

After testing- Onboarding + home

For Task 2

  • Added menu option to study/vocabulary sets to simplify adding new words to existing sets & speed up the process.

  • Changed confirmation after sharing a set such that you can tap anywhere to get out/ it disappears on its own after 1 second.

For Task 3

  • Instead of having both “New Word” AND “New Set” buttons, I simplified this by adding menus to all study sets and only having the option of beginning a new study set, with the ability of adding words to it after.

Before vs After

For Task 4

  • Added a brief onboarding to let users learn more about microlearning & to encourage them to set their microlearning preferences.

  • Split Microlearning settings page so as to not overwhelm users.

Before

After

Before

After


Final Prototype

Onboarding

Home, Library, & Social Study Screens

Creating a new vocabulary set

Adding a new word to an existing vocab set

‘Microlearning’ Onboarding

Setting up Microlearning Preferences

-checkout the prototype!

Next Steps

  • Show emphasis on most missed words and evaluative results of microlearning. Add ‘missed words’ to settings option when users are selecting which sets to prioritize.

  • Add a search bar on the homepage/library to search for words quicker.

  • Develop the social aspect of the apps further.

  • Exemplify how vocab games will prove beneficial to the user.

  • Implement positive reinforcement to motivate users to keep improving their vocabulary/ terminology.

  • Add tags that help filter words

Takeaways

  • Prototypes are never perfect and could always be iterated on.

  • You can always do more usability testing to learn more about users.

  • Not every design will workout. And that is okay as long as users have their needs met.

  • Understood how to make users feel comfortable and obtained genuine feedback.

  • Became better at rapid prototyping.

  • Used user’s worries to their advantage with ‘microlearning’ (their short attention spans)