Contact

Back

App Design & Dev Case Study

iBook - AI Powered Reading Assitant

COMPANY

aiBook

ROLE

Design Engineer

EXPERTISE

UX/UI Design

YEAR

2024

Project description

While reading, I kept pausing to Google or ask ChatGPT about concepts I didn’t understand. It was frustrating and broke my focus. Then I saw Andrej Karpathy’s tweet: "The most useful use case for LLMs is a reading assistant." That simple idea clicked instantly—and I knew I had to build it.

Problem

Constantly switching between the book and external resources made deep engagement difficult, leading to fragmented understanding. This inefficiency highlighted the need for an integrated, real-time assistant that could provide relevant insights without breaking the reading experience.

Proposed Solution

I envisioned an AI-powered reading companion that seamlessly integrates into the reading experience, offering instant explanations, context-aware summaries, and intelligent insights without requiring users to leave the book. By leveraging LLMs, the system dynamically retrieves relevant information, enhancing comprehension while maintaining an uninterrupted flow, making complex texts more accessible and engaging.

Designing the system

This category details the step-by-step approach taken during the project, including planning, design, development, testing, and optimization phases.

This process uses a method called Retrieval Augmented Generation (RAG). It combines searching for useful information with the AI's ability to generate responses. Built with Langchain, the system ensures that if the required information isn't already available, the AI relies on its extensive training data. This approach keeps responses both accurate and helpful.

System Prompt

You are iBook, an AI reading companion that helps users understand and engage with books. Focus on text-first analysis, using quotes and evidence from the selected passage. Add external context only when necessary to enhance understanding.

Instructions:

Start with: "Let’s examine your selected passage."
Use 2-3 quotes from the text to support your analysis.
Explain the literary devices, themes, or character motivations in the passage.
Keep responses concise (under 150 words) and user-friendly.
End with: "Would you like to explore this further?"

Guardrails:

If the response lacks text evidence, say: "Let’s refocus on the passage."
For speculation, say: "While not explicit, we might infer..."
Match the explanation depth to the user’s reading level.

Example:
User Query: "Why does the character seem so conflicted?"
AI Response:
"Let’s examine your selected passage:
[Quote 1] 'His heart raced, torn between duty and desire' (p. 45) → This suggests internal conflict. The author uses contrasting imagery to emphasize the tension.

Would you like to explore the theme of duty vs. desire further?"

Instructions:

Start with: "Let’s examine your selected passage."
Use 2-3 quotes from the text to support your analysis.
Explain the literary devices, themes, or character motivations in the passage.
Keep responses concise (under 150 words) and user-friendly.
End with: "Would you like to explore this further?"

Guardrails:

If the response lacks text evidence, say: "Let’s refocus on the passage."
For speculation, say: "While not explicit, we might infer..."
Match the explanation depth to the user’s reading level.

Would you like to explore the theme of duty vs. desire further?"

Solution

As I had a clear goal in mind what I wanted to build, after ideating some concepts by sketching, I directly hopped into designing a high fediliy prototype.

AI Reading Assistant

AI algorithms analyze user preferences, availability, and priorities to generate optimized schedules.

Notes & Highlights

Seamless integration with popular calendar platforms such as Google Calendar and Outlook, ensuring synchronized scheduling across devices.

Personalization & Gamification

Personalization

& Gamification

Customizable settings allow users to tailor scheduling preferences and priorities to their unique needs.

Reading Experience Reminagined

Reading Experience

Reminagined

Figma : https://www.figma.com/design/csTecn8I0xQImKrO0wHafa/Portfolio?node-id=55345-2815&t=kdmH8hMpkDbN5q9B-1

AI-Powered Reading Companion

Ask questions, clarify ideas, and explore deeper meanings—all through natural conversations with your books.

Seamless Import Options

Your Library, Your Way, Upload files directly or import books from various sources effortlessly.

Daily Highlights & Notes for Active Recall

Stay Inspired Every Day, Receive key notes and insights.

Personalized Streaks

Build Your Reading Habit, Track progress and stay consistent with streak goals.

Development (Ongoing)

Github : https://github.com/madansap/Ibook

Core Technology Stack

Core Tech Stack

The application was built using the Expo framework for universal iOS, Android, and web development, leveraging Expo Router for efficient navigation. Clerk provides secure user authentication flows.

Backend & Data Structure

Supabase is utilized for data persistence, with a PostgreSQL database schema designed to manage core elements like books, user progress, highlights, and notes, including a specific structure prepared for storing AI-generated explanations. Row-Level Security policies are configured for data protection.

Frontend Implementation & AI Features

The user interface is crafted with custom React Native components, featuring an engaging multi-step onboarding process and intuitive tab navigation. The core reading experience includes interactive text selection and custom highlighting, and UI components are in place to support AI-powered tools, such as a contextual chat sheet for book interactions and text analysis functionalities. React Native Reanimated and Gesture Handler were integrated for smooth UI animations and gestures. The codebase is developed primarily in TypeScript.

Pivot

While talking to users and ideating, it became clear that a desktop version would be more effecient than the mobile app. So I prioritized building for the web screens first. Here I am vibe coding the complete product from 0 to 1.

Core Technology Stack

Backend & Data Structure

Frontend Implementation & AI Features

Results

This AI-powered reading assistant was inspired by my struggle to understand complex topics while reading. By using Retrieval Augmented Generation (RAG) and a large language model (LLM), the assistant provides clear and accurate answers from a knowledge base or the web, making learning easier and more engaging. Through this project, I learned how to design systems that combine multiple technologies to solve real-world problems effectively. However, there are limitations, such as the system’s reliance on the quality of its knowledge base and web sources, and occasional inaccuracies in responses. Despite these challenges, this project highlights the potential of AI to enhance learning and make complex information more accessible.

Increased Efficiency

Users report significant time savings and improved productivity through optimized scheduling recommendations.

Positive User Feedback

High user satisfaction ratings and positive reviews highlight the app's intuitive interface and powerful AI capabilities.

Growing User Base

The app quickly gained traction among individuals and businesses worldwide, with a steady increase in user adoption and engagement.