My Role
Frontend Developer
Built the responsive interface and translated the visual direction into a functional experience across desktop, tablet, and mobile screen sizes.
Project Case Study
Twisted Sisters
A dark, immersive author website designed for Caroline Peckham and Susanne Valenti, bringing their books, interconnected fictional worlds, latest releases, and reader community together in one digital experience.
01
The Goal
Create a digital home that captures the personality of The Twisted Sisters while making it easy for readers to discover books, explore interconnected series, learn about the authors, and stay connected with their community.
01 / Overview
What I
created.
I designed and developed a responsive author website for Caroline Peckham and Susanne Valenti, better known as The Twisted Sisters, creating a central destination for readers to discover their books and fictional worlds.
The website brings together the authors' latest releases, popular series, reader favorites, reviews, author information, and social channels. The experience is designed around discovery, allowing visitors to move naturally from the authors themselves into their books and interconnected universes.
A major focus of the project was translating the tone of the authors' work into the interface. Their catalogue spans dark romance, paranormal academies, fantasy, supernatural worlds, and interconnected series, so the website needed to feel atmospheric and distinctive while remaining clear and easy to navigate.
✦
The website was designed around a simple idea: make discovering the next story feel like stepping into another world.
02 / My Role
From idea
to interface.
I handled the project from the initial concept through interface design, frontend development, responsive implementation, interaction design, content organization, and final refinement.
Design
UI/UX Designer
Designed the visual hierarchy, typography, spacing, content flow, interface components, and overall atmosphere around the authors' brand.
Project
Solo Build
Managed planning, design, development, responsive testing, content presentation, interaction details, and final polish independently.
03 / Technology
Built
with.
The technology stack was selected to create a lightweight, responsive foundation while providing enough flexibility for immersive visuals, animation, interactive elements, and future content expansion.
- 01 HTML5 Semantic structure & content architecture
- 02 CSS3 Responsive layouts, styling & visual effects
- 03 JavaScript Interactions, navigation & dynamic behavior
- 04 Responsive Design Desktop, tablet & mobile experiences
- 05 Git Version control & development workflow
04 / Process
How it
came together.
01
Research
Understanding the authors and their worlds
I started by understanding who the website was representing and how readers interact with the authors' catalogue. The Twisted Sisters' work spans multiple series and interconnected fictional universes, making content organization a key part of the project.
I focused on the primary reader journeys: discovering the authors, finding the newest releases, exploring popular series, understanding where each series fits into its wider universe, and finding ways to stay connected with the authors.
02
Design
Turning storytelling into visual language
The visual direction was built around the darker, fantastical, and romantic qualities associated with the authors' work. I wanted the interface to feel like an extension of their fictional worlds rather than a traditional author portfolio.
Typography, contrast, imagery, spacing, cards, transitions, and decorative details were carefully combined to create atmosphere while maintaining a clear visual hierarchy for readers.
03
Development
Bringing the world to the browser
I translated the visual direction into a responsive frontend using semantic HTML, CSS, and JavaScript. The implementation was structured around reusable patterns and consistent spacing so the experience could scale across different sections of the site.
I tested the interface across different screen sizes and refined the layout, navigation, typography, imagery, and interactive elements to preserve the intended experience from desktop through mobile.
05 / Challenges
Problems
worth solving.
The Hurdle
Making a huge fictional universe feel simple to explore.
The authors have an extensive catalogue spanning multiple series and connected universes. Presenting that amount of information without overwhelming a first-time visitor required careful content hierarchy and organization.
→
The Fix
Designing the experience around discovery.
I organized the experience around natural reader journeys, starting with latest releases and popular series before allowing visitors to explore deeper into individual fictional universes, reader content, author information, and community channels.
What I accomplished
Skills developed through the project
Translating a creative brand into a digital experience
Information architecture and content hierarchy
Responsive frontend development
UI/UX design and visual storytelling
Designing for content discovery
Interactive and motion-based interface design
Responsive testing and interface refinement
Communicating personality through typography,
imagery, structure, and atmosphere
06 / Reflection
More than
a website.
This project pushed me to think about frontend development as a form of storytelling.
The challenge was not simply to build pages that displayed books. The website needed to communicate the personality of the authors and the atmosphere surrounding their work before a visitor ever picked up a book.
Working on the project reinforced how closely design, technology, content strategy, and user experience are connected. A strong interface needs to make information easy to find while still creating an emotional response that makes visitors want to explore further.
✦
The biggest takeaway was learning how to turn a creative identity into an interactive experience — not just a collection of pages.