LeetCard: AI-powered Flashcard
Cross Platform App
January 2024 - March 2024
The LeetCard app project aimed to fill a gap in the existing flashcard apps and Leedcode study tools. As a UI/UX Designer, I focused on designing an intuitive and visually engaging study app tailored to streamline the learning process for software engineers.
What I did
- Research
- Conceptualization
- Design
- Design System
- Development Handoff
Who I worked with
- Mobile
/Introduction
Technical Interview Prep Can Be Overwhelming...
LeetCode has become one of the most essential tools for interview preparation, helping candidates sharpen their coding skills through a vast collection of algorithmic challenges.
However, some developers prefer to thoroughly code out every solution, while others take a conceptual approach, solving problems mentally or using pseudocode to focus on patterns and techniques.
Despite these different approaches, many developers uses spreadsheets or notes to track their progress, but these methods still have their limitations. The goal of LeetCard is to provide a more efficient and effective solution to this problem.
What we already know:
- Developers can only study LeetCode when they have access to a computer, making it hard to review problems on the go.
- Reviewing past problems is crucial for reinforcing problem-solving strategies.
- Many developers use spreadsheets or note-taking apps to track solved problems.
Hypothesis
"If we create a tool that allows users to study anytime, anywhere, they will have more opportunities to practice and reinforce problem-solving strategies, making their interview preparation more efficient."
/Design Process
LeetCard Embraces a Lean UX Approach
The design process for LeetCard follows a lean UX methodology. It began with researching whether users of LeetCode would find value in a flashcard app to enhance their study process. This approach allowed me to quickly validate the concept and determine the feasibility of moving forward with the project.
Think
Research & Early Validation
Competitive Analysis
To understand the market landscape, I conducted a comprehensive competitive analysis of existing LeetCode study tools. This analysis allowed me to identify their strengths and weaknesses while uncovering opportunities for improvement. Although there were no direct competitors to LeetCard, I found many indirect competitors that offered similar features.
Indirect Competitors:
- LeetCode: Offers a vast collection of algorithmic problems for practice
- NeetCode: Provides a better structured and refined set of LeetCode problems
- Notion: Used by many developers to track solved problems
- Google Sheets and Excel: Used by many developers to track solved problems
- Quizlet: Offers a flashcard app for studying
I discovered that many users were crafting their own solutions by combining different services or building their own tools, as there were no direct competitors fully addressing their needs. By analyzing the key components users relied on, I identified essential features to incorporate into our product. This informed the next step: conducting a task analysis to understand the user's workflow and key tasks.
User Journey
To understand the user’s experience and challenges in preparing for technical interviews, I mapped out a user journey of the LeetCode study process. This journey revealed key pain points, such as the inefficiency of manually tracking and recalling solved problems. By analyzing each stage—from solving problems to reviewing past solutions—I gained insights into user frustrations and opportunities for improvement, which directly informed the design of LeetCard’s core features.
User Persona
I created a persona to represent our target user, a software engineer who is preparing for technical interviews. This persona helped me understand the user's needs, goals, and pain points, guiding the design process to ensure the app would meet the user's expectations and provide value.
Defining Key Areas for Improvement
Competitive analysis, user journey mapping, and interviews revealed major challenges in how developers track and review LeetCode problems. Spreadsheets and notes are inefficient for quick recall and disrupts learning. Additionally, studying is restricted to desktop access, limiting flexibility. These insights shaped the core design features to enhance accessibility, recall efficiency, and engagement.
Key Opportunity Areas:
1. Enable Study on the Go
- A mobile-first experience allows users to review and reinforce problem-solving strategies on the go, fitting study sessions into daily routines
2. Replace Manual Problem Searching with Randomized Recall
- Instead of manually selecting problems to review, a quiz-like recall mode can surface problems dynamically, reducing decision fatigue
- Spaced repetition can help reinforce weaker areas by resurfacing problems strategically
3. Focus on Solutions with Predefined LeetCode Problems
- The app will predefine LeetCode problems, so users only need to input their solutions—eliminating manual entry
- If users don’t have a solution, AI-powered assistance can provide hints or generate example solutions to aid learning
Make
MVP Development
To simplify the MVP and maximize user value, I focused on incorporating core features that addressed the primary needs of our target audience. Initially, the plan included only the "Study Plan" and "All Cards" sections. However, as the project progressed, the team identified the critical importance of a "Profile Page." This addition allows users to securely save their data, alleviating concerns about potential content loss while enhancing the overall platform experience.
Design System
The design system for this project was crafted entirely from scratch, without relying on pre-existing UI kits or libraries. This approach ensured a unique and tailored visual identity that aligned with the app's goals. The system was designed with scalability, consistency, and efficiency in mind, providing clear guidelines and reusable components. This foundation supports seamless collaboration and allows the product to evolve while maintaining quality and coherence.
Prototypes and Navigation Design
Keeping the MVP in mind, I developed prototypes to visualize the app's layout and functionality. Based on user needs, I implemented a bottom navigation bar to create a more intuitive experience. This decision was made to facilitate seamless navigation between the "Study Plan" and "All Cards" sections, particularly for users who frequently switch between these features while organizing their study plans.
Check
Launch and Post-Release Analysis
To expedite the release process, we launched the app without conducting traditional user testing. Instead, we focused on gathering real-world usage data to inform improvements. While user testing can provide valuable feedback, we prioritized swift market entry to gain a more authentic and comprehensive understanding of user behaviors and preferences. By monitoring user interactions and collecting feedback post-launch, we committed to an iterative process of refining the app, ensuring it meets the needs of our target audience and delivers a user-centric experience.
The iOS version launch generated an overwhelmingly positive response. Our developer shared the product on Reddit, where it received over 300 upvotes within a single day. This feedback highlighted strong demand for the app, with many users requesting an Android version, which is currently in development. Additionally, the expressed interest in a web version validated our roadmap and aligned with our future plans for platform expansion.
/Future Directions
How Can We Improve Retention and Engagement?
While the app's launch was a success, achieving over 1,000 downloads in the first two weeks and receiving praise for its aesthetic design and intuitive UI, we noticed that active user engagement fell short of expectations.
To address this, we are focusing on the following future directions:
1. Enhancing Retention:
- Adding features to improve usability and encourage regular app
usage.
- Refining the user experience based on behavioral data and user
feedback.
2. Gathering Insights:
- Conducting user interviews to understand pain points and unmet
needs.
- Iteratively updating the app to better align with user
expectations.
With these initiatives, we aim to create a more comprehensive study tool tailored to the needs of software engineers and ensure sustained user engagement.