RetainIt: AI-Powered Learning
Retainit
AI-Powered Gamification App for Online Learning
Much of the world uses the internet to consume content. However, how much of that is truly retained?
CORE PROBLEM
People use the internet daily to consume news articles, YouTube videos, podcasts, blogs, and many other forms of “casual learning.” However, when this adds up to 100+ sites in a single session, research shows only 25-60% of the content is actually retained. Even worse, traditional learning methods only retain 8-10% of the information. Retainit, a seed-stage startup based in the UK, aimed to build an app to help learners retain more information online.
MY ROLE
As the first design hire, I designed our brand identity and end-to-end web app MVP. This included user research and testing, stakeholder communication, designing and prototyping. I also set up weekly meetings with the founder and CTO to discuss feature prioritization and new iterations based on user feedback.
RESEARCH & TESTING
Our target users were students and working professionals who preferred learning online over traditional methods. Initial user interviews revealed these key pain points:
Unintuitive: Users often jumped between websites without reflecting on their learnings.
Retention: Users frequently forget to revisit previously consumed content.
Disruptive: Switching between websites and note-taking apps was cumbersome.
The founder and I conducted usability tests with students from Marginal Revolution University, an online platform for economics, and gathered feedback from a beta group of 100 users.
BRAND IDENTITY
Our target users—students and young professionals—preferred to learn outside traditional classrooms. I aimed for Retainit to embody the following brand principles:
Fun: Retainit shouldn't feel like being forced to do homework or watch a corporate training video.
Engaging: Retainit should be as engaging as a game or binging a YouTube video.
Seamless: Retainit should be your silent tutor in the background, improving your learning without disrupting the reading flow.
I chose a mix of Retro and Ocean palettes to reflect these principles, balancing a video game style with professionalism.
DESIGN PROCESS
At Retainit, we leveraged spaced repetition—a learning method that reviews information at increasing intervals—to help users retain online content. With Generative AI, we quickly create quizzes and games from any webpage. Users can save, regularly review quizzes, and track their progress in a gamified experience.
I designed three key flows:
While Browsing: Retainit’s toolbar hovers unobtrusively, reminding users to retain learnings by taking or scheduling a quiz.
Quizzing: AI-generated quizzes test users on concepts from the webpage. Afterward, users can see their score, review explanations, retake the quiz, or revisit related content.
Gamified Dashboard: The dashboard offers RPG-style progress tracking, quizzing stats, courses, badges, and quiz history.
WEBAPP
Empty state if user doesn’t have any quizzes generated. Prompt encourages them to download extension.
Key design decisions:
Empty State: New users hadn’t created any quizzes upon downloading the app.
Solution: We added a quirky call-to-action and engaging visuals to encourage users to download our extension and start creating quizzes. We also tested offering perks like badges and XP points for completing their first quiz.
Results: Successful user onboarding increased by 10%.
List of all quizzes they’ve generated from online content, with search filters, bookmarks, and date last reviewed.
Profile view.
Key design decisions:
Information Hierarchy The initial profile view was cluttered, with competing elements like the profile image, badges, XP, courses, and recent quizzes.
Solution: We ran A/B tests to refine the layout, comparing the impact of displaying badges vs. XP and courses vs. recent quizzes.
Results: To align with our main revenue partner, Marginal Revolution University, and drive daily engagement, we highlighted courses and daily quiz streaks, encouraging consistent interaction with MRU content.
QUIZZES
View when user is taking a quiz.
Testing out different copy and designs for the quiz results page. By adding social proof (“You did better than XYZ”) and badges, user is encouraged by their progress.
Key design decisions:
Continuation: Initially, the quiz results page only displayed a score, leading users to either browse or leave the app.
Solution: We added a “Next Up” modal with gamification incentives, like “Double XP to take another quiz.”
Results: Average quizzes per session increased by 50%.
Social Proof: We wanted to motivate users to improve their scores and continue learning.
Testing: We explored three options: comparing scores to friends, showing progress from their last attempt, and highlighting badge progress.
Results: Users felt more motivated by comparing scores to friends. However, due to tech stack limitations, we couldn’t fully scale this and tabled the design for future development.
Badges allow users to display progress proudly on their profile icons, as well as offer content creators (e.g. YouTubers, podcasters, news publications) the ability to offer branded badges for their top learners on the platform.
PRODUCTION
Retainit has launched a beta with Marginal Revolution University’s 300K+ subscribers and other YouTube creators of educational videos, and is on track for a public launch in 2025.
Let’s work together.
If you have a project in mind, or would like to chat, shoot me an email at laura.y.gao@gmail.com.