StatusTAKING PROJECTS

Projet Bulles

One address for a film, an experience, and a shop.

Bulles is a documentary project about the imaginary worlds of autistic teenagers. We designed and built its bilingual site and boutique in nine weeks, with the holidays in the middle.

ClientClasse Libre
Year2026
ScopeBilingual site / boutique
The students' worlds, on the projetbulles.com home page we built: each sphere holds a student's drawing, drifts toward the pointer, and opens that student's video when clicked.
01Challenge

Bulles is several things at once: a documentary by Mélissa Lefebvre and Paul Tom, with its première broadcast on Télé-Québec; an interactive web experience; a theatre production; and the students' books and artwork. Each has its own audience and its own ask. Online there was a small Wix site. Nothing held the parts together, or told a viewer, a school, a venue, a journalist, or a family what to do next. And there was the clock: we signed on 11 December, the site had to be live before the film's première in late February, and the holidays sat in between.

Before: projetbulles.com at the start of the project. The home page introduced Bulles and stopped there.
After: the same address. The film with four ways to see it, then the experience, the students' worlds, upcoming events and the shop, each with a next step.
02Thinking

The site had to work as a switchboard without feeling like one. Viewers, schools, venues, press, and families each needed a clear path in French and English, and the students' worlds had to stay at the centre, ahead of the logistics. So the directions sit together on the film block, in four plain calls, and the students' drawings get a section of their own on the home page. The identity was already there: REF, LG2's digital studio, had designed the Bulles mark and its gradients and was building the web experience in parallel. We took that identity as given and designed the site's pages and routing inside it.

Who arrives
One address
projetbulles.com
Where the site sends them
The film pageTélé-Québec · Picbois
Events
Contact
Media
The experiencepartner site
The boutique
Five audiences, one address, six doors, all six in the header. Choose an audience to trace its route.
projetbulles.com, the film block: a student's line drawing on the left and four calls on the right, Watch, Buy the Film, Organize a Screening, Attend a Special Screening
The switchboard as shipped, on the English home page. Its four calls hand off to three places: Télé-Québec to watch, the distributor Picbois for a licence or a screening, and the site's own events page for special screenings.
03Execution

We sent the producers eight prototypes between 18 December and 10 February. Content arrived in pieces, so each prototype went out with a list of what was still missing, and the producers marked it up in Figma. The site runs on Next.js, with a CMS for the film and its credits, the events, the press, and the videos. On the home page, the students' worlds are drawn live in the browser: each sphere leans toward the pointer and swells before it opens, and the small bubbles scatter as it passes. In the header the motion stays small: the navigation pill, which the boutique shares, and the Expérience Bulles button. The boutique runs on a Shopify theme we reworked with the site's header, hero, and footer, so it reads as part of the project, not a bolt-on.

boutique.projetbulles.com: the shop's home page, a student's crayon drawing as the hero behind the word Boutique
The boutique at boutique.projetbulles.com: the site's mark, language switch, and gradient line, over a student's drawing.
The navigation: one pill that shows where you are and where you are pointing. It rings the current page in the gradient that runs under the header, turns into a soft tint that springs from link to link under the pointer, and slides back when the pointer leaves. The boutique's Shopify header carries the same pill.
The Expérience Bulles button. Four days after launch the producers asked for something a little special to draw visitors to the experience, and the animation was on the site that evening. At rest a rose glint circles the dark rim; on hover the light spreads around the border and a soft glow rises inside.
04Result

In the site's first four months, the events page, where the screenings are listed, drew almost as many views as the home page. Every kind of visitor has a door of their own, and the students' work stays the loudest thing on the site.

  1. 11 Dec 2025Signed
  2. 18 Dec 2025 to 10 Feb 2026Prototypes 1 to 8
  3. 24 Dec 2025 to 5 Jan 2026Holidays
  4. 15 Feb 2026, 18:58LiveMoved up from 18 Feb.
  5. 16 Feb 2026Promotion
  6. 23 Feb 2026Première
  7. 66 daysSignature to live
  8. 8 daysLive to première
  • LanguagesFrench and English went live together.
  • BoutiqueFirst order two days after launch.
  • HandoverCMS handed to the distributor, so it can post its own screenings.
Seven of the eight prototypes went out after the holidays. When the promotion was set for 16 February, two days before the planned launch, we put the essential changes first and went live the evening before.

Encore bravo et merci pour ce magnifique site. C'était super agréable de collaborer.

Congratulations again, and thank you for this beautiful site. It was a real pleasure working together.

Catherine Hughes · Producer, Classe Libre

Your site has the same job as this one: clients, partners, and the press arrive at one address, and each needs a clear next step. We aim for about twelve weeks; this one took nine.

Who arrives at your site, and where does it send them?

Back to selected workRequest a website audit