"Kar.at by Stad Antwerpen"
The problem
Bringing young people to Antwerp?
Despite a freshly revamped, youth-focused visual identity, the city of Antwerp wanted to interest more Gen Z-ers and early millennials in what it has to offer. Our team chose to focus on its status as a fashion city, while also dismantling the idea of its luxury industry making it too expensive or inaccessible.
The solution
An innovative shopping experience
We introduced a shopping platform where all items and stores are curated by local shop owners, influencers and creators. Instead of scrolling through cards, the users can explore a vast canvas of items - or facets, as we call them - sorted by the vibe of their curators. Relations are shown via lines connecting each facet, forming a vast network that represents Antwerp’s diverse fashion scene. The user cannot traditionally buy the items, instead having to reserve them for physical pick-up through the platform’s “vault” interface. This gives them a reason to visit the city, something to look forward to, a roadmap for a full day of shopping.
LOADING MEDIA...
LOADING MEDIA...
LOADING MEDIA...
LOADING MEDIA...
LOADING MEDIA...
LOADING MEDIA...
LOADING MEDIA...
HANG ON A
LIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIITTLE
MORE!
THE CHALLENGES
The tech stack
Creating the node interface, while overlaying 3d shards or “facets” on top of it was a constant hunt for JavaScript physics libraries that would play nice with both React and Three.js. Despite dealing with constant performance or scoping issues, we finally managed to combine d3-force with React Three Fiber built on top of Three.js to make it work - both of which I was only using for the first time!. GSAP was used for transitions and scroll animations.
Responsibilities & possibilities
I was responsible for the front-end and design part of the project - for which I had big dreams, perhaps a little too big. My vision was sometimes at odds with the back-end part of the project, which my teammate had to handle. Our codebase changes sometimes affected both our intended results, and necessary sacrifices on both sides had to be made.
A smooth experience
The scale of the platform was very large, so we had to make sure everything was intuitive - from our diamond-facet analogy, the AI algorithm determining the relationships between the items, to our reservation workflow and how the canvas works. We had less time than it would have been ideal to figure out all the kinks, but most things worked out in the end. With more time, perfecting everything would be a welcome progression.