Storade
Research Structure Brand System UI
UX / UI Case Study Mobile & Web · 2025

Storade

Where stories trade

A reading marketplace that gives independent authors a fair way to publish and get paid, and gives readers a calmer way to find stories worth their time.

Role
UX/UI Designer
End-to-end
Scope
Research, IA, wireframes,
branding, design system, UI
Platforms
iOS app
Responsive web
Tool
Figma
Storade mobile app on two iPhones
01
Overview

Serialized fiction is crowded at the top and silent everywhere else.

New authors publish into a void: no fan base, no marketing budget, and no clear view of how their earnings are calculated. Readers have the mirror problem, scrolling past the same mainstream titles while niche genres stay buried behind paywalls placed before the first chapter.

Storade was designed as a two-sided marketplace where discovery, feedback and revenue all happen in the open.

Visibility is pay-to-win

Without an existing audience or marketing knowledge, good work simply stays unread.

Revenue is opaque

Authors can't see how a split is calculated, and readers have no light-touch way to support them.

Discovery is noisy

Niche titles are overshadowed, and there is no reliable signal for when a followed author publishes.

Design goal

Build one product that serves two opposing users without either side feeling like the compromise.

02
Research

Two audiences, researched separately.

I started with competitor research across existing serialized-reading platforms, looking specifically at how each one handles promotion, payment and author-to-reader communication. I then spoke with readers and aspiring authors about where those systems break down in practice.

The findings split cleanly into two target groups. Every feature that made it into the product traces back to a need or pain point below.

Author persona
Author
Writes and publishes serialized work
Needs
  • A recommendation or feedback system from readers to improve writing.
  • Copyright and revenue management, including systems to prevent copyright infringement and revenue collection.
  • Easy-to-start revenue support systems, such as tipping or episodic support.
  • Reaching new readers or target audiences unfamiliar with the work.
Pain points
  • A platform that helps promote and reach target audiences easily.
  • A fair revenue-sharing system.
  • No existing fan base or reputation, so strategies to attract new readers are needed.
  • Lacking in-depth knowledge of online marketing strategies.
Reader persona
Reader
Follows authors and reads across genres
Needs
  • A smooth reading experience, such as an easy-to-use app that supports all devices and features like "Night Mode."
  • New release notifications, such as alerts when a followed author publishes new work.
  • A variety of options, allowing access to diverse novel genres without wasting time searching.
  • Flexibility, such as free-to-read episodes or attractive promotions.
  • A platform that makes it easy to find specific types of content.
Pain points
  • Lack of communication from authors, making it unclear when new novels will be released.
  • Restricted content access if a subscription or payment is required upfront.
  • Difficulty finding niche novels, as they are often overshadowed by mainstream titles.
From needs to features

Key features

Authors
Feedback and Poll System
Allow authors to gather feedback from readers.
Automatic Promotion System
Help new authors reach their target audience.
Fair Revenue-Sharing System
Enhance transparency and build confidence for authors.
Per-Episode Support and Tipping System
Provide additional income opportunities for authors.
Author Blog Page
Offer a space for authors to build their brand and foster relationships with readers.
Readers
Search System
Support for niche novels and genres.
Night Mode and Reading Screen Customization
Allow users to adjust the reading experience for comfort.
New Episode Notifications
Alert readers when a new episode is released.
Author Following and Support System
Enable readers to follow and support their favorite authors.
Communication Between Users and Authors
Facilitate interaction through comments, messages, or feedback features.
03
Structure

One flow that switches perspective, not products.

Authors and readers share an account, a library and a navigation model. Rather than building two apps, I mapped both journeys onto a single flow and marked the points where the interface changes perspective: publishing tools appear for authors, following and support tools appear for readers.

The full flowchart covers account creation, genre onboarding, browsing, reading, publishing, monetisation and settings, including every error and empty state.

Storade end-to-end user flow
End-to-end flow covering both the reader and author journeys.
04
Wireframes

Greyscale first, so structure was settled before style.

Every screen was wireframed in greyscale for both platforms before any colour was applied. Mobile carried the reading experience; desktop carried browsing, publishing and account management. Feedback from this stage was applied to the structure rather than to individual screens, which kept the two platforms from drifting apart.

Mobile
Mobile wireframes
Desktop
Desktop wireframes
05

Branding

Storade logo

In a world where stories hold more value than words, Storade is a space where writers and readers connect, exchange inspiration, and embark on journeys through text. We are more than just a marketplace for books, we are a community of stories where everyone can share and discover something new.

Mark construction
Logo construction from a book form

Our S logo is more than just a letter; it symbolizes the flow of narratives, derived from the base of a book, representing the evolution of ideas as they travel from the writer's pen to the reader's eyes.

Brand palette
Brand colour proportions
Storade app icon on a home screen
App icon

The mark holds at icon scale without the wordmark, staying legible next to system apps.

06
Design system

Built once, used on both platforms.

Open Sans across the whole product, in three weights, on a blue-to-navy scale that keeps long-form text comfortable in both light and dark reading modes. Navigation, buttons, chips and dropdowns were built as variant sets, so a change to a component propagated to every screen instead of being repainted by hand.

Colour
Colour tokens
Typography
Open Sans type specimen
Navigation states
Tab bar states
Buttons & actions
Button variants
07
UI design

The interface, screen by screen.

Mobile first, then the responsive web build. The four flows below are the ones that carry the product: getting in, reading, publishing, and keeping up with authors.

Getting in

Account creation and genre onboarding

Readers can preview the marketplace before signing up. Picking three favourite genres seeds recommendations immediately, so the home screen is never empty on first open.

Welcome gate Start Reading intro Create account Genre selection
Sign in
Sign in
Home, reader and author
Home, reader and author

Reading

Books, authors and the reading screen

A novel page leads with free chapters, ratings and genre tags before it asks for anything. Text size, weight and night mode are adjustable from inside the chapter, so the reading screen adapts instead of forcing a settings detour.

Books and authors screens
Author's perspective
Author's perspective, announcements and comments
Chapter list
Chapter list with release dates

Publishing

Four steps from idea to live chapter

The publishing flow separates the creative decisions from the commercial ones. Story details come first, then publishing mode, payment and rights, then upload. Nothing about money is hidden behind a second screen.

Author home with New Waiting
Start a new writing
Basic information
Fill in the writing information
Publishing information
Choose a publishing method
Upload new writing
Upload new writing

Night mode

A full theme, not an inverted one

Night mode was designed as its own set of tokens rather than a filter over the light theme, so cover art keeps its contrast and body text stays soft enough for long sessions.

Night mode, appearance settings and following Night mode home

Desktop

The same system, more room

On the web the tab bar becomes a persistent header, and the extra width goes to browsing and to the author's chapter management, where seeing many rows at once genuinely helps.

Desktop home, reader
Home, reader's perspective
Desktop home, author
Home, author's perspective
Novel detail
Novel detail and synopsis
Chapter management
Chapter management
Following authors
Following authors
Reading a chapter
Reading a chapter
Appearance settings, dark
Appearance settings, night mode
Reading, dark
Reading in night mode
Marketing gateway Log in Create account Favourite genres Account menu Settings
08
Handoff

Handed over as a system, not a stack of screens.

Development received the file with named components, documented states and spacing taken from the system rather than measured off individual screens. Working through implementation questions with the team is also where several details were simplified: anything that needed a paragraph of explanation to build usually needed a paragraph of explanation to use.

Reflection

The biggest takeaway was learning how to balance user needs, business requirements, and technical constraints while keeping the experience clear and consistent. It also improved how I structure design decisions and communicate them with the team.

← All projects