Word Repo, a case study of an app that helps you learn new words.
Adding new words to your vocabulary can be seen as an aspiring challenge and learning a new language can be even more frustrating. Many applications create a space for learning new words but make it hard to save words you come across but want to view later.
Defining the Problem
Users are unable to learn words of their personal interest and refer to them later to add to their daily speech. They find frustrations in the areas of general interest, time management, and having a central place to store their interested words
Team: 3 members: Ji Hu, Charlie Norice, Ji Li
Timeframe: 3 weeks
Research Methods
We chose to start with surveys. The surveys helped us to gain qualitative data of users experience with expanding their vocabulary and maintaining a list of those words. The purpose was to discover the pain points of users trying to expand their vocabulary. The results from the survey explained pain points users face and styles of learning.
Interviews
The data collected from the surveys showed us qualitative data in the areas of pain points and learning styles. During the interviews we were able to ask more specific questions about how users learn and retain the definition of the new word for future use.
Affinity Diagram & Feature Prioritization
Doing the affinity diagram we were able to break down the categories that would improve the users experience. Brainstorming through the categories of the Affinity Diagram we knew we had to focus on a quick easy process that allowed the user to control the times they’d be notified to study the words. In order to discover what features were most important and which had the higher impact we did more sorting of our results. Doing the I like I wish, What If exercise helped us to create ideas to solve the pain points we found that users experience while attempting to expand their vocabulary.
Persona
After collecting the data from research we were able to create a persona. We knew our user would either be learning a new language, in school, or in a new career field. The efficiency of saving a word while reading was of most importance.
User Flow Analysis
After we created the persona it was time to discuss the flow of the application. After some iterations of different sketches we were able to decide what footer to try out in our first round of testing. We wanted to simplify the app like most utility applications so the icons had to be direct and easy to navigate.
Users Journey
After we established the flow of the application, we were able to distinguish the users typical journey. We created a scenario for the potential user to gain a better understanding of when and how they would need to use the application.
Sketches
Each team member created a sketch of one of the features we wanted to be of primary focus. We knew the process had to be quick and easy for the user but have great organization as well. We focused on the notifications, repository design, and how easy it was to save a word to the application.
User Testing
We divided the application into 3 parts we tested the notifications, search and save feature, and the study feature. During the testing the users shared their thoughts about the feel of the application and its ease of use. They were given simple tasks that can be done in an efficient way.
The users were given 4 tasks to complete, each task was an important function of the application and testing the functions allowed us to find pain points in the users journey. Click here to see a user test recording.
The Results
Our first round of testing proved that the simplicity of the application was there but there were subtle changes that made a big impact on the design. From the testing of the search and save feature we learned that instead of telling the user to save the word to the application we can tell them to share it.
Users also reported that there were to many steps in the saving process. During our first design you would save the link, then select done, then add notes if you wish. Instead of making this a four screen process, we decided to cut that process in half.
The users loved that they were able to access the link where they originally found the word.
Making the saving option a one screen process saves the users time and our research reflected that is what the users desire.
Visual hierarchy was something else we had to pay closer attention to. With some words being more bold or slightly larger it was important to discuss where we wanted the readers focus to be while saving words to the application.When testing the notifications, users reported that having a “tap here to edit” link was unnecessary and pointed out we needed to pay attention to visual hierarchy.
Some of the users were confused about the icons in the footer. Specifically the repository icon so after some brainstorming we came up with some changes.
The information icon confused them they were sure how the graph connected with the application. We found that area to be most confusing and had to give a more detailed explanation on why and how the screen is related to the application. By changing the text and the location of the image we were able to create a better design for that page.
UI Design
We decided to go with a dark mode design. Using darker colors to give the app a warm feel. We kept the footer simple with very recognizable icons and readable titles making it easy for the user to get through the application.
Taking design ideas from each members sketches we implemented a card design with strong warm electrifying colors. Our buttons toggle with a slight change in color to notify the user if it is on or off. Using toggle buttons instead of your typical button was our way of adding a modern touch to an already simplified application.
Style Guide
The Logo
We wanted a logo that was obvious but creative. We began just pairing what icons came to mind when things about the application. After a few moments of brainstorming and looking up images to see how we can create an amazing logo we started with the idea of a brain. Seeing that the entire reason the application was created was to expand a persons vocabulary we unanimously felt that using a brain would be a great idea. We were sure to test the different logo ideas during our testing to see how users interpreted the designs. We finalized on a side view of the brain with small speckles falling into the mind filling it with color.
User Testing Round Two
During the second round of user testing we decided to add in our on boarding features.Each frame describes the core functions of the application and how to complete the tasks of sharing the word of your choice to the application and how to customize the notifications to review later. Click here to view a user test.
During this round of testing we gave the users scenarios to test how easy it was to use the application as opposed to tasks that were given in the first round. The results reflected that users prefer seeing the icon of the application than written below and had confusion on some of the icon usage. Through more iterations we were able to simplify the pain points to make for a more seamless process.
Second round of testing A/B Testing
During the creation of the UI design we played around with how to display the definitions. We could use the entire screen or use the card method leaving tasteful areas of white space. The results from the test reflected that the card was more favored because it was easier in functionality whereas the other screen had a wider view but wasn’t as functional. Click to view study feature.
The name of the application
We started with the name Vocab from user testing we played around with other names of the application in hopes of finding a name that would quickly explain to the users what the application does.
We asked the users during the first round of testing which name makes sense to them before and after testing. We found that the names we brainstormed Vokeep and Word Repo were more favorable than our original name. Because the results had tied we decided to send out a poll to our colleagues to narrow our searches.
From the testing we landed on a tie for the name options, and then sent a poll to our colleagues to help decide the name that was best for the application.
Future Designs
In the future Word Repo expects to expand on its desktop features giving users an additional way to add to their word repositories. The mobile application will include a camera feature allowing users to learn words from the images that they take. This feature can be especially helpful to users learning new languages. An additional feature added to the mobile version would be a gaming feature making the review process more fun and engaging. Click here for Desktop Version
Concluding statements
The design process of Word Repo was unique in learning how people choose to expand their vocabulary. The survey provided qualitative data that helped shape the features of the application and the interviews gave us insight on the more important areas to focus on. Creating an application in dark mode was a new challenge but I feel as though my colleagues and I were able to establish a color scheme that enhanced the visualization of the application.
