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
- UX Design
- UI Design
/Problem
Technical Interview Prep Can Be Overwhelming...
Many developers struggle to efficiently refresh their memory on solved problems while preparing for technical interviews. This challenge is particularly pronounced during job hunting, where time is of the essence, and organization is critical.
A common approach involves using Excel or spreadsheets to track and manage solved LeetCode problems. However, these tools are often inefficient, cumbersome, and not optimized for this specific purpose, leading to frustration and wasted time.
/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
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. 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 synthesized the most effective features from these solutions to create a cohesive and user-centric experience for our product.
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.
Design Decisions
Guided by the competitive analysis and user persona, we incorporated specific design features to address the target user's goals and pain points:
Profile Page:
- Provides data security by allowing users to save progress securely
- Offers a personalized experience, enabling users to track their performance
- Keeps users motivated by showcasing their progress and achievements
Bottom Navigation Bar:
- Implements a familiar and intuitive navigation layout for ease of use
- Enables efficient switching between key tasks like managing study plans and reviewing flashcards
- Reduces friction and enhances usability, especially for time-sensitive users
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.