Vocab Buddy

UX/UI design.

The Project

BACKGROUND

Vocab Buddy is a vocabulary learning web-based application that is also mobile enabled. Our team worked with researchers from various universities as our clients. The researchers wanted to create an application that utilized effective components proven through research as well as provide a more available option to kids without access to one-on-one counseling. With Vocab Buddy, researchers can identify what words need to be taught, teach them to the students, and practice the words with the students. The target age group is pre-K and kindergarten students.

SETTING

Sandbox, Northeastern's student-led software consultancy. Sept 2020 - Aug 2021.

MY ROLE + TEAM

UX Designer. Worked as the sole designer on a team consisting of a project lead and five software developers.

Deliverables

DESIGN SYSTEM

I created a purposeful and visually friendly design system for the web application including type styles, colors, and web components. The design system kept the application cohesive and clear as well as aided the developers in building the design of the application efficiently.

WEB APPLICATION

Wireframes were created for each of the application's sections, and the web application was brought to life by the developers. The application’s experience was designed to be pleasing and simple for kids to use.

Design System

TYPEFACES

Rubik is used for all main headings, selected for its playful nature. Open Sans is the typeface for body text and some subtitles, chosen for its clarity.

COLOR PALETTE

The color palette was created to be fun and vibrant. Each color serves a unique purpose to make the experience intuitive across the application. Seafoam is used for selections and to indicate correctness, coral indicates incorrectness or selections of such, ink is used for primary buttons, sky for secondary buttons, and cloud for some backgrounds and background design elements.

WEB COMPONENTS

Primary buttons, mainly used for next buttons, and secondary buttons, used for replay buttons, were designed with their assigned colors. Audio prompts can be read via the text or played again with the play button. The three circular icons are used to indicate correctness, incorrectness, and incompleteness. Components have rounded corners and circular shapes to suit the friendly visual design.

DESIGN ELEMENTS

Stock illustrations were edited and color-adjusted to be used for landing and completion screens. The illustrations add visual delight for the students to enjoy. Smaller transportation related illustrations are used as various profile icons for both students and researchers.

Low Fidelity Wireframes

I began creating the layout for the application screens by creating low fidelity wireframes. I explored various iterations of how the content could be organized to best suit the users' needs.

Assessments + Interventions

Assessments and interventions are the main sections of activity within the application. I designed these sections to be minimal and easy to use. The vocabulary word for each screen is formatted as the heading to give it proper emphasis, along with photos in every exercise. There is also an audio component stating the prompt or vocabulary word to help students who are still learning to read. Simple cloud illustrations exist in the background to add playfulness.

ASSESSMENTS

Assessments are the quizzes kids take to evaluate how good their vocabulary is. One vocabulary word and four pictures are displayed in the assessment, and the kids must click which picture is associated with the vocabulary word. The known and unknown words as well as errors are tracked for the researchers.

INTERVENTIONS

Interventions are the activities that allow kids to relearn words they answered incorrectly from the assessments. There are four types of intervention activities. In the last two activities, icons and colors are used to display correctness of the image selections before moving to the next activity. The progression of success and failure of words throughout the rounds is tracked and used to determine an algorithm for populating questions and intervention screens.

Dashboard

STUDENT DASHBOARD

The student dashboard is where kids can review their progress. Students can see what days of the week they have completed activities, their streak of days in a row, how many words they have learned, and how many exercises they have completed. They can also review the vocabulary words they learned in previous sessions with corresponding images.

RESEARCHER DASHBOARD

Similar to the student dashboard, the researcher dashboard is used to track the students' progress. Researchers can access each student's profile on the student selection screen and then view statistics also displayed on the student dashboard. Researchers can also view more in-depth statistics for each session such as completion time, words answered correctly and incorrectly, and whether specific vocabulary word questions were answered correctly, incorrectly, or left incomplete.