WordNote
Web-based app, 2021
Program used: html & CSS, Javascript,
Photoshop, Figma
This is a quarterly course project that I collaborated on with two of my classmates. Word-Note is a web-based app that simplifies the note-taking process and keeps track of the user’s search record. The goal is to make it more convenient and motivational for users to learn words on digital devices.
Video Walkthrough
Motivation
When preparing for a test like GRE, people often need to look up words which they are not familiar with, especially for non-native English speakers. Traditionally, people handwrite words in their notebooks. We want to make an app that simplifies the note-taking process and keeps track of the learning record. We hope to make it more convenient and motivational for test-takers to search and review words on their digital devices.
Research
Before diving into the design of our app, we did several research and analysis about existing applications that have similar functionality that we want.
It is easy to search words in search engines like Google, but they usually show contents beyond the needed information, distracting the user and extending the time of finding desirable results. Therefore, we want our app to be efficient and concise in terms of searching and saving words.
01
Search Engine
02
Online dictionary
Merriam-Webster
03
Online note-taking apps
Google Spreadsheets
OneNote
04
Flashcards
Quizlet
Dictionaries are good tools for learning vocabulary, but they do not save words. We envision our app to provide the function of saving the searching record for word explanations.
Spreadsheets enable the user to keep notes of searched words and are easy to sort. The problem is time-consuming. The user needs to have multiple windows opening concurrently to search and save words. It can also be distracting to switch with different windows. We want to keep track of the searching results and users can get an instant explanation for words that have been saved earlier.
Flashcards are good tools for reviewing words but making them takes a lot of time. The user needs to save words, find the meaning, and manually input everything to the flashcard website/app. Our app could provide a similar reviewing experience by having a collection tool. Users could create, sort, and customize their word collections.
Prototyping
After researching existing applications, we decided to focus on three factors in designing our app:​
-
Keeping the basic function as a notebook
-
Enabling collaboration among users
-
Motivating the user's learning in the long term
Prototype 1
Prototype 2