.avif)
Coração de Cacau
A project built from scratch for a Portuguese community centred around cacao ceremonies, meditation, and ecstatic dance.
Starting with a home page design in Figma, the project grew into a full platform with a dynamic event system, an e-commerce store, and ticket integrations.
The logo already existed. Everything else, from the first wireframe to the final Webflow build, was designed and developed from the ground up.
Starting with a home page design in Figma, the project grew into a full platform with a dynamic event system, an e-commerce store, and ticket integrations.
The logo already existed. Everything else, from the first wireframe to the final Webflow build, was designed and developed from the ground up.
*Site ran on Webflow for 2 years,
then migrated to a different platform
then migrated to a different platform
The problem
Coração de Cacau had a community, a calendar full of events, and cacao products to sell.
What they didn't have was a platform that could hold all of it together.
Without a proper CMS, managing events throughout the year meant constant manual work.
Each event had its own needs: different photos, different text, different sections that should appear for one event and be hidden for another.
There was no flexible system to handle that kind of variation at scale. Ticket purchases had no dedicated flow. People had to reach out manually, creating friction at the most critical point of conversion.
The cacao products were being sold informally, with no proper storefront or order process.
And the existing visual identity had no digital home that matched the warmth and character of the community itself. The site needed to do a lot. And it needed to do it in a way the client could actually manage.
What they didn't have was a platform that could hold all of it together.
Without a proper CMS, managing events throughout the year meant constant manual work.
Each event had its own needs: different photos, different text, different sections that should appear for one event and be hidden for another.
There was no flexible system to handle that kind of variation at scale. Ticket purchases had no dedicated flow. People had to reach out manually, creating friction at the most critical point of conversion.
The cacao products were being sold informally, with no proper storefront or order process.
And the existing visual identity had no digital home that matched the warmth and character of the community itself. The site needed to do a lot. And it needed to do it in a way the client could actually manage.
Strategy & Reasoning
Every event is different. The CMS had to know that
The core challenge wasn't building an events page.
It was building a system flexible enough to handle dozens of events, each with its own characteristics, without the client needing to touch code.
The strategy was to design the CMS first around the variability of events: what fields would always be present, which sections should appear conditionally, and how to give the client enough control without overwhelming them.
Visibility conditions became the backbone of the entire event architecture.
If a field was filled in the CMS, the section appeared. If not, it didn't.
Simple for the client.
Complex to build right.
The core challenge wasn't building an events page.
It was building a system flexible enough to handle dozens of events, each with its own characteristics, without the client needing to touch code.
The strategy was to design the CMS first around the variability of events: what fields would always be present, which sections should appear conditionally, and how to give the client enough control without overwhelming them.
Visibility conditions became the backbone of the entire event architecture.
If a field was filled in the CMS, the section appeared. If not, it didn't.
Simple for the client.
Complex to build right.
The design had to feel like the community, not just represent it
There was no brief that said "use warm tones."
But spending time understanding what Coração de Cacau actually is, a welcoming space built around connection, ritual, and joy, made it clear that the design had to carry that energy.
Figma was used to explore and define the visual language from scratch, without Relume or pre-built templates.
Pure design decisions, grounded in the identity of the community.
Warm tones, generous spacing, imagery that breathes.
The goal was a site that a first-time visitor would feel before they read a single word.
There was no brief that said "use warm tones."
But spending time understanding what Coração de Cacau actually is, a welcoming space built around connection, ritual, and joy, made it clear that the design had to carry that energy.
Figma was used to explore and define the visual language from scratch, without Relume or pre-built templates.
Pure design decisions, grounded in the identity of the community.
Warm tones, generous spacing, imagery that breathes.
The goal was a site that a first-time visitor would feel before they read a single word.
The e-commerce problem had a workaround. And it worked
The plan included a full e-commerce store for cacao products.
The products were built, the pages were designed, the store was ready.
Then bureaucracy got in the way: the client couldn't complete the company registration needed to process payments legally.
Rather than leave a dead end on the site, the workaround was a dedicated "How to Order" page, giving users a clear path to purchase even without a live checkout.
The primary conversion focus shifted fully to event tickets via Ticket Tailor, where the real business was happening anyway.
The plan included a full e-commerce store for cacao products.
The products were built, the pages were designed, the store was ready.
Then bureaucracy got in the way: the client couldn't complete the company registration needed to process payments legally.
Rather than leave a dead end on the site, the workaround was a dedicated "How to Order" page, giving users a clear path to purchase even without a live checkout.
The primary conversion focus shifted fully to event tickets via Ticket Tailor, where the real business was happening anyway.
Solution
A design built from scratch, warm enough to feel like home.
No templates. No Relume.
The entire visual identity of the site was designed in Figma from the ground up, translating the warmth and community feel of Coração de Cacau into every layout decision.
GSAP animations and Lottie files added life to the experience.
High-quality photography from professional photographers was optimised in bulk using Riot (images) and Handbrake (video), keeping the site visually rich without killing performance.
The result is a site that looks and feels like the community it represents.
No templates. No Relume.
The entire visual identity of the site was designed in Figma from the ground up, translating the warmth and community feel of Coração de Cacau into every layout decision.
GSAP animations and Lottie files added life to the experience.
High-quality photography from professional photographers was optimised in bulk using Riot (images) and Handbrake (video), keeping the site visually rich without killing performance.
The result is a site that looks and feels like the community it represents.
20 collections. Dozens of events. 1 system that handles all of them.
The CMS architecture was designed around a 2-year event roadmap. 20 collections, structured to handle the full complexity of the event calendar.
Each event could have its own photos, copy, and layout variations, with visibility conditions controlling which sections appeared based on what the client filled in.
No section would ever appear empty. Swiper.js handled event sliders for a smooth browsing experience.
Ticket Tailor was integrated for ticket purchases, with each event linking to its own ticketing flow.
The newsletter was connected via Zapier. jQuery Cycle Plugin added a better UX to the cacao product pages.
The client can create, update, and manage events independently, without any developer involvement.
The CMS architecture was designed around a 2-year event roadmap. 20 collections, structured to handle the full complexity of the event calendar.
Each event could have its own photos, copy, and layout variations, with visibility conditions controlling which sections appeared based on what the client filled in.
No section would ever appear empty. Swiper.js handled event sliders for a smooth browsing experience.
Ticket Tailor was integrated for ticket purchases, with each event linking to its own ticketing flow.
The newsletter was connected via Zapier. jQuery Cycle Plugin added a better UX to the cacao product pages.
The client can create, update, and manage events independently, without any developer involvement.
Tickets first. Cacao store, ready when they are.
The primary conversion point of the site is event ticket purchases via Ticket Tailor, fully integrated and styled to match the site design.
The e-commerce store for cacao products was built and is ready to activate, but due to the client's registration situation, a "How to Order" page was created as a practical workaround, giving users a clear path to enquire and purchase directly.
When the store goes live, the infrastructure is already there.
The primary conversion point of the site is event ticket purchases via Ticket Tailor, fully integrated and styled to match the site design.
The e-commerce store for cacao products was built and is ready to activate, but due to the client's registration situation, a "How to Order" page was created as a practical workaround, giving users a clear path to enquire and purchase directly.
When the store goes live, the infrastructure is already there.
Tools used
Tools
Purpose
Figma
Full design from scratch
Webflow
Build & CMS
GSAP
Animations
Lottie
Animated illustrations
Swiper.js
Event sliders
Ticket Tailor
Ticketing integration
Swiper.js
Program sliders
jQuery Cycle Plugin
Cacao product page UX
Ticket Tailor
Event ticketing integration
Zapier
Newsletter automation
Google Search Console
Analytics & SEO tracking
Riot
Bulk image optimisation
Handbrake
Video optimisation
Results
Next Project
Let's make it happen
Your next website deserves more than a template and good intentions. Let's build something that actually works.