Project Overview
The Problem
Learning new vocabulary is a part of every young professionals reality. Whether it's learning new verbiage for on the job training or just practicing to help build on skills, learning new vocabulary is important but unfortunately, not always easy.
Vocabulario is an application that gamifies the language learning experience for English learners who want to build a greater knowledge of the Spanish language.
Competitive Analysis
In order to identify key features of a new vocabulary building app, I searched for the top applications currently on the market; Elevate, Word of the Day, and Vocabulary Builder by Magoosh.
By interacting with the apps from the perspective of a user, I found positives and negatives to each application, and used that data to synthesis an analysis of what I wanted Vocabulario to provide to future users.
User Personas
I created two user personas to relate design decisions back to. Taylor and Isaac both provided frameworks for integrating a language learning app into busy schedules with an emphasis on gamifying the user experience.
User Stories
The following statements reflect the motivations users have when engaging with with a language learning app. Vocabulario needed to meet these expectations in order to create satisfactory interactions.
1. As a busy person, I want a learning process that is fun and structures so that I can track my progress without dedicating extra time to do it manually.
2. As an educator, I want to learn Spanish, so that I can help students connect academic math vocabulary to their home language and succeed in my class.
3. As a visual and auditory learner, I want to see and hear the vocabulary I am learning so that I can connect the information more easily.
Design
User Flow Diagrams
I create three user flows to identify the journeys users would take in the app to achieve common tasks. This part of the design helped me identify possible pain points and opportunities for usability solutions.
Wireframes - Low-fidelity Sketches
In order to visualize and test design concepts early, I drew low-fidelity sketches of what I imagined Vocabulario to look like. The purpose was to identify the functionality of what I knew I absolutely needed in the design. Because these were paper sketches, I was able to redesign quickly and avoid investing in wireframes that were not working well with the design.
Wireframes - High-fidelity Designs
As I moved through the design process I identified pain points and necessary additions to the app. The following wireframes were created with Marvel.com and helped create the visual image for users to start testing.
User Tests
Three participants were recruited to conduct usability tests with the prototypes on Marvel.
I directed the participants to complete 4 tasks and recorded their interaction with the prototype. Based on their comments, I organized observations with Jakob Nielsen's Usability rating system to identify the severity of errors and implement solutions.
Prototypes With Improvements
Evaluating the Process
Upon making corrections to errors and improving the user interaction design, I outlined how the design process went and what is necessary moving forward to improve the Vocabulario App.
What Worked
- Building personas
- Creating digital wireframes
- User testing (this was the most beneficial part of the design)
What was Challenging
- Creating comprehensive user flows
- Building the lesson (creating ideas for gamification)
- Prototyping details (this was time consuming and it was easy to make functionality errors)
Recent Updates
01.07.22 - I refined Vocabulario's fidelity with FIGMA. I started with a mascot that would encourage users throughout their interactions with the lessons and games. I also made a color palette that would guide the visual design moving forward.
High-Fidelity Mockups
New Vocabulario Prototype
