Search. Save. Retrace.
A modern dictionary app that helps expand your vocabulary and store your personal online research materials.
Ji Hu | Ji Li | Charlie Norice
My Role: user research
project management
user testing
Hi-Fi prototyping
Wireframing
When people are learning new vocabulary, they can often get frustrated with unorganized online personal learning materials, time management and old learning models that don’t fit into their busy lives. How might we create an application that helps users expand their vocabulary and boost their confidence in an efficient and modern way?
I was once an international student, now I am living and working in the US, and I have realized that my previous language learning style and traditional tools don’t fit into my current lifestyle and work needs anymore.
I am constantly learning new words and terms related to my jobs. I am currently a UX/UI designer. Also, me and my partner own a real estate company and we flip houses. Part-time, I am a personal cook. I’m always seeing new words, and I am always googling. The traditional dictionary applications can not satisfy my needs anymore, I do need the basic meaning of a word, but also more in-depth meanings in a professional context that can help me understand words in a professional way. Furthermore, I am just a normal guy, and that means that sometimes I will forget what I previously studied, so I often need to refer back, but referring back means I have to google all over again and find the exact website I found before, it’s just painful…..
For example, I am researching the word “gluten” on Google because one of my cooking business clients requests a gluten-free dinner. I will first check out a couple of the search results on Google and click some of them to see details, and then maybe move on to the next and next search pages until I find a website that describes “gluten” in a way that really gives me all the aspects of the meaning and explanations that I want to know as a personal chef.
However…….. the research and study doesn’t stop there…….
After a couple weeks, because of my job, I need to verify and see if I remember correctly how gluten impacts people’s health. Of course, I didn’t save the link to my bookmarks because bookmarks are already packed with other old saved links. So I have to google the word “gluten” all over again and hopefully I will find the exact website as last time. If I am unlucky or inpatient at that moment, I will never find the same website. The searching of the exact website is painful and time consuming.
There must be a way to fix this issue, to make my learning easier and more personal, and make my previous online research easily accessible.
After talking with my teammates about my idea, they are all interested and think this kind of app will also speed up their learning process. Then we try to empathize with our potential users and form our hypothesis statement:
We believe that by creating an app that helps users expand their vocabulary in real time by storing the words and terms into organized lists with recommended references, and keep footprints of their research, storing their reliable resources for easy study reference. Such an app we believe will increase the user’s vocabulary comprehension by streamlining and organizing their learning experience.
We use Trello Board and Slack to manage time and workflows of the project, and keep all the team members on the same page. Doing so really gave us clear goals and made us easier to collaborate with each other. We divided our project into different phases:
Stage 1: Empathize—Research Your Users’ Needs.
Stage 2: Define—State Your Users’ Needs and Problems.
Stage 3: Ideate—Challenge Assumptions and Create Ideas.
Stage 4: Prototype—Start to Create Solutions.
Stage 5: Test—Try Your Solutions Out.
And here is our Trello board:
Proto persona is hypothetical starting point to consider: Who is our user? It’s an educated guess, will need to be validated through more user research.
Here, we have two proto personas that me and my teammate Charlie created: one is a native English speaking young professional who has the need of learning new words to inspire his creativity, and the other proto persona is a young professional from Korea who is constantly learning new words and wants to break the culture and language barrier and master coding.
Proto personas are used as a starting point. It is the role of us as researchers to validate or invalidate the proto-persona.
We chose to start with online surveys. We prepared a survey with Google Forms and distributed it among people who are young professionals on social media like Facebook, Instagram and Wechat. Wechat really helped us to understand international English speakers. The surveys helped us gain quantitative data of users’ learning style, what kind of platform they use to find word meanings, what kind of dictionary app features they enjoy and what kind of features they wish a dictionary app to have. The purpose was to discover the pain points of users’ learning and researching process of trying to expand their vocabulary. Learning about the problems of potential users is a good way to get inspired. Working with real world quantitative data is a good starting point to help avoid guesswork and bias. From these results we were able to refine the questions to ask the users during the interviews.
The data we collected from the surveys showed us quantitative data in the areas of our potential users’ current learning styles and what other features they think will improve their vocabulary learning overall.
Then we moved to in person interviews. We interviewed 6 people, because 6 interviews can identify 80% of themes within a data set.
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. We also asked them about the different phases of learning a new word, how do they refer back to where they learned the word in the first place, and how they store their personal notes when they are learning a new term. During the interview, we really try to watch the changes of their emotion, and try to dig in and get to know what is bothering them and what potential solutions they prefer.
This online research finding perfectly matches the data from our users through interviews and online survey. We think this finding is very valuable and we should design a learning function feature that based on the scientific memory curve to remind our users to study and help them achieve their goals with less efforts.
As designers, we want to understand our users. Often, we need as many data points as possible to tell that story. The affinity diagram helped us to create categories and narrow our focus. After a few iterations of the diagram we were able to understand our users’ needs and wants.
Combine the qualitative and quantitative data, we discovered valuable user insights and pain points:
All of the pain points from our users has a commonality: “not having enough time!” I think this is a breaking point for the development of our app. It really helped us set the idea and the direction of the app we are building. We have to make sure the use of the app is fast, and all the design need to obey the law: “saving user’s time and get where user wants to go as fast as possible”.
Empathy is understanding the feelings, thoughts, and experiences of another person. We built empathy maps after initial user research to gain deeper insights into users and provides a glance into who our user is as a whole. Also sheds light on which problems to solve and how. Most importantly it helps quick and easy to iterate, and get all team members to the same page to understand what our users think, feel, see, say and do.
Based on qualitative and quantitative user research and web research, we decided to not distinguish native English speaker users and international English speaker users, because they all encounter new words everyday and they all need a new dictionary app to satisfy their need of easily expanding vocabulary and organize personal online study materials.
Also the app is still a dictionary utility app to its core, but with more advanced features. If an international English speaker only wants to find out the basic meaning of a word, they can still search in our app and the app will provide the basic meanings to make them satisfied.
We then created a user persona who is a restaurant owner who is taking courses in nutrition, and she feels like the traditional dictionary app can’t give her the explanations she needs. She is always busy with her business and sometimes she forgets definitions of terms so she needs a place to refer back to them fast and easily. She wants to spend her valuable time on learning, not on finding.
Next, to identify the gap between the current state and the desired state of user’s unmet need. We use problem statement to reveal user’s core pain points and the direction of the solution.
Next, with our problem statement in our mind and all the user insights we collected from our users, we started the brainstorming phase to generate a bunch of ideas quickly. We believe all ideas should be heard, and there are no stupid ideas. We use I Like, I Wish, What If tool that looks at ideas through the lens of the present, the near future and the distant future, then we put stars on the ideas that we think can fundamentally solve our user’s problems.
All the ideas we have are great, but we can’t turn them all into the features in the app, we have to decide on which idea will solve user’s core problem and elevate the user’s experience, also is feasible. We also referred back to our interview and survey data and try to validate our ideas based on user’s needs and wants, and think which features will bring the most value to the user and what is feasible. From there we use Features Prioritization Matrix to define the features we decide to develop.
UX design is not only about improving the usability for users, but also to encourage user behavior that will drive business success. Our team member Ji Li did Competitor Analysis to see what our direct and indirect competitors are doing.
With our user’s needs and our competitor in mind, the features we decided on are:
1. Users can save a word from web browser to our app directly, also organize words into categories to make words more accessible. (core function)
2. Allows users to refer back to their online research materials. (core function)
3. Users can control the notification frequency. (core function)
4. Index cards game to learn words. (core function)
5. Voice input and camera mode to save user typing words, therefore save time.
6. Slower pronunciation of words.
7. Basic dictionary app functions like pronunciation, meanings and with example sentences from official resource.
To be able to communicate our product’s value to users, I came up with our value propositions based on what we can bring to our users and why we are better and different from other like kind apps:
Word Repo makes your vocabulary learning personal and effective.
Words can only accomplish so much during a product development, so we need graphics and some “drama” to communicate ideas quickly with team members, also to understand and iterate the flow of user’s interaction with the app.
We had a vague idea of how the app will function, but before we begin wireframing and prototyping which are all very time consuming, we decided to do task flow and user flow first, to map out each step user complete a task. We first sketched on paper, then we made a digital version to make it accessible to team members.
Paper prototyping is fast, and you can change it anytime you want, it’s very convenient for fast iteration. Each of our team members did sketches for one of the core functions. This was the first step to help us visually imagine the app.
Paper prototype is fast and good for iteration, but it’s too messy to do user testing with it. Therefore, we divide lo-fi prototyping missions to three team members and each of us is in charge of one of the core functions.
Then, we made lo-fi clickable and started our lo-fi prototype testing with 6 users who are young professionals. These are the 4 tasks we designed for the user testing:
Task 1:
In the article you’re reading choose a word and save it to the application. Once it is saved access the list you saved it to.
Task 2:
From the home page access the settings and change notifications.
Task 3:
To better learn the words access the review option.
Task 4:
Review the terms saved in your repository then return to the home page.
During the testing, the users shared their thoughts about the feel of the application and its ease of use.
Our lo-fi testing proved that the simplicity of the app was there, however 5 users said that instead of telling them to “save” the word to the application, we should tell them to “share” the word to the app, since in IOS the only way to interact with a third party app is to click “share”:
Therefore, we should educate our user in the on-boarding pages, and tell them how to “save (share)” a word to the app.
On the other hand, 4 users reported that there were too many steps in the saving process:
1. click “share”.
2. click “Vocab”.
3. click “save”.
4. choose the category you want to save the word to.
5. then click “done” to finish saving or click “add personal notes” to add your notes.
Instead of making “saving a word” a five click process with pop up pages and different interfaces, we have to cut that process much shorter to reduce users’ cognitive load. Also, during our user research phase, we discovered the biggest pain point of our users, they don’t want to waste any time, they want to get things done fast.
Therefore, after talking with teammates and really empathize with our users, and try to facilitate intricate tasks and workflows, I redesigned the flow of saving a word to our app:
1. click “share”.
2. click “Vocab”, then automatically the word and the URL will be saved to the app.
3. If you want to organize the word to a category, you then just click “choose lists”, and here the page will push up, so users will still feel like they are on the same page, again, to reduce the cognitive load.
4. after choose the category “biology”, the page shrink and show “saved to biology”, then the page will disappear itself in 2 seconds or users can have plenty of empty space at the upper section of the screen to click and exit.
With this design change, users will only need to go through 3 different interfaces to save a word, and they also have the flexibility to choose to save to a category or not.
Later on, when we did our hi-fi prototype with our users, they all liked this work flow better. Save users’ time and make them happy!
Users loved that they were able to access the link where they originally found the word.
Some of the users were confused about the “repository” icon, they think it’s a “home” icon. After some considerations, we changed the “repository” icon to a book like graphic with bookmark to represent the concept of “saving and referring back later”. We also decided to add text to indicate the tab functions, because this is more direct and can eliminate users guessing the meaning of each tab.
Some users also mentioned the wording issue on our card study page, so we decided to make the wording more like a speaking tone to help users interact with the app faster. Instead of saying “Unknown”, we say “Don’t know”. Instead of saying “know”, we say “Got it”.
After design changes made to our li-fi prototype according to the feedback from our user testing, we begin work towards to the hi-fi prototype. The first step is to create a mood board. The goal is to learn from the current visual design trends and gather inspiration from other like kind apps. We used Invision to make the mood board:
After seeing some of the traditional dictionary app interface designs, we think they are all a little bit boring and expected. The app we are designing, it is still within the dictionary app category, it will have the functions that every other dictionary app has, but it’s core function is very different and unique – save a word and the URL at once, then refer back to the website later. Since the core function is new and different, we should make the app’s interface feel different from a traditional dictionary app. The style of the interface need to communicate “current”, “trust-worthy”, “modern”, “fun” and “professional”.
Eventurly, we decided to make the UI has gradient, dark background, electric feel and high contrast. Gradient is the current trend, black mood is very popular now, 70s electric throwback has been trendy for years.
Our teammate Ji Li then designed our UI style guide:
Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes wisdom, confidence and intelligence. Blue is also considered beneficial to the mind and body. Dominant dark blue balances the various gradient colors. Colorful gradient enhanced rhythm of visual.
The core function of the app is to help users memorize and study, so when we are designing the logo, we want to use some visual elements to represent the process of learning and memorizing. Through our online research, I really got inspired by the graphics of the brain, I think the brain shape is a very direct visual communication to let users understand the concept of our app. However, the hardest of designing an app logo is to simplify it, because the app logo is going to be really small on a phone screen, it needs to be simple and memorable.
After countless iterations and testing with our team members and users, we created our logo with a geometric brain and colorful particles which represents knowledge. The knowledge is getting into the brain and the upper part of the brain is becoming colorful:
We were pretty happy with our logo design, so we decided to also use it as an animated logo at the splash screen to communicate concepts and branding with users in an interactive and fun way.
When we first started, Charlie came up with the name “Vocab”, but we think the name is not communicating the core functions of the app. Then I suggested “VoKeep” to indicate that it’s an app can keep your vocabulary and research online. Other team members were not sure about it, so we launched an online poll to ask our users what they prefer, and here are the results:
However, personally I still prefer “VoKeep” as the name of the app, and I think the polling question we asked was a little bit leading, we should not mention the word “repository” in the question. We should just give users the context of what the app does and what the core functions of the app are, then ask them which name they prefer.
I will do more testing with more potential users in the future and see what they think, then based on the percentage, I can decide to change the name or not.
Again I am not the user, so any design changes must based on users’ wants, needs and thoughts.
For this round of the user testing, we added splash screen and three onboarding screens, each onboarding screen describes one of the core functions of the application: how to add a word to the app, how to refer back to where you found the word, how to customize the notifications and set daily learning goals.
We gained lots of experience from the earlier li-fi prototype testing, now we know more details and what to pay attention to when users are interacting with the app.
We try to give users scenarios and ask them what would they do instead of giving them any kind of hint. What we want to know is the completely raw feelings and thoughts from our users.
Here is our “Hi-Fi Prototype Testing Plan”
Feedback from our user testing and design changes:
1. 80% of the users think it’s unnecessary and extra that they have to tap “continue“ to enter the app after login, it should just lead to the homepage directly.
So we changed micro animation position from after login to splash screen:
2. 70% of our users think the card is too narrow.
So to better use phone screen real estate and make the layout more logical and less messy, we separated different content into individual cards with blurred background, stretched cards’ width to the edge of safe zone of the phone screen:
We had 2 versions of the card design with different functions and colors, and we couldn’t decide as to which one to use within our team members, so we asked our users during our A/B testing: “There are 2 interfaces when you flip the card to see the meaning of the word, which do you prefer? “
Feedback from our user testing and design changes:
The A interface has more buttons and functions that the user could interact with, but the user doesn’t like the interface design, the color looks odd it doesn’t relate to the previous card color, also the explanation content is limited.
Users prefer the B interface, because the color is consistent with the previous card, and there are both meanings and sentences, the users like it! However, there are no buttons that user can interact with.
Users prefer the B interface, because the color is consistent with the previous card, and there are both meanings and sentences, the users like it! However, there are no buttons that user can interact with.
After summarizing all the data from user testing and learned from obstacles, we finally finished our final hi-fi prototype. Here are some core functions showcases:
1. when browsing on a website, save a word to Word Repo.
2. find the word in Word Repo and retrace to the website where you found the word to see the context.
3, study words you saved to Word Repo with a card game.
1, AR chance
Using AR (Augmented reality) to save user time and deepen the immersive user experience! Typing a word with keyboard takes time and energy, especially when people are in a situation where they are limited by their attention and focuses. On the other hand, AR is the future, Google and Apple are putting more focus on AR, so if we can implement AR in our app, that will make our app modern and smart.
2, Apple watch
Use an apple watch to play the card game to help with memorizing words and interacting with the app. This idea was based on our users’ pain points, users said they don’t have time to memorize words, so we think if we can push the notifications to smart watches and let users to use their spare time to study and repeat the word definitions, it will save their time, and also boost their memories.
3. Web and desktop versions of the app.
I think it’s very necessary to have desktop version of our app, so they can save words and URLs to a platform directly on their computers. However, we will have to do more research and talk with our users to see if there is really a need for that.
Learning is so important for humans, and words are the bricks of the knowledge castle. As modern technology keeps improving, people’s learning already became smarter and more efficient, and people are still looking for a way to become faster learners. I think technology plays a big role in people’s life, let the computer do the dry and organizing jobs, human should just focus on how to save time and learn a lot. I will keep testing our app Word Repo, and get more data from potential users to make the app more useful, desirable and accessible, because articulating your product should be a consistent process, and a product should envolve as the market changes.
Developing this app has been a very fun and challenging journey. When I first had this idea of building an app to help people improve their understanding of vocabulary, I totally had no idea how this app will turn out, what kind of features it will have and how it will interact and help with people’s lives. Real life data always surprises you in a big way, there was frustration, there were some confusing moments and it felt like there was no solution.
However, I think this was a great experience, I learned a lot from my failing and hard working. As I’m doing more and more projects, I start to have a clearer understanding of design thinking and time management, I am looking forward to my next app!
