Problem Statement

Words | Vocabulary Learning App | UX Design

My first project for CareerFoundry’s Intro to UX Design course was designing WORDS, a vocabulary learning app that helps users manage and track their vocabulary learning while adding new words. This project focused on applying the Design Thinking Process to solve real-world problems through user-centered design.

To create an intuitive and effective app that empowers users to learn new vocabulary efficiently.

ROLE: UX Designer conducting research, user personas, user flows, wireframing, prototyping, and user testing.

📅 Timeline: November - December 2024.

📌 Deliverables: Competitive Analysis, User Research & Analysis, User Personas, Information Architecture, Wireframes, and User Testing.

🛠️ Pen & Paper, Miro, Figma, Zoom.

How might we design a mobile app that empowers people to learn new vocabulary ?

Introduction

I designed WORDS, a vocabulary learning app that empowers users to improve communication skills and feel confident in professional settings — anytime, anywhere.

WORDS is a vocabulary learning app designed to help users expand their professional vocabulary efficiently. It introduces new words daily and offers an intuitive, visually appealing interface with personalized learning, progress tracking, and engaging features like themes, background music, and a speaker.

Diagram of human-centered design thinking process with steps: Understand, Observe, Pov, Ideate, Prototype, Test, Tell Story, Present, under phases Inspiration, Conceptualization, Iteration, Exposition.

Slide titled 'Discovery' with a paragraph about conducting a competitive SWOT analysis of similar vocabulary apps to understand strengths, weaknesses, opportunities, and threats.

Diagram titled 'Competitive Analysis' showing three app icons: MyVocab with a book icon in black and green, WordUp with a purple and blue icon, and Quizlet with a blue icon and white circle with a smaller blue circle inside, connected by lines.

Screenshot of an app interface on a smartphone showing personalized flashcards, quizzes, and study plans, with a dark blue background and colorful icons, and a description of the app's features on the left.

Image of a mobile language learning app with a purple icon, featuring lessons on vocabulary and test preparation, including screens displaying a woman reading a newspaper and a list of lesson topics such as greetings, family, love, wedding, nursery, and hygiene.

An informational slide about the MyVocab app. The slide shows the app icon, a description of its features like lock screen integration, personalized themes, reminders, collections, and history tracking, and two smartphone screens displaying the app interface with vocabulary words and settings menu.

CONCEPTUALIZE

Using the insights that I gained during discovery, I refined the probIem statement. Then I crafted a proto-persona, user stories and job stories to help guide features and design decisions.

A woman with glasses and curly hair, sitting on a couch with a laptop, appears to be thinking or studying. The image also contains text about a person named Samara wanting to improve her speaking vocabulary for personal and professional growth.

A grid with rows and columns of text titled "Challenges faced by Samara" and interspersed with phrases such as "T for Time," "M for Motivation," "C for Consistency," "A for Application," "R for Retention," "C for Clarity," "R for Relevance," and "C for Confidence."

Flowchart of a word addition process with steps including Dashboard, Add New Word, Enter Word, Upload Word, Build Sentences, Select Word Categories, Select Background Theme, Save, and Word Successfully Added.

Information Architecture

A detailed wireframe storyboard of a mobile app development process, illustrating screens from onboarding and login to success messages, settings, scheduling, menu, and user authentication flows.

Sketches & Wireframing

Series of five smartphone screens displaying different prototypes of a vocabulary learning app called Words, including welcome, sign-in, add new word, and information screens.

Product Prototypes

A table titled 'Usability Testing' with columns for Task number, Observation, Severity, and Recommendation. The table lists four tasks and their corresponding observations, severity ratings, and recommendations for improving usability.

Illustration of two people working together at a desk with speech bubbles, a laptop, and a desk lamp, representing a collaborative work or discussion setting.

Diagram showing the development of early prototypes for a mobile app, with three smartphone screens illustrating user interface design, theme customization, and a preview of the app. The diagram also includes color-coded labels: green for 'USER', blue for 'FOND', and red for 'CONFUSING'.

Comparison of early prototype mobile app screens. Left screen shows a welcome page with a cartoon illustration and buttons labeled 'Add New Word' and 'Browse Words.' Right screen is a simplified reading view with text and icons for audio, favorite, and download functions. Text above states 'Early Prototypes' and below explains the use of listing options in the app.

Presentation slide showing a redesign of a mobile app for improved prototypes, featuring three mockup screens with added features such as a CTA button and icons for accessibility.

A digital article page titled 'Next Steps' discussing finalizing prototypes and refining visual design elements for a Words vocabulary app.

A product development roadmap chart showing phases and tasks, including user research, wire-framing, prototyping, persona development, information architecture, usability testing, storytelling, presentation, improvements, with a vertical timeline on the right indicating late deadlines.