Vocaby
A website designed to ease the process of learning vocabulary.
Background
I worked on this website as a self project undertaken by me while I was preparing for alternative exam. I felt there is a need of organised way for learning words which should ease the process.
Team
solo
Duration
1 month
Tools Used
- Google Docs - For Documenting
- Google Forms - For Surveys
- Whimsical - Forming Flows
- Balsamiq - For Wireframing
- Figma - For Design & Prototype
Understanding the Problem
People often face challenges while building up their vocabulary. Usually users tendency is to just read or write new words and forget to practice regularly or use somewhere which is a key role. Users generally visit various platforms to search for different words and learn its meaning.
Problem Solution
Vocaby is a web application which enables users to create their own board full of words that they learn throughout their preparation time with meanings & examples and also enables them to remember those in a fun way of quizzes & games. Users can also avail some pre-provided words on their way. This web-app eases the process of increasing vocab in a much more efficient way. Users only need to create an account so that they can save their data for further use. •
- - Users can check their added words and learning progress whole together
- - User can edit, delete their added words at any timeor not
Design Process
Competitive Analysis
To get a stronger grasp on what other solutions are providing, I analyzed competitors who have attempted to design for a similar problem.
gre.magoosh provides a way to practice and increase vocab with and without creating account.
Main Difference: gre.magoosh doesn't allow users to add their own words
Main Similarity: Practice words as quizzes
Brainscape only gives flashcards to use on their own after account creation. It contains mostly advanced words.
Main Difference: No practice sets available
Main Similarity: Pre-provide words to user
Tyrannosaurusprep only allows to give a small quiz with no post progress track feature.
Main Difference: User cannot track their progress
Main Similarity: Quiz feature with detailed answer after each question
Vocabulary provides most of the features but lacks in users adding their self words.
Main Difference: doesn’t allow user to add words
Main Similarity: user can track their performance
Discover
I have conducted user survey to better understand target users and their needs along with their lifestyle. The survey revealed a few good insights about potential users needs.
Research Takeaway
Target User
Define
According to the reveals from surveys, a primary persona was generated. The persona helped to analyze goals and frustration so that I can prioritize the most crucial features.
Persona
Empathy Mapping
Ideate
Before wireframes, I decided to use venture design framework to draft user story, hypothesis statement, a simple story board and an initial crucial step for application i.e. Information Architecture.
User Story Mapping
User stories helps in generating solution and understanding user needs by understanding the functional requests for features.
As a Designer and preparing for GRE, I want a vocabulary platform, so that I can practice words in various different ways.
As a traveller, I want to increase my vocabulary, so that I can manage to understand and speak fluently while I travel abroad.
As a well-organised person, I want a platform where I can store all the words which I run by daily, so that I can keep track of my word list and practice time to time.
As a determined and goal-oriented person, I want a platform which provides daily progress of learning, so that I can track my progress and get motivated constantly.
Hypothesis Mapping
Hypothesis gives a general idea of relationship between features that we provide and user reaction.
If we provide various different ways to practice like Flashcards, Quiz, Synonyms/Antonyms for test takers, so that they will have a strong hold on their vocabulary.
As a traveller, I want to increase my vocabulary, so that I can manage to understand and speak fluently while I travel abroad.
As a well-organised person, I want a platform where I can store all the words which I run by daily, so that I can keep track of my word list and practice time to time.
As a determined and goal-oriented person, I want a platform which provides daily progress of learning, so that I can track my progress and get motivated constantly.
Story Boarding
Information Architecture
Design
Wireframes were the beginning of design process, various paper sketches were made to establish the basic structure with the use of sitemap. Then, a high-fidelity wireframe was designed using Balsamiq.
Low-Fidelity Wireframes
High-Fidelity Wireframes
UI Kit
In this step, I finalized a color palette. I tried to choose relaxing colors for the website so that users don't feel strain. Next, I chose the fonts. I used Muli for both headings as well as content.
Prototype
An interactive high fidelity prototype was created using Figma. Not all parts are clickable (active)
Conclusion
I learned how to effectively prepare personas, user stories, hypothesis and story boards which help to identify core features and their relationship with users. Initial user research was something which was challenging for me, but I realised that survey is not enough to understand users. Another area where I got stuck was the Design and prototype part of process. I was not able to decide what type of UI kit should I select. Finally, I decided to go with relaxing colors which don't strain user eyes as they are going to spend a lot of their time on website. Further Next steps are going to include the usability testing using usability hub, so that we can get insights and work on repetitive design process.
Thank you for reading!
I would appreciate any feedback or suggestions. Feel free to contact me
Jun 28, 2020
UI/UX
Research
Design