Apple designs an interactive product landing page for the Airpods Pro ๐
Each month we will highlight the interactive digital experience that has impressed us the most. Made by the advertiser or by an agency, in France or elsewhere, this section's purpose is to show that the web can already be cool.
Itโs been the third time that we feature Apple in this section, after the mobile iPhone X experience and the Xr / Xs landing page, they did it again with this Airpods Pro 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: If you didnโt read it already, you can check our first article about Apple here ๐
The Landing: Apple Airpods Pro
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.
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)
Click here to discover a short version of this experience I reproduced in Naker.Story
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. Sign up and start for free!