NoA Ignite
The Checkout 2022
Nostalgic, pixelated, scrolly-telling, and smoothly animated.
The Checkout 2022
by Klarna
Nostalgic, pixelated, scrolly-telling, and smoothly animated.
Best Visual Design /
Honoree
Trying new technologies to push innovation and achieve big gains in performance.Martin Barri, Technical Director & Senior Developer and Alexander Flink, Technical Director & Senior Developer
Q: Once you settled on your idea, what influenced your decision on the chosen technical approach? How did it differ or go beyond approaches you’ve taken in the past?
A: We had quite an intense production period, which required us to be quick on our feet, and have an iterative process. For our technical approach, we found inspiration in how you create storyboards for moving pictures and how video games use confined virtual spaces such as an elevator to load new assets and erase previous ones. These solutions led to an efficient way of prototyping, and a smooth user experience with excellent performance.
Q: What were some of your biggest learning and takeaways from this project?
A: Our biggest learnings in this project were primarily three things. First, how far you can push animations only using native browser APIs thanks to WAAPI (Web Animations API). Secondly, how expensive large amounts of HTML elements can be in terms of performance. Creating and destroying elements as you scroll the page resulted in huge performance gains. Finally, deploying the project on Vercel made it fast and easy to share updates with the team.
Q: What web technologies, approaches, tools, or resources did you use to develop this experience (WordPress, headless, AI, Sublime Text, HTML5, Adobe XD, etc)?
A: To ensure a fast TTFB (time to first byte), we leveraged Next.js static site generation capabilities together with hosting on the Vercel platform where you get access to their globally distributed CDN (content delivery network). This ensures the site feels snappy no matter where users are located in the world. Frontend technologies include React, @noaignite/oui, and MUI. We also used Vercel’s “Audiences” feature to measure traffic.
Q: How did the final product meet or exceed your expectations? What results did you see?
A: We're so happy with the result, but even more so with the process behind it. It was so much fun to quickly prototype different approaches with our designers within the tight time frame - sometimes taking a wrong turn but slowly and surely getting closer to the desired end result. With such a short timeframe, we didn’t have the final content until near the end of the project. Seeing everything come together at the last minute felt great.
Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?
A: We're living in an exciting time when technology is advancing at great speed. The possibilities in terms of creating distinct digital experiences that break the mold are pretty much endless. Our team gathers specialists within tech, design, and strategy all under one roof - forming a powerhouse for digital growth centered around creating experiences that move both people and the needle.