Interactive website for Data Science Lab with an AI contact form

Data Science Lab (DSL) delivers data and AI solutions. After a repositioning with a new brand identity, developed with Dentsu Creative, DSL asked us for an interactive website. Not a site that only describes their expertise, but one that shows it. Including a contact form that answers by itself.

I liked this brief, because the request made so much sense. A company that sells AI with a static brochure site is a bit like a hairdresser with a bad haircut. Below, you can read how we solved that.

What was the brief for the interactive website?

Turn a new brand strategy into a site that feels like the company behind it. DSL wanted a tech look: clean and no-frills, but dynamic. There were three concrete requirements. Animations that respond to user behaviour, a contact module that lets visitors feel DSL's own AI expertise, and a CMS for blogs and vacancies in two languages.

The old website was tidy, but quiet. Four service links above an introduction to the lab, with a round logo mark next to it. There was nothing wrong with it, except that it showed nothing of what DSL actually does. And that is exactly where a site for an AI company has to start.

What I guard most closely on briefs like this: interaction has to add something. Moving elements just because you can mostly make a site slow and tiring.

How does the AI contact form work?

Like a conversation rather than a form field. Visitors describe in their own words what they want to achieve. A language model from OpenAI assesses that question and returns a relevant answer, before anyone at DSL gets involved. So the visitor gets something substantive back straight away.

That does two things at once. The visitor gets an answer right away instead of a confirmation email. And DSL shows the technology it earns its living with. There is hardly better proof on a website that you understand AI.

I am critical of applications like this, though. An AI form that gives vague answers is worse than an ordinary form. That is why the form first asks about the visitor's goal. The model assesses that question and only answers after that. You can read more about how we use AI for customer questions under AI customer service.

How did we build the animations?

With GSAP, an animation library that lets you time movement precisely. The animations also stay smooth on any device. They give the interactive website rhythm without demanding attention. Elements come in as you reach them, and transitions follow the scroll direction. That way, the site responds to what the visitor does.

The new homepage sits on black, with the heading 'DSL does that,' and the line 'We deliver data solutions with a purpose'. On the right is a coloured arc. That is exactly the balance DSL was looking for: clean, but not quiet.

For complex sequences, GSAP performs better than separate CSS animations. For a site that moves in many places, that makes a difference. An animation that stutters does not look dynamic, it looks broken.

How does the site stay consistent and easy to manage?

Through three choices we made up front. All components are defined in a design system. The sitemap was ready before the design started. And the CMS is set up for multiple languages, so the team publishes by itself. That keeps the site tidy, even when twenty pages have been added a year from now.

A design system as the foundation

New pages are made from existing building blocks. That keeps the site consistent and makes extensions faster. It also stops every new page from getting a style of its own.

Sitemap and navigation planned up front

Before the design started, there was a detailed sitemap and a UX design. We then created the UI design together with Suzanne, Head of Brand at DSL. She knew the new brand identity from Dentsu Creative inside out. As a result, the navigation is built around the questions visitors ask, not around the internal organisation. That sounds obvious. Yet I see many sites where the org chart decides the menu structure.

Bilingual, managed from one CMS

The site is available in Dutch and English. DSL publishes blog articles and vacancies in both languages without a developer. The careers page is a good example.

What did the interactive website deliver?

Blogs and vacancies go live when the team has them ready, in both languages. The design system keeps new pages within the same style. And the contact form gives visitors a first answer before anyone steps in.

After launch, DSL noticed one thing above all: visitors stay on the site considerably longer on average. The bilingual set-up also widens the international reach. The site shows what DSL does, instead of only telling it.

I fully agree with that last sentence. A website is never finished.

For another example of a site the team manages itself, read the case on the headless platform for Sprints & Sneakers. And if you want to know roughly what a project like this costs, take a look at the cost of having a website built.