Case Study
The Sentral
Designing clarity for a magical story
Role
UX/UI designer
Web implementation
Role
UX/UI designer
Web implementation
Tools
Figma
WordPress.org
Elementor / Custom theme
CSS
Tools
Figma
WordPress.org
Elementor / Custom theme
CSS
Time
2 weeks - December 2025
Time
2 weeks - December 2025
Context
Context
Context
The Sentral is a fantasy book project that needed a website to introduce its world and story to readers. The goal was to create a digital space where users could explore the narrative in a clear and immersive way while maintaining a comfortable reading experience across devices.
The Sentral is a fantasy book project that needed a website to introduce its world and story to readers. The goal was to create a digital space where users could explore the narrative in a clear and immersive way while maintaining a comfortable reading experience across devices.
Challenge
Challenge
Challenge
Create a website that communicates the tone and world of the story while keeping the interface simple and readable, especially on mobile devices where most users consume content.
Create a website that communicates the tone and world of the story while keeping the interface simple and readable, especially on mobile devices where most users consume content.
Goals
Goals
Goals
Present the story and its universe in a clear structure
Ensure long-form text remains comfortable to read
Create a visual identity aligned with the tone of the book
Build a responsive and lightweight website
Research &
Empathize
Research &
Empathize
Research &
Empathize
Analyzed existing author and fantasy websites for layout, readability, and navigation patterns
Competitive analysis of fantasy author websites
Analysis of long-form reading patterns online
Mobile-first usability considerations for reading content
Insights:
Minimal navigation helps readers focus on the story
Strong content hierarchy improves readability for long texts
Visual elements should support the narrative without overwhelming the reader
Analyzed existing author and fantasy websites for layout, readability, and navigation patterns
Competitive analysis of fantasy author websites
Analysis of long-form reading patterns online
Mobile-first usability considerations for reading content
Insights:
Minimal navigation helps readers focus on the story
Strong content hierarchy improves readability for long texts
Visual elements should support the narrative without overwhelming the reader
Define
Define
Define
Problem statement
Fantasy readers need a calm and distraction-free digital environment to explore stories online because overly complex websites make reading difficult and break immersion.
Target user: Fantasy readers seeking a calm and immersive online experience
Pain points:
Overly busy websites make reading difficult
Poor mobile experience interrupts story flow
Story tone is often lost in online presentation
Problem statement
Fantasy readers need a calm and distraction-free digital environment to explore stories online because overly complex websites make reading difficult and break immersion.
Target user: Fantasy readers seeking a calm and immersive online experience
Pain points:
Overly busy websites make reading difficult
Poor mobile experience interrupts story flow
Story tone is often lost in online presentation
Ideate
Ideate
Ideate
Design decisions
Simplified navigation to keep users focused on the story
Strong typographic hierarchy to improve long-form reading
Subtle visual elements to reinforce the fantasy atmosphere
Design decisions
Simplified navigation to keep users focused on the story
Strong typographic hierarchy to improve long-form reading
Subtle visual elements to reinforce the fantasy atmosphere
UI Design
UI Design
UI Design
Clean, minimal layout with generous white space
Typography chosen for readability in long texts
Consistent style and colors to reflect fantasy tone
Subtle visual cues guide the user through the story
Design principles:
Immersion over decoration
Simplicity improves focus and readability
Consistency across devices and screen sizes
Clean, minimal layout with generous white space
Typography chosen for readability in long texts
Consistent style and colors to reflect fantasy tone
Subtle visual cues guide the user through the story
Design principles:
Immersion over decoration
Simplicity improves focus and readability
Consistency across devices and screen sizes
Development
Development
Development
The website was implemented using WordPress.org with a custom theme built in Elementor and CSS. The design was optimized to remain lightweight, responsive, and easy to maintain for future content updates.
Responsive design for desktop, tablet, and mobile
Lightweight and easy to maintain for future updates
AI-generated imagery was used as visual support to reinforce the fantasy tone while allowing faster design iteration.
Technical challenges solved:
Maintaining visual hierarchy while ensuring fast loading times
Translating the design into WordPress components without losing the intended layout
The website was implemented using WordPress.org with a custom theme built in Elementor and CSS. The design was optimized to remain lightweight, responsive, and easy to maintain for future content updates.
Responsive design for desktop, tablet, and mobile
Lightweight and easy to maintain for future updates
AI-generated imagery was used as visual support to reinforce the fantasy tone while allowing faster design iteration.
Technical challenges solved:
Maintaining visual hierarchy while ensuring fast loading times
Translating the design into WordPress components without losing the intended layout
Live site: thesentral.com
Live site: thesentral.com
Learnings
Learnings
Learnings
This project reinforced how UX decisions shift when designing for storytelling rather than conversion.
Key takeaways
Reading-focused UX requires different design priorities
Small typographic decisions strongly impact immersion
Building the site helped align design and technical constraints
This project reinforced how UX decisions shift when designing for storytelling rather than conversion.
Key takeaways
Reading-focused UX requires different design priorities
Small typographic decisions strongly impact immersion
Building the site helped align design and technical constraints