Cool Websites

Apple designs an interactive product landing page

by Jack
4/2/2020

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!

โ€

Share