Apple designs an interactive product landing page

You could think that we’re just a team of apple 🍏 fanboys, but it’s not completely true: first, our platform is based on a Microsoft open-source 3D engine BabylonJS, and then, Apple is clearly a cutting-edge brand in terms of communication and product presentation, it’s not a surprise from them to use the best web design & 3D techniques 😻

The Brand:

‍

‍‍Naker has been live for a bit more than a year with the mission to make the web cool again. For us and our growing community (2600 users 🌎), it means using 3D graphics to create more than a website, an immersive and interactive digital experience. The 3D aspect especially is a way to add interactivity 🎮 Usual web navigation is about clicking, scrolling, moving your mouse and typing, but it is usually a one-way communication. As users and visitors, we are passive on our discovery experience 😅 and our actions do not affect the design.

‍

‍

‍

‍

‍

‍

The Landing: Apple Airpods Pro

‍

‍

‍

Why is it so important to add interactivity? In this case, Apple created a product presentation experience. The number one challenge for e-commerce is the aversion to buying something we don’t have under our eyes. Interactive product presentation is the best way to create a phygital discovery experience and increase sales 💰

‍

Apple decided to go for a very interesting mix:

• A very long body to have a lot to scroll 📜
• A background interactive video with pack shots 📹
• Titles and text body that appear and disappear at the scroll 📑

‍

‍

When you start, there’s not any clear indication of what to do, but it’s not a major issue since scrolling is the most natural action for the majority of web users. Once you started to scroll (and usually too fast for the first titles) you enter in a real scrollytelling experience where chapters, text, pack shots and videos alternate to show the features 🎧 and the technical aspects of the new super-expensive AirPods. This is basically a complete product presentation video but more interactive, you are the boss 🙇

‍

Why is it so cool?

‍

‍

Adding interactivity to this product presentation experience is a smart move.

• The originality of the concept is already enough for them to stand-out and to create a wow-effect 😲 This experience was shared on many facebook groups and forum and it is maybe not the first time you read about it
• Giving back the control to the visitor is a way to let him discover the product as he wishes, following his rhythm. I’m particularly interested in the sound quality 🎼 and the technical components of it, but Jennifer in the team is more focused on the sound-canceling 🔉features. Both of us could enjoy the landing and focus on what we wanted to see.
• It is still much more visual 🖌 than plain text. You almost feel like you have already seen the Airpods Pro in real after experiencing this.

‍

What could be improved?

‍

In the previous experiences, Apple used the webGL technology to create those interactive digital experiences. This time, they decided to go with a more simple interactive video 🙆

• Using an already rendered 3D video is theoretically better for overall performance (depending on the size of the video to load) but really reduces the possibility in terms of interactions. The visitor is limited in his actions and can only go forward or backward in the video, there is a lack of some real-time interactions 🕹 We would have loved to have a 360° / 3D view of the product at some point or to have more on-click interactions for the content (like hotspots in the version I created myself this morning with Naker.Story)
• Especially the overall performance of the website is only average, the video is quite heavy to load ⏲ and having more real-time 3D content would have been possible
• The UX globally is not perfectly intuitive and at the end of the scroll you could have the feeling that the video is lagging (but it’s just the end of the scroll)

In short, this experience is quite simple but is cleverly executed and brings interactivity back to the scene 😍 We hope that this will be a breakthrough to show the possibility of interactive web and it’s the confirmation that the web and the whole experience around it are changing in a good way. Without being an expert or spending 100k$ on design, you can start now to design your own on our app. Contact us!

‍

‍

‍