In 2020, proper in the midst of the COVID pandemic, a venture 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 possibility in a market that will take years to get well: 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: supply journeys to those that would have the ability to 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 as we speak and the way we wish our initiatives to be: caring for each element, telling sturdy visible tales, and creating experiences that aren’t solely lovely, however memorable. All that work meant that this primary model of Spain Assortment gained vital recognition within the business and obtained 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 venture that was, on the time, pivotal for Dgrees®.
In its first model, the Spain Assortment supplied luxurious journeys and experiences with a hedonistic, extremely emotional strategy, stepping away from the standard “journey company” mannequin and shifting into a way more aspirational territory.
Adaptation and integration of recent providers and sections
Over time, Spain Assortment advanced, and new wants started to appear. Right now, they design proposals that vary from tailored journeys to distinctive stays, dream weddings, and VIP experiences that embody collaborations with artists, Michelin-starred cooks, or style designers.
That evolution led us to rethink the whole design from a extra strategic perspective, with a much bigger problem: retaining 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 primary traces that must coexist inside the identical digital ecosystem:
- Luxurious journeys and stays in Spain and Portugal.
- Extremely unique weddings and VIP experiences, with an especially excessive degree of service and personalization.
With this context in thoughts, the problem was to proceed reflecting the spirit of the model by way of a particular visible fashion, nearer to the editorial world—like style or luxurious equipment—and much from the same old journey web site patterns. On the identical time, we would have liked to enhance the person expertise so we might add these new providers, join them with the prevailing ones, and hold the main target clear.
Analysis & technique: viewers and venture premises
Spain Assortment’s viewers is kind of numerous when it comes to age. Nonetheless, there’s a transparent widespread denominator: they’re high-net-worth customers, almost definitely accustomed to new applied sciences, style, luxurious equipment, unique resorts, and high-end merchandise. That led us to 3 non-negotiable ideas for the online expertise:
- Make navigation straightforward
We would have liked to cowl a large age vary, with customers who’ve very totally different ranges of digital literacy. The web site needed to be straightforward to grasp from the very first scroll. - A luxurious editorial look & really feel
The look & really feel needed to join with the world of high-end style, jewellery, and way of life magazines: rigorously composed layouts, a typeface with character, extremely curated pictures, and a sense of an “editorial piece” quite than a journey catalog. - Memorable, however refined interactions
We needed so as to add “wow” moments by way of animations, microinteractions, and visible particulars that strengthened the notion of exclusivity, whereas avoiding intrusiveness and minimizing the chance of distraction from what actually issues.
From the consumer’s aspect, there have been additionally two clear necessities:
- A sturdy, scalable, and easy-to-update administration system, so the Spain Assortment staff might keep and develop the content material independently.
- A option to correlate experiences, so a single journey might seem coherently in numerous sections (journeys, stays, VIP) relying on the context and the person’s wants.
Design & feel and look: crafting the expertise for an “expertise designer”
From the beginning, our visible references have been very clear. The consumer already had a powerful number of images and movies, with a daring, putting visible fashion that you could see from the very first second on the homepage, combining colour pictures with black and white. On high of that, lots of the preliminary concepts got here from worlds nearer to style, 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 purchasers, 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 shedding coherence.
- Elegant compositions with beneficiant white house, 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 location really feel nearly like {a magazine}.
- Delicate animation and interplay particulars, at all times with clean, managed movement to bolster the sense of luxurious.
- A transparent visible language: typographic hierarchy, rhythm between sections, and a stability between restraint and character.
- A easy but refined person expertise, guiding customers by way of the journey towards what actually issues and making content material straightforward to entry by way of acquainted navigation patterns (submenus, filters, modals, and many others.).
The Design
We created a constant modular design with greater than 50 absolutely versatile parts, conceived to allow them to be mixed in numerous methods with out compromising the design.
“Self-importance” Part
This part was created to arrange VIP experiences, providing a extra curated catalog centered on extremely unique providers offered by the model’s ambassadors, together with artists, Michelin-starred cooks, and style 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 means 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 look and construction. Amongst different choices, 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 progressive and romantic contact.
Typography: Solare
A key aspect 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 identification as one thing genuinely unique.
Images as a key pillar
The consumer’s picture library was intensive and high-quality. Lots of the images got here straight from their companions or VIP ambassadors. Even so, we carried out a refined choice course of throughout greater than 3,000 photographs, on the lookout for people who match finest and retouching what was wanted when it comes to tone, mild, distinction, and framing. The result’s a curated choice and enhancing effort that feeds the whole website with over 2,000 images.
Consumer expertise: organizing 100+ experiences, VIP itineraries, villa getaways, and dream weddings with out shedding focus
We have been working with a model that was including new providers to its catalog of experiences—seemingly totally 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 consumer. In that sense, the concept of a extra editorial, magazine-style idea was at all times current.
The problem right here was to maneuver customers away from the concept that these experiences could possibly be booked straight by way of the location and to bolster the notion that they’re a part of one thing greater. On the identical time, new providers like stays, VIP experiences, or weddings, whereas they might complement these journeys, did must 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 have been accessible from totally different entry factors throughout the location.
- They could possibly be filtered based mostly on totally different wants (vacation spot, sort of journey, fashion, and many others.).
- Journey experiences and VIP experiences have been clearly differentiated.
Content material structure and website construction
From a structural perspective, we organized the content material by way of good 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 permits customers to entry them simply by way of a number of entry factors, relying on their intent:
- Customers can begin by filtering straight by Spain or Portugal through a extremely visible submenu.
- As soon as they’ve chosen a rustic, they will filter by vacation spot or by sort of journey.
- Inside every assortment, a selected sub-navigation makes it straightforward to rapidly discover the specified sort of expertise or vacation spot.
This fashion, customers don’t face an infinite catalog, however quite a guided and segmented construction that helps them get to what they’re on the lookout for. And since the catalog is giant, we designed a navigation sample based mostly on interactive modals that permits them to:
- View journey element pages with out leaving the present part.
- Transfer rapidly between associated experiences.
- Simply share a selected expertise.
- Land straight on any expertise web page from the browser with out having to navigate from the homepage.
Taken collectively, this technique 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 stable however, above all, versatile technical basis.
On a technical degree, the venture is constructed on:
- A WordPress backend because the core of the venture.
- 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 hold the codebase organized and optimized.
- Sass + PostCSS for types, permitting us to scale the visible system with out shedding 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 aspect, we applied a modular system based mostly on WordPress and ACF Versatile Content material that permits the Spain Assortment staff to replace and scale the location in a easy, agile, and absolutely impartial means.
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 totally different sections, so a single journey can seem underneath journeys, stays, or VIP experiences with out duplicating content material.
In follow, the location is able to develop: new experiences, new classes, and even solely new sections could be added with out having to rethink the whole construction.
WebGL, Three.js, and Blender for the “Petal Rain” within the Weddings Part
In just a few 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 aim of expressing delicacy, natural movement, depth, and an nearly dreamlike environment, very a lot aligned with Spain Assortment’s thought of a marriage. Due to this mix, we have 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
At the start, we experimented with petals that merely fell and rotated alongside a single vector axis, however the outcome felt too flat, not very natural, and didn’t create the feeling we have been aiming for.
So we iterated by way of different choices till we arrived on the ultimate answer, constructed round:
A 3D scene in Three.js with a perspective digicam (THREE.PerspectiveCamera) to symbolize depth in a extra pure means.
A smooth gradient background that evolves over time utilizing a WebGL shader based mostly on a Perlin-like noise area, 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 totally different distances from the digicam, every with a parameterized variety of petals (for instance, 50 within the far aircraft, 70 within the center, and 20 within the close to one) to reinforce the sense of depth.
- We modeled 4 totally different petal shapes in Blender and loaded them into the scene; a random operate assigns one in all 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 other aspect 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 means 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: caring for the venture’s visible legacy
Maintaining 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 stable preliminary design; it’s worthwhile to be very cautious with each photograph that will get uploaded so it matches the context, the tone, and the visible universe we’ve outlined.
Whenever you ship a venture with such a excessive degree of customization and provides the consumer full independence, there’s at all times a danger: that the individuals managing it, both as a result of a scarcity of time or just a lack of understanding, received’t have the ability to 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 consumer the fitting instruments to allow them to keep per the design we hand over. To try this, we centered particularly on:
- Explaining why sure visible choices are essential.
- Serving to the Spain Assortment staff with their first steps within the CMS.
- Defining primary standards to take care of consistency in pictures and content material.
At Dgrees®, we consider our duty doesn’t finish at launch. We overview every venture once in a while to verify the “legacy” we go away behind continues to be alive, that the location doesn’t lose consistency over time, and that the design ages naturally.
