NoA Ignite

The Checkout 2022
by Klarna

Nostalgic, pixelated, scrolly-telling, and smoothly animated.
Best Visual Design / Honoree
NoA Ignite

Best Visual Design

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: Can you briefly describe your project and the concept behind it?

A: The Checkout is Klarna’s global annual summary of the year through the lens of our purchases. For the 2022 edition, it was clear that the year gave the past a place in the present. To reveal the trends, Klarna teamed up with NoA Ignite to create a unique take on the classic report format. All wrapped up in a satisfying pixelated yet crisp user experience full of the nostalgic trends and products we loved all year long.

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.

Q: How did you reach a good balance of your own creative ideas and technical capabilities with a fair representation of the client’s brand?

A: If you know Klarna, then you know they're all about smoooth shopping, online and offline. Bearing this in mind, we knew that The Checkout 2022 had to be just as smooth in terms of user experience. Having previously worked closely alongside the brilliant team at Klarna meant that we were in sync when it came down to experimentation and working in an ultra-agile manner. Thanks to this, we could jointly deliver another kick-ass collaboration.
© 2024 The Webby Awards. All rights reserved.