STATUS : Internship ended Aug 2026. Data as of 31 Aug 2026.
Redesigning Fanfiction.net for next Gen.
Overview
Stuck between a buggy app and outdated web, that’s FanFiction.net’s user experience today. Modernizing the reading & writing experiences of FFN to bring users back.
The Challange
Buggy app + outdated site frustrate readers—crashes, clunky design, poor discovery drive them away.
The Opportunity
A PWA revamp brings stability, intuitive discovery, and a seamless reading experience across devices for user adoption and retention.
Year & Duration
2023 | 4 Weeks
Industry
Digital Publishing
My Role
Researcher
UX Strategist
UX, UI Designer
Tools
Figma
Notion
The Process
Research
Brand Research
Feedback
Competitor Analysis
Tech Analysis
Heuristic Analysis
User Research
Synthesis
User Persona
User Journey Map
Needs & Goals
Ideation
Mind mapping
Redesign Strategy
User & Task Flow
Info Architecture
Mid-Fidelity
Testing
A/B Testing Feedback
User Feedback
Refining
Final Design
Style Guide
High-Fidelity
Figma Prototype
User Flow
Brand Research
Fanfiction.net is a platform for readers and writers of fan-created stories based on existing fiction.
User Base
Users Base based on Age | Source: semrush.com
The Target Users
Existing Fanfiction.net users
Fans of niche fandoms
Potential Users seeking a wider variety of fanfiction
General Users
Fanfiction Readers
Fanfiction Writers
Fanfiction Reviewer
Major Access Points
Mobile App
Mobile Web
Desktop
Monetization
FFN is a Non-profit private company. Possibilities: Ads | Existing users | Niche fandoms | New audiences
What is FFN?
One of the oldest and largest hubs of fan-fiction
(since 1998)
High Mobile Traffic
Users Can
Publish stories
Rate and review
Connect with Forums & Discussions
Private messaging
What do users have to say?
Experiences & Expectations
Right Off Reddit
General, condensed feedback from Reddit
Filtering Issues – Poor tags & filters make search difficult.
App Instability – Crashes drive users away.
Lack of Moderation – Users prefer AO3’s control.
Platform Strength – Vast library & author reach keep users.
Finding what you're looking for is a struggle—like searching for a needle in a haystack!
My fics get more views on FFN, but I prefer AO3 because I can moderate the comments.
It crashes all the time, making it impossible to read stories for more than a few minutes!
From Google Play Store
Summarizing the rants
Buggy Updates – New updates worsen crashes & usability.
Functionality Issues – Reading modes, touch, & search are frustrating.
TTS Failure – A key feature is broken for many users.
Usability Decline – Overall experience has deteriorated.
Note: Performance issues (likely dev issues) drive users to abandon the app for the web. This exposes a critical UX gap - the app doesn't meet user expectations.
Market Research
The Big Three of the Fanfiction
SWOT Analysis
Unpacking Potentials
Strengths
Vast Content
Strong Brand
Loyal, active community
Community Interaction
Opportunities
Bridge the gap in Mobile web and mobile app
Personalization
Platform Uniformity
Enhanced discovery(search, filter, recommendation)
Updated UI
Weaknesses
Disjointed mobile experience
Limited & lack of crucial features
Outdated UI
Poor User Engagement
Limited User Retention
Recommendation System
Threats
User migration to other platforms
Going out of relevance & not attracting new users
Changing User Preferences
The Problem
Holistic Insights: A Unified Approach
Through usability testing, heuristic evaluations, competitor analysis, and mapping personas and journeys, I uncovered critical insights that shaped the design strategy
Too many features~
Icons everywhere~
Overwhelming to look at~
~How old is too old?
~Hidden/ inaccessible features
~Underwhelming to look at
Design Goals
What does the Business need?
Boost Engagement
Increase user engagement to prevent platform closure.
Cost Efficiency
Ensure cost-effective development and maintenance.
Better Performance
Fast loading and stable, crash-free experience.
Enhance Functionality
Offline reading with a focus on ease of use.
Content Discovery
Efficient search and filtering.
Enhance Mobile Experience: Ideation Phase 1
Brainstorming MVP Features for Fanfiction.net PWA based on Opportunities identified in Experience mapping.
The Solution
A Progressive Web Application
Web+ App+ Modern Tech= PWA
Why PWA?
Proof of Design
Strategy
Just as important as a solution?
A Redesign & execution strategy.
Core Functionalities in a nutshell
Basic story discovery (search, filter, browse by category/fandom)
Reading stories with essential features (font size adjustment, night mode)
Push notifications for updates from favourite authors or stories
Offline reading capability
PWA MVP Features: Ideation Phase 2
Brainstorming MVP Features for Fanfiction.net PWA based on Opportunities identified in Experience mapping.
How to Implement
To streamline Fanfiction.net’s mobile experience, I'll be designing the minimum viable product(MVP) of the Progressive Web App (PWA) with a focus on Information Architecture.
Enhanced information architecture to improve navigation and facilitate content discovery through filters, sorting, and clear visual hierarchy in list displays.
Improve overall usability for mobile users with clear and concise UX writing (e.g., clearer labels, more specific instructions).
Generic User Flow
Scenario : To select & download a story to read through search, filter & sort by preference.
Creating Task Flow
Scenario : To select & download a story to read through search, filter & sort by preference.
Reiterating the Information Architecture
Incorporating all expectations & Oppurtunities to make an intuitive interface.
Wireframing
Mid-fidelity Wireframes that reflect key changes
The wireframes reflect the key changes I've made to make the platform user-friendly & welcoming.
User Testing
But after wireframes? Yes.
Getting User Feedback on design after Mid-fidelity prototype helped me focus on the usability of the redesign as it helps identify issues with navigation, information architecture and workflow.
Test Setup | Methods & participants.
Methodology: Task based+ Think Aloud Protocol
3 Participants (2 new FFN Users, 1 existing FFN User)
Positive Feedback
Layout Appreciation (3/3 Users)
Dark Mode Preference (3/3 Users)
Direct Search (3/3 Users)
Areas for Improvement
Icon Clarity (2/3 Users)
Lack of gesture swipe for switching chapters (1/3 Users)
Positive Feedback
Layout Appreciation (3/3 Users)
Dark Mode Preference (3/3 Users)
Direct Search (3/3 Users)
Areas for Improvement
Icon Clarity (2/3 Users)
Lack of gesture swipe for switching chapters (1/3 Users)
Design
Explore the Prototype
Press "r" to restart prototype
What’s Changed?
PWA that seamlessly transforms the mobile experience
Onboarding to further understand preferences for recommendations
Enhanced IA with prioritized features
P.s Slightly tweaking the brand color but keeping it similar enough to hold the brand identity.
Style Guide
For the Refreshed FFN mobile experience
Subtle update, staying true to the brand’s blue. Gradients symbolize the diverse stories on the platform
Primary
Secondary
Background
Coral
Emerald
Orange
Mauve
Plum
The Redesign Breakdown
A New Look, A Better Experience:
What's Changed in the App?
Home
//Made simpler
Search
//Made smarter
Filters
//Made Easier & Cleaner
Library
//Made Accessible
Search Results
//Clear & uncluttered
Category/ Genre
//Navigatable
Reading Tab
//Made optimal
Story Preview
//Intuitive & Spoiler Free
The New Additions: Onboarding with Purpose
And more!
Future Scope
Smooth Sailing, No Crashes
UI vs UX Challenge
Addressing issues like app crashes required prioritizing performance alongside aesthetics, ensuring a reliable and enjoyable user experience.
Prioritizing the user's needs led me to rethink every interaction, focusing on simplicity and consistency to boost engagement and minimize friction.
Next Project
2025 © Subarshni N. All rights reserved.