Optimizely Website Redesign for Modern Hospitality UX
Challenge
The client needed to modernize their digital presence to attract a younger demographic without losing the loyalty of their established audience. While the brand had invested in renovating its properties to appeal to a broader range of premium leisure travellers, the website had not kept pace — still reflecting an aesthetic and user experience designed for an older guest profile. This created a growing gap between what the brand had become and how it appeared online.
The existing component library, built on Optimizely, lacked the visual flexibility to showcase the quality and contemporary feel of the refreshed properties. For younger visitors — typically professionals in the 35–40+ range increasingly drawn to child-free premium getaways — the site felt dated and difficult to navigate, contributing to higher bounce rates and missed conversion opportunities among this segment.
The challenge was therefore twofold: redesign the website’s component library to support a more modern, flexible visual identity, while ensuring the evolved experience still resonated with the loyal guest base the brand had built over many years.
Goals / Success Criteria
Primary goals
- Modernize the brand’s visual language to attract a younger demographic while maintaining accessibility and familiarity for the existing audience
- Build a reusable, modular component library within Optimizely that enables consistent, rapid page building without ongoing developer dependency
- Elevate the digital experience to reflect the premium, contemporary quality of the brand’s hospitality offering
Success validation
- Full design fidelity between agency-provided high-fidelity designs and the implemented Optimizely components
- Content editors able to build diverse, responsive pages independently using the new component library
- Maintained or improved site performance across loading speed and mobile responsiveness
Key constraints
- Strict compatibility with the existing Optimizely CMS architecture and editor interface
- WCAG accessibility compliance across all components, given a guest age range spanning 35 to 70+
- Brand continuity throughout a phased rollout, ensuring a seamless transition between legacy and new components
Our Role
FLS was responsible for full-cycle delivery across frontend and backend development, CMS integration, architecture, DevOps, and quality assurance — translating agency-provided designs into responsive, accessible, and performant components within the Optimizely platform.
The scope and timeline included:
- An iterative, sprint-based delivery process enabling continuous integration and testing within the live environment
- An initial phase focused on core website components, including navigation, hero sections, and room listings
- Ongoing collaboration with the client and external design agency to ensure design fidelity and editorial usability throughout
The solution was delivered by a cross-functional FLS team — comprising a business analyst, frontend and backend developers, a DevOps engineer, and a QA specialist — working in close collaboration with the client’s product owners, stakeholders, and content managers, as well as the external UI/UX design agency.
Approach
Given the need to modernize a live, customer-facing platform without disrupting the existing experience, FLS adopted an agile, component-first delivery approach focused on incremental progress, design fidelity, and continuous client alignment.
Key elements of the approach included:
- Structured sprint delivery Work was organized into two-week sprints covering backlog refinement, parallel frontend and backend development, QA, and incremental deployment — ensuring a consistent, testable flow from design to live environment.
- Incremental rollout over full-site overhaul Rather than replacing everything at once, the team prioritized high-impact components first — including a fully redesigned site header and three core functional blocks — reducing risk while demonstrating early, visible progress.
- Hybrid component enhancement Where appropriate, existing legacy blocks were extended rather than rebuilt from scratch, accelerating the visual refresh without unnecessary re-engineering of the underlying architecture.
- Integrated QA at every sprint Each sprint included a dedicated testing phase validating new components against high-fidelity designs and ensuring no regressions in existing site functionality, cross-browser compatibility, or mobile responsiveness.
- Architectural oversight and automated deployment The DevOps engineer maintained performance optimization across new Optimizely blocks and automated deployment pipelines to support stable, repeatable releases throughout the rollout.
Regular client demos ensured the technical implementation stayed aligned with the evolving brand vision, with feedback incorporated directly into subsequent sprint cycles.
Solution
FLS delivered a modernized, modular component library for the client’s website, built on Optimizely to support a brand refresh and broaden appeal to a younger audience — without disrupting the existing experience for current guests.
The solution was designed to coexist with legacy content throughout the transition, enabling a gradual, low-risk rollout while immediately elevating the visual quality and editorial flexibility of the platform.
Core capabilities included:
- Redesigned global header A fully responsive navigation system improving site-wide discoverability and user flow
- Custom modular blocks New high-fidelity Hero, Promotions, and Content components aligned with the refreshed brand aesthetic
- Enhanced legacy components Existing blocks upgraded with expanded styling options to maintain visual consistency across old and new content
- Optimizely editor optimization Tailored backend properties enabling content editors to manage, configure, and preview new designs without developer involvement
Technology
The technology stack was selected to support design fidelity, editorial flexibility, and stable delivery within an existing enterprise CMS environment.
Core stack
- Optimizely CMS (formerly Episerver) as the content management and API foundation
- React for building a high-performance, component-based frontend experience
Reliability and visibility
- Git (GitHub) with a structured branching strategy to support parallel frontend and backend development
- GitHub for sprint tracking and GitHub Wiki for technical documentation and release notes
Accelerators and patterns
- Custom modular React component library built specifically for Optimizely, enabling rapid page assembly
- Standardized Optimizely block types and property templates for a consistent content editor interface
- Design-to-code workflow for converting agency assets into functional React components, reducing per-block development time
Results
The project delivered a visible and measurable shift in both the digital experience and the client’s internal operating model — enabling a brand evolution that had previously been blocked by the limitations of the legacy platform.
- Full design fidelity was achieved across all new components, with 100% alignment between agency-provided designs and the implemented Optimizely blocks
- The global header redesign and core block updates were deployed with zero downtime, preserving the live booking journey throughout the rollout
- All new components were fully responsive across device types, supporting the mobile-first behavior of the target demographic
- Content editors gained the ability to build and manage diverse page layouts independently, significantly reducing day-to-day developer dependency
- The new component library demonstrated that a modern React frontend can be successfully integrated with a Java/Optimizely backend — expanding what the platform can support going forward
The engagement is ongoing. Planned next steps include a migration to Optimizely Graph for improved search performance, an upgrade to Optimizely CMS Version 13, and the continued rollout of modernized components across the remaining legacy sections of the site.
Last Updated: April 2026