The problem
A working sertanejo duo lives on shows: village festivals, city events, venues across the interior. Money arrives when a producer decides to book them.
Their entire presence sat on other people's platforms, and the address in their bio was a link aggregator. That works for a fan, who wants to hear the music and find the next show. It works badly for whoever is booking.
A producer landing there finds no schedule, no press material, no way to ask for a quote. They end up in the Instagram inbox, in the same queue as a fan requesting a song. A ten-thousand-real booking and a "play that one" arrive through the same door, carrying the same weight.
That cost never shows up in a report. It shows up as a proposal that was never made.
The constraints
The decisions
One site, serving two audiences that look nothing alike
A fan wants music, video and the date of the next show. A producer wants credibility, an organised schedule and a booking form. Those needs pull in opposite directions: one asks for warmth and slang, the other for plain information.
The system solves it with a shifting register rather than duplicated structure. The fan voice owns the hero, the gallery and social content; the informative voice owns the schedule, the press material and the form. Emoji is allowed in the first group and banned in the second, and that is written into the rules rather than left to whoever writes the copy later.
A fan site plus a separate booking area. Rejected for two reasons: it doubles the surface the marketing team has to keep current, and a producer arriving through the Instagram link would land on the fan's doorstep anyway.
A component that waits for the logo, rather than an approximated one
Without the files in hand, the answer was to build the place they go: a signature component that sets the duo's name in type and works with or without a symbol beside it.
That leaves the system usable today and ready for later. When the original files arrive they fill a component that already exists, with no page needing a redesign and nothing built on top of a guess.
Redraw the monogram from the Instagram captures. Rejected: it would be a rough copy standing in for an original that exists, and every piece made from it would start out off-brand.
The green stays rare, and that is what makes it work
The palette is dark and warm, the colour of stage light: near-black, graphite, off-white, with amber as the energy. Electric green exists, but only shows up on "live", on play, and on the booking button.
It is the same convention audiences already carry from music apps, and it only holds while it stays scarce. A colour that appears everywhere signals nothing.
Promote green to a second brand colour alongside amber. Rejected: it would buy visual variety and spend the system's one strong signal, the one pointing at the action that earns money.
Every component is born as a CMS slice
A show schedule changes weekly, sometimes the night before. A site where a new date depends on someone opening an editor, changing code and deploying is a site that goes stale within a month, and a stale schedule is worse than none at all: a fan drives to the wrong town.
So the system was designed for Prismic with Slice Machine from the first component, with an explicit preference for reusable pieces over page-specific ones. The duo's communication is handled by a digital marketing consultancy, and the CMS exists so that team publishes directly, at its own pace.
Static pages, faster to build. Rejected: it puts a developer in the path of every new date, and the team producing the content would start depending on the schedule of whoever writes the code.
The result
What was delivered is the system and the site: tokens, components and content rules on one side; on the other, the screens built on top of them, covering home, schedule, music, gallery and booking.
The concrete change is structural. Booking stopped being a message among other messages and gained a path of its own, carrying the information a producer needs before asking about price. The schedule gained a place the marketing team updates directly, which was the condition for the information staying correct after I left the project.
There is no number here because there is no measurement yet. The indicator that matters is how many booking requests arrive through the form instead of the inbox.
Three open items were flagged rather than buried: the fonts are substitutes chosen to match the intended direction, the icon set is a third party's, and the signature component is waiting on the brand's original files. None of them stops the system being used today, and all three swap out without redoing work.
tech sheet
- stack
- Next.js · TypeScript · Prismic · Slice Machine · Vercel
- role
- Visual direction, design system and development