Case study
Castello Boutique Rooms
Digital Experience Transformation
Overview
A full redesign of the Castello Boutique Rooms website, built around a clear structure, a considered pace, and rooms a visitor can understand before booking.
Every decision here, from layout to motion to colour, serves that. Nothing is added for decoration.
- Services
- Experience Direction & UX StrategyUX & Interface DesignCustom Next.js DevelopmentInteractive Map System DevelopmentMotion Design & Interaction SystemsMultilingual SEO & Performance Architecture
- Approach
- Transformation, not repairInteraction as part of the narrativeDesign with intent, not decorationPerformance and SEO as part of the experience
- Highlights
- From template-based experience to premium digital productCinematic interaction model with custom transitionsExploration-focused interactive map systemStructure designed for performance, clarity and SEO
Before: Desktop Experience
Generic structure. No hierarchy. Navigation without direction.
The site felt like a template, not a place.
After: Desktop Experience
Clear structure. Defined hierarchy. Space that allows content to breathe.
Before: Mobile Menu
Standard hamburger menu. Functional, but forgettable.
After: Curtain Menu
The mobile menu was not designed as a simple navigation layer. It was designed as a stage.
Instead of a standard slide-in motion, the menu unveils, like a curtain.
The transition controls pacing, creates anticipation, and transforms a functional action into an experience.
Navigation is no longer just supportive. It becomes part of the site's identity.
This approach elevates perceived quality and differentiates the product from typical hotel templates.
Before: Gallery
Flat grid. Images without relation.
After: Gallery
The gallery was not designed as a collection of images. It was designed as a sequence.
Instead of a flat grid, a structured flow was created to control how content is revealed.
Through controlled transitions, subtle distortions during movement, and emphasis on the active frame, user attention is intentionally directed.
Images are not equal. Each one plays a role in the overall narrative.
The result is not just better presentation. It increases dwell time, improves spatial understanding, and creates a stronger emotional connection with the property.
Before: Map
Static Google Maps embed. Generic. Functional.
A placeholder, not an experience.
After: Interactive Map
The map was not designed as a location tool. It was designed as an exploration experience.
Instead of a static Google Maps embed, a fully custom interactive system was built to express the relationship between the property and the city.
Through dynamic points of interest, connections between locations, and hover and focus states that guide attention, the user does not simply "see" the space. They understand it.
Information is not dumped. It is revealed.
The result transforms the map from a utility into an experience: increasing interaction time, sparking curiosity, and creating a sense of destination before booking.
Experience Direction
The design was not based on decoration. It was based on a system.
The experience does not dump information. It reveals it.
Rooms are expressed through color. Navigation behaves like a stage. The menu opens like a curtain.
Scroll does not move content. It reveals it.
Every interaction has intent. Nothing is accidental.
- Performance
- 91
- Accessibility
- 100
- Best Practices
- 100
- SEO
- 100
Performance as Design
Performance was treated as part of the design, not as a final step.
The experience was built to be fast, stable, and responsive at every interaction.
Speed is not just a technical metric. It is part of perceived quality.
Metrics from homepage via Google PageSpeed Insights (mobile).
Core Web Vitals
- First Contentful Paint
- 1.1 s
- Largest Contentful Paint
- 3.5 s
- Total Blocking Time
- 50 ms
- Cumulative Layout Shift
- 0
- Speed Index
- 2.3 s
SEO as Part of the Structure
SEO was not treated as a separate layer, but as part of the site's architecture.
The focus was on:
- Semantic structure
- Clear content hierarchy
- Performance and Core Web Vitals
The goal was not over-optimization, but a clean and understandable foundation for both users and search engines.
Color Palette
The palette is based on real elements of the space: the tone of the plaster, the green of the wall, and the curtain color translated into the menu.
Colors are used with restraint, supporting the typography and overall experience.
- Rich Black
- #1A1A18
- Hunter Green
- #1F2F2A
- Ivory
- #FAFAF8
- Sea Salt
- #E8EEEA
An example of how we approach website development in Kavala, with clean structure and attention to detail.
We don't chase projects.
We build relationships.