Learn Hero
Vocabulary learning application focused on users improving their knowledge in various industries.
Project Duration
3 Months
Role
UX Designer, UI Designer, UX Researcher
Category
SaaS, B2B, B2C
Objective
To redefine learning by providing a personalized, gamified vocabulary app that enhances knowledge retention and supports both personal and professional growth.
Problems
Goals
Help users retain and apply knowledge more effectively.
Enable continuous learning through industry-specific vocabulary search.
Strengthen user skills with interactive tests.
Support personal libraries for long-term reference.
Seamlessly fit into users’ routines while promoting career growth.
Tools
Figma
Figjam
Miro
Zoom
Adobe Photoshop
Marvel App
Google Material Symbols
User Research
Explore User Attitudes
Investigate user perceptions, preferences, and sentiments regarding existing vocabulary learning apps to gain insights into what aspects they find appealing or challenging.
Identify Pain Points
Uncover the specific challenges and frustrations users encounter while engaging with vocabulary learning apps, aiming to pinpoint areas that may hinder a positive learning experience.
Discover Valuable Features
Determine the features and functionalities that users consider valuable or essential in a vocabulary learning app, providing guidance for the development of a user-centric and effective application.
Competitive Analysis
Conducting SWOT analysis introduced what the market is offering, while identifying strengths and areas for improvement. The insights gained, guided design decisions, ensuring LearnHero to stand out in the marketplace with a user-friendly interface. Platforms such as Quizlet, Duolingo, and Memrise were analyzed to give LearnHero a stable ground in the market.
User Interview Scripting
Three interview sessions, each lasting 15 to 20 minutes, were conducted via Zoom with a panel of three interviewers. The objective was to gain deeper insights into user approaches to learning a new subject and enhancing their vocabulary skills.
User Research
User Personas
3 personas were developed which contributed to a specific goal when using the PlutoPay app.
Each persona focused on their needs, goals, motivations, behaviors, and frustrations using a digital payment app. This aided in my design decisions towards making the overall experience easy.
User Flows
User Story (Personalization)
As a user, I want a personalized experience to improve my vocabulary within that industry.
User Story (Saving to a Library)
As a user, I want to save terms to my own personal library so that I can have a collection for convenience.
Wireframes
Low Fidelity Sketches
I initiated the screen ideation process with low-fidelity sketches on paper, outlining key elements and user interactions. Following the development of these sketches, I created a basic prototype using Marvel.
This initial prototype served as a foundation before progressing to mid-fidelity wireframes. Prototyping the sketches in Marvel provided valuable insights into potential functionality enhancements.
Mid Fidelity
The design ideation process began shortly after compiling user stories and flows. Figma was used to create mid-level wireframes for LearnHero. These wireframes defined each screens purpose and function. My focus towards building the screens were aligned with personalizing the onboarding experience and saving terms into a library.
High Fidelity Wireframes
Using Figma, high fidelity wireframes were created post usability testing, focusing on personalizing onboarding, term-saving features, and flashcards. Feedback from user testing was utilized to further improve app functionality, while focusing on creating a visually cohesive experience on LearnHero.The app underwent significant changes in two iterations, transitioning its design style from a dark theme to a light one.
User testing revealed attributes in the flashcard feature, specifically the button labeled "flashcard mode" and "randomize." In the final high fidelity version, the button labeled "flashcard mode" was eliminated, and "randomize" was renamed to "Shuffle cards" to make LearnHero more intuitive for users.
Usability Testing
User Insights
Three participants were used to test the prototype of LearnHero. The evaluation employed Jakob Nielsen's error severity rating scale, ranging from 0 (no usability problem) to 4 (usability catastrophe), providing a structured approach to prioritize identified issues. The goal was to gain valuable insights into user interactions, pinpoint potential usability challenges, and determine the priority of improvements needed for an enhanced user experience.
Usability Test Reports
Following the conclusion of user testing, I compiled insights from the three participants to gain a deeper understanding of features that needed improvement. Analyzing user feedback revealed common friction points, primarily with tasks 2 and 3.
Task 2 highlighted navigation challenges, specifically in navigating between screens. Task 3 raised concerns related to screen transitions and enabling specific functionalities in Flash Card mode.
Iterations were applied to the app's functionality in the high-fidelity version, successfully addressing the issues identified by users during testing.
Iterations
High fidelity revisions
The app underwent significant changes in two iterations, transitioning its design style from a dark theme to a light one. User testing revealed attributes in the flashcard feature, specifically the button labeled "flashcard mode" and "randomize." In the final high fidelity version, the button labeled "flashcard mode" was eliminated, and "randomize" was renamed to "Shuffle cards" to make LearnHero more intuitive for users.
Design Doc
Style Guide
The style guide created serves as a comprehensive reference outlining colors, typography, iconography, design components, and layout guidelines to maintain a unified and polished look throughout Learn Hero.
Logo & Color Palette
Typography
Typography
Components
Inputs Fields & Dropdowns
Navigation & Header
Learnings
User Feedback
User interviews revealed what features were truly needed, leading to meaningful design and functionality improvements.
Incorporating real feedback into prototypes highlighted how user input elevates the overall experience.
Identify Pain Points
Mapping user flows clarified navigation paths and balanced simplicity with functionality.
Reducing onboarding questions prevented users from feeling overwhelmed.
Paper Prototyping
Using Marvel for hand-drawn wireframes caused focus issues, and notebook sketches felt messy.
Iterating on interview insights was time-consuming, underscoring the need for cleaner sketches and flexible early designs.
Other Projects
PlutoPay
SaaS
B2B
B2C
Digital Payment application that allows users to send, receive, and budget their money.
Oko
HTML
CSS
JavaScript
Fully coded responsive website optimized for accessibility and performance across all devices.