Rebuilding the corporate site and the 4 hotels of a sustainable tourism developer in São Tomé and Príncipe, through a modular design system able to give each hotel its own identity without losing coherence between them.
HBD Príncipe is a tourism development company founded in 2010, focused on the sustainable development of Príncipe Island. The company's goal is to create responsible tourism without destroying the natural environment that makes the island special, through 4 hotels spread across the islands of São Tomé and Príncipe, each offering a completely different experience for guests.
HBD wanted the site fully reinvented, with a classier feel, more "breathable" navigation, and a more immersive experience for the user throughout the journey of booking their next trip.
Together with the Atelier Lógico design team, we received the client briefing and analyzed what they really needed. HBD was already a successful hotel and resort chain, but wanted the site to show that more clearly. After aligning the project steps and splitting responsibilities across the team, we moved into execution.
Bringing a customized travel experience to each HBD client, making the booking process fun and, at the same time, extremely easy to complete.
There are thousands of luxury hotels out there, most of them alike. HBD fosters contact between guests and the local population through dozens of experiences and packages — and that's what we decided to focus on.
HBD genuinely cares about the local population of the islands of São Tomé and Príncipe, always encouraging local business and labor. The islands still carry a strong tribal spirit, everything comes from the land, and handmade craft is still very much alive there. With that in mind, we developed a set of monograms that could be used as tags, visual signatures on the site, or even as a standalone aesthetic element.
Monograms for the 4 hotels (above) and the extended icon set for the site's categories and actions (below).
Beyond the corporate site, HBD has its own site for each of the 4 hotels. Each one had its own quirks and pages, and HBD wanted to unify them with a clean, elegant look without losing each hotel's essence.
To do that, we decided a modular, adaptable design system would be the best way to organize pages and objects. We built a full library of symbols in Sketch that let us customize the site depending on which hotel we were working on, without losing the original essence.
The same article module, rearranged into a grid in the "Related" section.
Another example of the modular system in action: a seasonal promotional banner.
Community, Beach, Ocean, Wildlife, Routes — each category with its own monogram.
As mentioned before, all pages follow the modular system, which makes them speak to one another — the user flows between whichever links and pages they like without being jarred by an aggressive style change.
We also created what we called Special Experience Pages: pages dedicated to explaining specific experiences guests can have at the hotels, like scuba diving or watching turtles nest. These pages were designed specifically to feel even more immersive as the user scrolls and learns more about the experience.
Homepage: introducing both islands, the 4 hotels, and the sustainability initiatives.
Corporate page (Restaurant), assembled from the same reusable modules.
Since the site was built on modular structures, putting together the mobile version was a natural process: we rearranged some objects, paid attention to information hierarchy, and added a hidden menu in the header. As a result, mobile navigation felt just as immersive and dynamic as the desktop version.
This project was an exercise in scale: instead of designing one screen at a time, the real work was building a system able to generate multiple screens that stayed coherent with each other, for 4 different brands within a shared identity. It's the same logic I still pursue today in design system projects.