Brand / Web Design / Editorial UX
Talk of the Town
TOTT Books — First Professional Project
Architecting an Editorial Digital Ecosystem: Balancing Whimsical Visual Storytelling with Structured Conversion Funnels for a Modern Publishing House
Role
Lead Brand Architect & UI/UX Designer
Project Nature
First Professional Project — Full Creative Ownership
Core Deliverables
Brand Identity, UX Components, User Flow Framework
Target Framework
Custom WordPress Platform — Strategic Developer Hand-off
01 — The Challenge & Creative Identity
A publishing house that needed to feel poetic and convert like a business
TOTT Books was established as a contemporary publishing house built to empower independent authors, celebrate bold storytelling, and remove entry barriers in literature. The core challenge was designing a platform that honors the traditional craft of bespoke bookmaking while functioning as an active lead-acquisition system.
The interface needed to feel welcoming, poetic, and creative — while keeping user goals organized through clear visual parameters. A balance most publishing sites fail to strike.
The Experience Paradigm
02 — UI Design Principles
The editorial canvas — four disciplines that define the system
The visual system relies on clear UI disciplines to support an emotional tone of trust, growth, and creativity. Every design decision was grounded in one question: does this feel like a place where authors belong?
Visual Storytelling
Instead of bogging the interface down with dense corporate text, rich symbolic illustrations convey the brand narrative — reinforcing an author-friendly environment through screen space.
The Soft Palette
A calculated arrangement of earthy, calming tones anchored by Deep Teal, Mint, Warm Ivory, and Accent Gold ensures strong contrast and accessibility metrics without compromising warmth.
Elegant Typographic Pairing
Headings leverage a sophisticated serif (Cormorant Infant / Martel) mirroring literary elegance, while body structures are locked into clean Montserrat to maximize reading comfort.
Grid-Based UI Discipline
The layout maps strictly to a multi-column grid alignment system. Clean boundary padding and predictable component spacing maintain visual harmony across all layout transitions.
Brand Colour Palette
03 — UX Blueprint
Page structure map — six sequential intent blocks
The storefront layout is organized into distinct, bite-sized components designed to introduce the brand and handle user intent sequentially — each block passing the visitor forward with increasing conversion pressure.
Page Layout — Wireframe Simulation
Hero Section
Whimsical artwork + main value card — 'From Concepts to Best Sellers'
About Block
Mission statement and brand introduction — Meet TOTT
Why TOTT Grid
4 value proposition quadrants with custom character art icons
Process Track
4-step roadmap from Concept → Design → Publishing → Success
Workbook CTA
Gated free writing workbook — lead capture + download mechanism
Contact Form
Minimalist inline capture fields against a forest landscape graphic
The "Why TOTT" Core Matrix
Made-to-Order Publishing
Every manuscript is handled as a bespoke creative project — no generic print templates.
Your Literary Architects
A dedicated creative team guiding authors from initial concept through final publication.
Bespoke Bookmaking
Custom cover design, interior typesetting, and physical print quality matched to each author's vision.
Books Without Boundaries
Global distribution pipelines ensuring every title reaches readers across digital and physical channels.
The Step Roadmap — Concept to Success
Concept & Creation
Manuscript development, editorial alignment, and structural story outlining.
Design & Development
Cover art, interior layout typesetting, and brand-matched visual production.
Publishing & Distribution
ISBN registration, print-on-demand setup, and global platform distribution.
Promotion & Success
Launch strategy, social media assets, and reader acquisition campaigns.
04 — User Flow Breakdown
The 4-tier funnel path — from curious visitor to published author
To ensure the interface successfully converts curious site visitors into published authors, the component layout maps tightly to a 4-tiered interaction framework — each stage progressively increasing trust and commitment.
Explore
Landing View & Core Grids
Users arrive, engage with the illustrative hero block, and naturally progress through introductory service sections to establish foundational interest.
Initial InterestEngage
Workbook Download CTA
Users enter a low-stress interaction layer — reviewing the 4-step roadmap or downloading the free writing workbook, creating a value-first engagement.
Soft Value StepConvert
Book Store or Inquiries
With trust established, users encounter hard conversion targets — purchasing from the e-commerce catalog or initiating direct publishing consultations.
Hard ConversionRe-engage
Editorial Newsletter
For users exiting without a contract, a clean footer with blog links, social nodes, and newsletter sign-up ensures secondary capture for long-term relationship building.
Retention Loop05 — Resolution
A first professional project delivered as a fully realized, conversion-driven publishing identity
By taking complete ownership of TOTT's creative strategy and visual architecture, this project became a foundational proof of cross-disciplinary design — brand, UX, and developer hand-off in one unified delivery.
Established Brand Authority
Translated an abstract concept into a fully realized publishing identity — custom print elements, media assets, and logomarks.
Engineered Intentional UX Paths
Replaced generic gallery templates with a structured, conversion-driven editorial landing built on solid layout logic.
Flawless Developer Hand-Off
Structured specification blueprints enabling a developer to deploy on WordPress while preserving every margin, color token, and grid parameter.
Reflection
TOTT proved that a publishing house doesn't have to choose between feeling like literature and functioning like a business. Great UX makes both true at once.
First Professional Project — Full Creative Ownership