Responses by EY Doberman.

Background: We wanted to show what a preferable future of food could look like—and how we can get there. The main purpose was to inspire people working within the food system to help them create positive change.

The target group is people working food: farmers, entrepreneurs, academia and businesspeople. The site is part of a bigger initiative by the future manifestation lab SALLY runs around creating positive change within the food industry by manifesting and showing solution, services and business models that can help create change.

Design core: Preferable Future of Food combines a critical view of the food system with very tangible, near-future solutions that we could start building here and now. By making these solutions not only visionary and beautiful but realistic, we inspire action today, not tomorrow.

We created the site as a story from the future looking back in time to 2023 when the old, broken food system still was our main source of food. And then when people scrolled on the site, we travel into the future and a world filled with life. The design reflected this story by going from a dull, monochromatic world to a vivid one with detailed design and stronger expressions and colors.

Challenges: Creating an immersive storytelling experience where the user is led through the story but still can control their pace and immersion. Through scroll-jacking and responsive music, the site leads the user into the story.

New lessons: We iterated a lot of the site’s design with new content as we were building it, so there was a fair amount of going back and forth between content creators, design and tech. Challenging but rewarding, this process gave us room to give input on design from a development perspective.

Divergent paths: As visitors may notice, there are different types of effects at the site’s beginning compared to its end. Case in point: the sticky scrolling in the first shift’s intro versus the fading effects in the last two shift intros. At first, there was only the sticky effect in the beginning, so we built it bespoke for that section; but then when the designers proposed it to be in more places, there wasn’t enough time to make it generic, so we made a quick workaround by creating a fading animation. It’s always a fun challenge to translate the prompt “…and a cool transition here” into code. Next time, we will have a better understanding of the main story elements earlier in the process.

Navigation structure: Apart from the traditional menu, there is also the navigation pie, which doubles as a progress bar. We built the site as a one-scroll website with a clear idea of letting the story evolve as people scrolled. To add a sense of clarity, we added a progress wheel that also worked as a navigation feature.

Technology: We used Astro and SolidJS—both for the first time—together with Tailwind CSS.

Something that provided a little bit of extra fun was doing the morphing vegetables and hamburgers using sprite-sheet animations, which brought us back to early game-dev days.