CASE STUDY
Redefining the Editorial Experience
How we transformed a fragmented reading ecosystem into a cohesive, immersive narrative platform focused on retention and typographic clarity.
01 — THE PROBLEM
The Problem
Summary
02 — THE SOLUTION
The Solution
Summary
The Brief
TIMELINE
4 Weeks
ROLE
End-to-End Product Designer
TOOLS USED
Lovable: MVP infrastructure
Maze: Usability testing
Google Stitch: Rapid UI generation & visual layout
Claude Code: Merge the MVP and design
I enjoy being able to track my books on Goodreads, but I ran into a constant frustration: the lack of private note-taking. I didn’t want every note, plot summary, or reaction displayed on a public board, which meant I avoided writing notes altogether.
As a result, when discussing certain books later, I couldn't recall how stories ended or how key plot details played out. What started as a solution for my own reading routine quickly revealed a broader market gap for readers seeking privacy over performance.
DISCOVERY PHASE
Competitive Insights
Existing platforms push readers to choose between social pressure (Goodreads), tedious data entry (Libib), or cognitive overload (Bookshelf). Book Oasis closes this gap by providing a focused space for distraction-free note-taking while reading and offering quick access to plot refreshers.
Goodreads
Massive database: Powered by Amazon
Strong community reviews and shared reading challenges
Outdated UI mobile experience
All notes and ratings post to public feeds by default
B. Libib
Rapid barcode scanning to keep track of what you own at home
Keeps books, movies, and board games organized in one app
Prioritizes technical data entry such as format, price, and ISBN.
Lacks space to jot down quick notes or plot reflections while reading
C. Bookshelf
Modern interface with dark mode & custom book cover layouts
Built-in reading timers and visual progress stats
Overwhelming setup with too many tags, sliders, and metrics
Prioritizes tracking pages and timers over private plot notes
Building the MVP with Lovable
While Figma AI builds realistic static UI, it cannot fetch live API data or save state. Building in Lovable unlocked a functional MVP for testing:
Live Book Discovery (Open Library API)
Lovable: Real-time search by author or book title.
Figma Limit: Fixed paths with static placeholder text.
Persistent Storage (Supabase)
Lovable: Notes stay saved across sessions and devices.
Figma Limit: Typed text wipes clean on refresh.
The Outcome:
Participants focus on searching and journaling rather than navigating prototype workarounds.
*** Replace this section with a 5-10 second video of the original MVP and type in any book into the search bar to view search results and saving a note
FEATURE
Supabase integration
Open library API integration
Private note text box
Note edit/delete button
Reading status categories
Impact (1-10)
10
9
10
9
8
Confidence (1-10)
10
10
9
9
8
Ease (1-10)
10
10
10
10
10
Total Score
10
9.6
9.6
9.3
8.6
VALIDATION
Usability Testing: Round 1
Conducted moderated usability testing with 3 participants using Maze on the live Lovable MVP. The goal was to validate core note-taking flows, search mental models, and privacy indicators.
Search & Navigation
INITIAL MVP
1. Users typed book titles into the Home search bar expecting global web results, but it was restricted to their saved library.
2. Realizing the search failed, users ended up clicking an external "Open Library" link to find new titles.
3. Confused by the multi-step navigation, users bypassed search and jumped straight to manual entry to add a book.
ITERATED DESIGN
1. Combined local and global search into a single Home input, eliminating extra clicks and manual entry fatigue.
2. Structured search results into two categories, prioritizing "In Your Library" matches at the top and placing "Add to Your Library" web results directly below.
Onboarding & Privacy Indicators
System Feedback & Microcopy
Usability Testing: Round 2
The revised navigation pattern was a resounding success. Time-to-find-chapter decreased by 60%, and overall task satisfaction scores jumped from 3.2 to 4.8 out of 5.
−60%
TIME TO NAVIGATE
4.8/5
SATISFACTION SCORE
Visual Exploration
Visual Direction
The final visual language leans heavily into editorial restraint. By stripping away extraneous UI elements and adhering to a monochromatic palette with a single vibrant accent, the content becomes the interface.
Bodoni Moda / Inter
Final Design
Experience the Final Build
Explore the interactive prototype to see the dynamic typography, ambient progress tracking, and refined navigation in action.
LAUNCH PROTOTYPE
HELLO