In 2020, proper in the midst of the COVID pandemic, a mission got here to us that was born, fairly actually, from the necessity to reinvent a enterprise. At a time when worldwide journey dropped by round 75%, Spain Assortment noticed a chance in a market that will take years to recuperate: specializing in unique journey experiences in Spain and Portugal for a excessive–net-worth viewers, particularly within the US, who had been much less affected economically. The thought was clear: provide journeys to those that would be capable of afford them extra simply after the pandemic. However not simply any journeys.
That’s the place we got here in. The primary model of the Spain Assortment web site was a problem that helped us outline how we perceive digital design at present and the way we would like our tasks to be: taking good care of each element, telling robust visible tales, and creating experiences that aren’t solely lovely, however memorable. All that work meant that this primary model of Spain Assortment gained important recognition within the trade and acquired a number of nationwide and worldwide awards.
5 years later: evolving the enterprise right into a extra bold ecosystem
There’s nothing extra rewarding for a studio like ours than seeing a enterprise you’ve watched develop come again to your door and, as soon as once more, provide the probability to be a part of a mission that was, on the time, pivotal for Dgrees®.
In its first model, the Spain Assortment provided luxurious journeys and experiences with a hedonistic, extremely emotional method, stepping away from the normal “journey company” mannequin and shifting into a way more aspirational territory.
Adaptation and integration of recent providers and sections
Over time, Spain Assortment developed, and new wants started to appear. In the present day, they design proposals that vary from tailored journeys to distinctive stays, dream weddings, and VIP experiences that embrace collaborations with artists, Michelin-starred cooks, or vogue designers.
That evolution led us to rethink your entire design from a extra strategic perspective, with an even bigger problem: maintaining the essence of the model whereas enhancing the digital expertise and integrating their 100+ experiences with the brand new providers. Now, their providing is structured round two essential traces that have to coexist inside the similar digital ecosystem:
- Luxurious journeys and stays in Spain and Portugal.
- Extremely unique weddings and VIP experiences, with a particularly excessive degree of service and personalization.
With this context in thoughts, the problem was to proceed reflecting the spirit of the model by a particular visible fashion, nearer to the editorial world—like vogue or luxurious equipment—and much from the standard journey web site patterns. On the similar time, we would have liked to enhance the person expertise so we may add these new providers, join them with the present ones, and preserve the main target clear.
Analysis & technique: viewers and mission premises
Spain Assortment’s viewers is sort of numerous by way of age. Nevertheless, there’s a transparent frequent denominator: they’re high-net-worth customers, most probably conversant in new applied sciences, vogue, luxurious equipment, unique resorts, and high-end merchandise. That led us to 3 non-negotiable ideas for the online expertise:
- Make navigation simple
We wanted to cowl a large age vary, with customers who’ve very completely different ranges of digital literacy. The web site needed to be simple to know from the very first scroll. - A luxurious editorial look & really feel
The look & really feel needed to join with the world of high-end vogue, jewellery, and life-style magazines: rigorously composed layouts, a typeface with character, extremely curated pictures, and a sense of an “editorial piece” reasonably than a journey catalog. - Memorable, however delicate interactions
We needed so as to add “wow” moments by animations, microinteractions, and visible particulars that bolstered the notion of exclusivity, whereas avoiding intrusiveness and minimizing the danger of distraction from what actually issues.
From the shopper’s facet, there have been additionally two clear necessities:
- A strong, scalable, and easy-to-update administration system, so the Spain Assortment staff may keep and develop the content material independently.
- A strategy to correlate experiences, so a single journey may seem coherently in several sections (journeys, stays, VIP) relying on the context and the person’s wants.
Design & feel and appear: crafting the expertise for an “expertise designer”
From the beginning, our visible references had been very clear. The shopper already had a powerful collection of photographs and movies, with a daring, putting visible fashion which you could see from the very first second on the homepage, combining colour pictures with black and white. On prime of that, lots of the preliminary concepts got here from worlds nearer to vogue, which made their intentions apparent from day one: transfer away from the everyday journey web site and reinforce their function as an precise “expertise designer.”
The thought for us was easy: in the event that they design distinctive experiences for his or her shoppers, we would have liked to design an equally well-crafted expertise for his or her customers.
How we approached it
We outlined a design system based mostly on:
- A proportional grid that maintains visible consistency at any decision and permits us to reorder and mix blocks with out dropping coherence.
- Elegant compositions with beneficiant white area, giving the format room to breathe, lowering cognitive load, and making studying simpler.
- Rigorously curated pictures and video that don’t simply present locations, however convey atmospheres and feelings, making the positioning really feel virtually like {a magazine}.
- Refined animation and interplay particulars, all the time with easy, managed movement to strengthen the sense of luxurious.
- A transparent visible language: typographic hierarchy, rhythm between sections, and a stability between restraint and character.
- A easy but subtle person expertise, guiding customers by the journey towards what actually issues and making content material simple to entry by acquainted navigation patterns (submenus, filters, modals, and many others.).
The Design
We created a constant modular design with greater than 50 totally versatile parts, conceived to allow them to be mixed in several methods with out compromising the design.
“Self-importance” Part
This part was created to prepare VIP experiences, providing a extra curated catalog centered on extremely unique providers supplied by the model’s ambassadors, together with artists, Michelin-starred cooks, and vogue designers.
“Escapes” Part
One of many new standout providers was this part, the place we showcased the catalog of unique villas and resorts. By way of design and navigation, it labored in the identical method because the “Collections” part, however we added a extra aspirational hero to generate fast engagement and set it aside.
“Weddings” Part
This part differed considerably from the remainder of the providers and required its personal feel and appear and construction. Amongst different selections, we needed to distinguish it by giving it a definite colour fashion and including some interactive components (which we clarify additional under) that added a extra modern and romantic contact.
Typography: Solare
A key factor was selecting Solare as a particular asset. It’s a recent, elegant, and sober typeface, very a lot aligned with the luxurious universe and nonetheless comparatively unusual, which helped us reinforce Spain Assortment’s id as one thing genuinely unique.
Pictures as a key pillar
The shopper’s picture library was intensive and high-quality. Lots of the photographs got here straight from their companions or VIP ambassadors. Even so, we carried out a refined choice course of throughout greater than 3,000 photos, searching for those who match greatest and retouching what was wanted by way of tone, gentle, distinction, and framing. The result’s a curated choice and enhancing effort that feeds your entire website with over 2,000 pictures.
Consumer expertise: organizing 100+ experiences, VIP itineraries, villa getaways, and dream weddings with out dropping focus
We had been working with a model that was including new providers to its catalog of experiences—seemingly completely different at first, however in some ways related. Not one of the experiences proven on the web site are supposed to be bought individually; as an alternative, they act as an emotional and aspirational showcase, a catalog of journey concepts for the shopper. In that sense, the concept of a extra editorial, magazine-style idea was all the time current.
The problem right here was to maneuver customers away from the concept that these experiences may very well be booked straight by the positioning and to strengthen the notion that they’re a part of one thing larger. On the similar time, new providers like stays, VIP experiences, or weddings, whereas they might complement these journeys, did have to really feel like stand-alone proposals, which made the idea even trickier to speak.
The answer we discovered for organizing 100+ experiences was to construction them in order that:
- They had been accessible from completely different entry factors throughout the positioning.
- They may very well be filtered based mostly on completely different wants (vacation spot, kind of journey, fashion, and many others.).
- Journey experiences and VIP experiences had been clearly differentiated.
Content material structure and website construction
From a structural standpoint, we organized the content material by sensible segmentation and robust connections between sections:
- The House, Collections, and Self-importance pages feed into each other.
- Every block is designed to information the person towards essentially the most related experiences relying on the context.
- Navigation and CTAs are designed to create a transparent path towards inquiry or info requests, utilizing a modal that doesn’t take you away from the web page you’re on.
“Collections” Part
On this part, we grouped all experiences right into a single catalog that enables customers to entry them simply by a number of entry factors, relying on their intent:
- Customers can begin by filtering straight by Spain or Portugal by way of a extremely visible submenu.
- As soon as they’ve chosen a rustic, they’ll filter by vacation spot or by kind of journey.
- Inside every assortment, a particular sub-navigation makes it simple to rapidly discover the specified kind of expertise or vacation spot.
This manner, customers don’t face an infinite catalog, however reasonably a guided and segmented construction that helps them get to what they’re searching for. And since the catalog is giant, we designed a navigation sample based mostly on interactive modals that enables them to:
- View journey element pages with out leaving the present part.
- Transfer rapidly between associated experiences.
- Simply share a particular expertise.
- Land straight on any expertise web page from the browser with out having to navigate from the homepage.
Taken collectively, this method of filters, modals, and URLs makes all experiences simpler to entry with out overwhelming the person and maintains a relentless sense of management all through the journey.
Tech stack
To help all this complexity, we would have liked a strong however, above all, versatile technical basis.
On a technical degree, the mission is constructed on:
- A WordPress backend because the core of the mission.
- ACF Versatile Content material, which permits us to work with modular content material blocks with out breaking the design.
- A contemporary construct setup with Webpack and NPM, serving to us preserve the codebase organized and optimized.
- Sass + PostCSS for types, permitting us to scale the visible system with out dropping consistency.
- On the interplay layer, we mixed TaxiJS for web page transitions, GSAP for animations, and Lenis Scroll for a smoother, extra managed scrolling expertise.
CMS: WordPress and Modular System
On the CMS facet, we applied a modular system based mostly on WordPress and ACF Versatile Content material that enables the Spain Assortment staff to replace and scale the positioning in a easy, agile, and totally impartial method.
This permits us to:
- Construct pages from reusable blocks (content material modules, galleries, sliders, textual content + picture blocks, and many others.).
- Give the Spain Assortment staff full management over content material updates with out risking visible consistency.
- Simply join experiences with completely different sections, so a single journey can seem below journeys, stays, or VIP experiences with out duplicating content material.
In observe, the positioning is able to develop: new experiences, new classes, and even solely new sections could be added with out having to rethink your entire construction.
WebGL, Three.js, and Blender for the “Petal Rain” within the Weddings Part
In a number of very particular areas, such because the Weddings part, we needed to go one step additional to convey that sense of luxurious and a spotlight to element. Utilizing WebGL and Three.js, we created a “petal rain” background for the part that follows the scroll and reacts to mouse motion, with the purpose of expressing delicacy, natural movement, depth, and an virtually dreamlike ambiance, very a lot aligned with Spain Assortment’s thought of a marriage. Due to this mixture, we had been capable of create an interactive 3D scene that works as a residing background with out counting on pre-rendered video, including an additional sensory layer to the expertise with out compromising navigation or efficiency.
First Steps
Initially, we experimented with petals that merely fell and rotated alongside a single vector axis, however the consequence felt too flat, not very natural, and didn’t create the feeling we had been aiming for.
So we iterated by different choices till we arrived on the remaining answer, constructed round:
A 3D scene in Three.js with a perspective digicam (THREE.PerspectiveCamera) to characterize depth in a extra pure method.
A tender gradient background that evolves over time utilizing a WebGL shader based mostly on a Perlin-like noise discipline, enriched with an interactive 3D petal rain that responds to mouse motion and reinforces the sensation of immersion.
Technical course of
- We outlined three layers of petal rain at completely different distances from the digicam, every with a parameterized variety of petals (for instance, 50 within the far airplane, 70 within the center, and 20 within the close to one) to reinforce the sense of depth.
- We modeled 4 completely different petal shapes in Blender and loaded them into the scene; a random operate assigns one among these fashions to every occasion, enriching the visible selection.
- We used a THREE.Raycaster to solid a ray and intersect the three layers and, from these intersection factors, apply repulsion forces to the petals in order that they react to person motion.
- We applied a “respawn” logic: when a petal crosses sure boundaries, it reappears on the alternative facet so it may be reused with out constantly creating new situations.
Ultimately, this wasn’t about displaying off with expertise, however about utilizing it in a method that serves the idea and the inventive thought behind it, including tangible worth and reinforcing the message with out compromising the content material.
The ultimate problem: taking good care of the mission’s visible legacy
Retaining a web site like Spain Assortment on the proper degree relies upon, to a big extent, on its visible content material. It’s not sufficient to have a strong preliminary design; you could be very cautious with each photograph that will get uploaded so it matches the context, the tone, and the visible universe we’ve outlined.
If you ship a mission with such a excessive degree of customization and provides the shopper full independence, there’s all the time a danger: that the individuals managing it, both on account of a scarcity of time or just a lack of know-how, gained’t be capable of take care of the content material with the identical consideration the design requires.
A part of our job can be that: educating, coaching, and giving the shopper the precise instruments to allow them to keep according to the design we hand over. To try this, we centered particularly on:
- Explaining why sure visible selections are necessary.
- Serving to the Spain Assortment staff with their first steps within the CMS.
- Defining fundamental standards to take care of consistency in pictures and content material.
At Dgrees®, we imagine our accountability doesn’t finish at launch. We evaluate every mission sometimes to ensure the “legacy” we depart behind continues to be alive, that the positioning doesn’t lose consistency over time, and that the design ages naturally.
