Masterly
mas∙ter∙ly | [ˈma-stər-ly] | noun
The Interactive Vocabulary App
00 Introduction
Product Brief
The brief called for a responsive vocabulary-focused app that empowers individuals to learn new vocabulary.
​
Problem
The current market offers a range of vocabulary-based applications, however, there is a noticeable lack of flexibility, versatility, and shortened study sessions.
​
Therefore, there is a need for an application that can offer Gen-Z users cross-platform compatibility, interactive games and activities, flexible study options, varied content presentation, and a milestone bar to increase user engagement and motivation towards learning.
​
Goal
Masterly is a personal project that I developed to showcase my expertise in employing the design process while demonstrating proficiency in memorizing and comprehending new concepts and techniques. This project was completed as part of my Introduction to UX Course at CareerFoundry
​
My Roles
UX Designer
UX Researcher
UI Designer
Information Architect
Interaction Designer
​
Tools Used
Pen and Paper
Figma
Marvel
​
​
The Design Process
Discover
Define
Ideate
Design
Test
Competitive Analysis
User Research
User Personas
User Flows
Sketches
Wireframes
Style Guide
Usability Testing
​
01 Discover
Competitive Analysis
com∙pet∙i∙tive anal∙y∙sis | adjective + noun
​
To kick off my project, I performed a comprehensive competitive analysis to evaluate the mobile applications currently available for vocabulary learning. This analysis helped me identify their strengths and weaknesses, which in turn allowed me to incorporate positive features into my own design.
​
Through a competitive analysis of Worducate, Vocabulary Builder, and Word Of The Day, several key findings emerged. These included a lack of personalization in the user experience, as well as an over-reliance on ads that hampered smooth navigation. Additionally, these applications were found to lack the excitement and modern design that users are seeking.
User Research
us∙er re∙search | noun
​
After conducting a competitive analysis to assess the strengths and weaknesses of existing vocabulary learning applications on the market, I proceeded to conduct user research to identify the specific needs and pain points of potential users. This process allowed me to gain further insight and inspiration for effective design techniques to incorporate in my own application
​
Interviews
I conducted qualitative research through the use of an in-person interview to better understand the user's thoughts and attitude toward using vocabulary applications.
​
Key Findings:
​
-
Repetitive content decreases motivation for studying.
-
Busy schedules leads to stress and prevents users from dedicating time to study new vocabulary.
-
Technology allows for easier access and manipulation of study materials.
-
Organized applications helps users feel more confident.
"The apps that I would use did not really help me long-term. Reviewing vocabulary felt like a chore because the app lacked excitement."
~Target Audience User
02 Define
User Personas
us∙er per∙so∙na | noun
​
After analyzing the data collected from the interviews, I utilized the insights to create a persona that represented the needs, goals, and behaviors of the target audience.
​
Meet Acsa
-
Acsa is a college student who has plans to become a nurse.
-
She hopes to split up and track her study sessions.
-
She wants to engage with her course materials without losing stamina.
​
03 Ideate
User Flows
us∙er flow | noun + verb
​
While brainstorming the structure of my application, I created user flows that provided a high level overview of the paths potential customers will take to navigate through to achieve their goals. As a result, I was able to identify specific pain points that helped with improving my designs. This part of the user experience design was also critical for communicating user experience architecture to stakeholders, product managers, and devlopers.
​
My 2 main user flows were:
​
-
Creating a personal study plan.
-
Establishing a means of reviewing vocabulary.
Sketches
sk∙et∙che∙s | noun
​
Based on my user flows, I had a few ideas concerning the overall design of my application and was able to create a few screens for content that I wanted to feature:
​
-
A sign up and onboarding process.
-
A menu so users could easily navigate through the application.
-
A built-in calender for scheduling study sessions.
-
A way to upload new vocabulary words.
​
Through my sketching process, I was able to graphically demonstrate my initial ideas, consider different approaches to solving my user's problems, and create space for better ideas and solutions to surface.
Initial onboarding sketches
04 Design
Wireframes
wi∙re∙fra∙mes | noun
​
After forming a solid foundation for the layout of my application, I began to create wireframes to start focusing on the hierarchy of information, structure of content, and functionality. Throughout the design process, I continued to enhance the level of detail and make improvements after each stage of the project.
For example, the major updates for the navigation bar at each stage included:
​
-
Low-fidelity wireframes: I created a navigation bar that rests at the bottom of the screen and included placeholders for text and images.
-
Mid-fidelity wireframes: I determined the 5 content categories that would be included in the bottom navigation bar and demonstrated which category users were viewing using a "selected state".
-
High-fidelity wireframe: I selected icons that allowed for a quick visual identification option and included the names of each content under their respective icon.
Transition from low- to high-fidelity wireframes
Style Guide
sty∙l∙e gui∙de | noun
​
My style guide defined the color, typography, icons, and UI elements that I wanted to include within my app.
05 Testing
Usability Testing
us∙abil∙i∙ty test∙ing | noun + adjective
​
After creating a low-fidelity prototype using Marvel, I conducted a usability test to measure its usefulness by seeing how real people interact with the application. I organized a moderated in-person interview with 3 participants in order to gather feedback and see if the application served its intended purpose.
​
Key recommendations included:
-
Add different visuals to icons to differentiate between sections.
-
Include a milestone bar at the beginning and end of the user's review session.
-
Include a button that allows users to flip to previous flashcards.
-
Ensure that the logo fits within the screen.
​
​
Final Designs
​
Reflection
​
During my design process, I faced several challenges with time management during wireframing sessions. While attempting to produce a memorable design, I became too focused on including excessive detail, which impeded my creative flow. Additionally, I recognized the importance of regular prototype testing and consistent design language across the entire application. Adapting to new prototyping tools, such as Marvel and Figma, presented an initial challenge. However, with practice, I was able to convey my ideas more effectively in digital formats. Overall, this project has allowed me to immerse myself in the world of UX design, and has provided a strong foundation for future design projects.