Engaging Ecommerce with the Visual Web

Rate this content
Bookmark

Experiences on the web have grown increasingly visual, from displaying product images to interactive NFTs, but not paying attention to how media is delivered can impact Core Web Vitals creating a bad UX with slow loading pages, hurting your store’s conversion and potentially losing sales.

How can we effectively leverage media to showcase products creating engaging experiences for our store? We’ll talk about media’s role in ecomm and how we can take advantage of it while optimizing delivery.

12 min
16 Jun, 2022

Video Summary and Transcription

Images, video, and media are crucial in e-commerce to deliver the best user experience. Nike's acquisition of Artifact Studios and the launch of Nike land on Roblox demonstrate the future of e-commerce in the metaverse. Clear and zoomable images, point-based details, and video are essential for enhancing the user experience. Optimizing media delivery through modern image formats, compression, resizing, and technology can significantly improve conversion rates in e-commerce.

Available in Español

1. E-commerce and the Power of Media

Short description:

Images, video, and media are part of our everyday web experience. How can we take advantage of it from an e-commerce perspective and make sure that we're delivering the best experience we can? We're going to start off at the top with the king of e-commerce, Amazon, where the first thing we see when we load this page is it's covered in media. Here we have Starkadet where I'm a big fan of their Final Space merch. They take advantage of GIFs to display video-like category and product images. Glasses USA allows potential customers to get a firsthand look at what glasses would look like on somebody's face. As far as product pages go, you still need to have the ability to showcase your product. The web is changing. So what does the future of e-commerce look like? Nike recently acquired Artifact Studios, a team who create shoes and collectibles ready for the metaverse. It's similar to the collectible game that Nike has always been a part of, but now as an investment into the digital world. And that wasn't Nike's only foray into that world. Nike also launched Nike land on Roblox.

♪♪♪ Images, video, and media are part of our everyday web experience. How can we take advantage of it from an e-commerce perspective and make sure that we're delivering the best experience we can? So who am I? I'm Kolby Fayak. I'm the one hugging BB-8 and Kylo Ren over there. I work with the dev community as a Developer Experience Engineer at Cloudinary. You can find me pretty much anywhere on the web by just Googling my name as I'm the only one in the world.

So we're going to start off at the top with the king of e-commerce, Amazon, where the first thing we see when we load this page is it's covered in media. It's a good way to showcase available products so it makes a lot of sense. This is the landing page for their fashion store, which likely looks similar to a lot of the top-level landing pages that you've seen where we have large images that are meant to showcase the available products. And if we scroll down, we have the ability to shop by category where we have images that represent each category. Once we dive in here, we can start to see a grid of images where like here on the product listing page, the easiest way to browse a large amount of products is to put them in a list. So we put them in a grid where we can scroll through. Once we're on our product details page, we want to get a closer look and choose our options. Ideally, this means having several photos showing different angles. Now not to pick on Amazon here, but there's really nothing innovative going on. And I'm sure they A-B test every minute detail of this page to make sure that it's not going to hurt conversion, which we'll get to later, but it's all very practical and functional. So how can we take our media in e-commerce up a step further?

Here we have Starkadet where I'm a big fan of their Final Space merch. They take advantage of GIFs to display video-like category and product images. It's a bit more of a creative approach, taking a very typical static medium and making it exciting. Glasses USA allows potential customers to get a firsthand look at what glasses would look like on somebody's face. Buying glasses is hard, and you want a pair that you're going to feel confident in. Traditionally, we'd have to hope for the best with a good return policy, but this gets us a step closer to feeling like we're actually in a store. As far as product pages go, you still need to have the ability to showcase your product. People need to buy something and it needs to be very clear. So you don't want to be over creative, but here like Nike, we can see that they have embedded video as part of that experience to give people a better idea of the fit. Now as creative as some of that is, it's still fitting into a traditional medium. The web is changing. So what does the future of e-commerce look like? Nike recently acquired Artifact Studios, a team who create shoes and collectibles ready for the metaverse. It's similar to the collectible game that Nike has always been a part of, but now as an investment into the digital world. And that wasn't Nike's only foray into that world. Nike also launched Nike land on Roblox.

2. Enhancing E-commerce with Media

Short description:

In the world of e-commerce, it's important to display large clear images and videos to showcase your products. Apple excels at highlighting features with diagrams, while Wyze uses lifestyle photos to help customers envision the product in their own lives. Video can provide more context in a shorter time, and Under Armour effectively uses video on their homepage to engage their athlete audience. As developers, we need to ensure that we display images clearly and avoid overcompressing or using tiny thumbnails.

It's experience that allows you to connect to a digital version of Nike HQ. They have games, sports and community oriented features. But they also have a showroom that lets you check out specific special Nike products where you're given the ability to deck out your roblox avatar with exclusive gear. While we still have a lot of time before this thing becomes super mainstream, we're already starting to see really creative solutions. There's a lot of change happening and it's happening fast.

Let's talk about some of the more practical ways where we can look at our media today. While the metaverse is likely coming fast, we still need to maintain an effective web 2.0. While for some of you this might seem like an easy one, it's super important to make sure that you're displaying large clear images and video to showcase your product. It's especially helpful when you have more than just a single wide shot of the product. People care deeply about the products that they're buying. So being able to have a clear up close look at what it looks like helps them to ensure the quality that they're getting.

And we can't have e-commerce reference shots without Apple, because they do a really good job at showcasing large detailed imagery of their products. But that's not always enough to make sure that the features are clear. They make the extra point to highlight features, diagramming different points for the products, such as their potentially confusing use of three separate lenses for a single iPhone, where they point out the differences between the three. And while it's important to have those big clear images, which Wyze does a really good job at, lifestyle photos are a way to place your product in people's everyday lives, whether the potential customer knows it or not, this helps them to imagine how that product would actually fit into their own life.

So how could these Wyze headphones help you out? While maybe enjoying some music in bed? They're so comfortable that you might forget that you're wearing them. You see on the headline there. Now ThinkGeek, a company that I worked for, who used to sell cool things from all your favorite fandoms, took this a step further. Not only did they showcase the products in a real life scenario, they showed it with a fun twist. So you can fully imagine yourself as Darth Vader, baking with your R2D2 measuring cups. But it makes a difference going this extra step, helping to build a stronger connection with your audience.

Now upgrading media from static images, we have video, which can help drive more context between the visuals in a shorter period of time, along with audio to provide more verbal descriptions, but we can do better than a video just simply embedded in a pop-up. Like my examples earlier, we can use video in ways that will add to the experience without taking away from the existing one. Under Armour instantly sets the tone with video on their homepage. Their audience is full of athletes. So this is a really good way to take somebody right into the gym and get them hyped up. So enough outlooking a bunch of pictures, see what I did there. How can we actually take some of this and make it happen from a developer perspective? In reality, some of these answers may not include technical solutions, like in order to show large clear images, the first thing you need is large clear images. But make sure you're actually showing those images large and clear on the page. And make sure you're not overcompressing or showing really tiny thumbnails.

3. Enhancing User Experience with Media

Short description:

To enhance the user experience on e-commerce websites, it's important to have clear and zoomable images, provide point-based details, include text on the page instead of embedding it in images, and use video instead of GIFs for better file size results. However, it's crucial to consider the impact of media on page load speed and conversion rate.

People need to be able to have a clear look at what the product is. So take advantage of those big beautiful images. But you can take that a step further. You can allow people to zoom in on those images right as they're on your page, avoiding unnecessary steps to take them off that page. There's a lot of great zoom-based libraries that can help us out with this, like React to Interim Zoom gives us a simpler experience to Uniqlo. Or there's a lot of other traditional zoom modal libraries where they don't really provide the zoom experience that you would expect on a product page.

But you can also try to replicate this on your own. So just as an example, once zoom is enabled, we can dynamically grab the cursor position and update the image's position relative to its container. And while this is just a simple example of how this might work, it shows the basics of how we can start to achieve that UX. Now providing point-based details is both a little bit easier and a little bit trickier. Adding some text overlaid on an image isn't too bad. But each one of those lines are pointing precisely to that lens. While we can do that pretty easily for one single viewport size, realistically most of us are trying to build responsive experiences. Again, this is a very simple and incomplete representation, but we can start to see how we can make this happen by using the resize listener and setting coordinates based on the original width and height, where it's percentage-based, so we can dynamically update that position as it resizes.

Now lifestyle imageries is one of those things where, again, unless you're also the photographer, we're going to need creative support in imagery. But we can still see how we can provide nice banners like this without having to embed the text inside of the image. By including the text on the page, we're helping both search engines read that text and accessibility. Also, it's likely easier to make responses so that the text is readable everywhere. And as far as video is concerned, yeah, I would imagine you might be thinking, I can just slap a GIF in there. And yeah, you can, but GIFs can be huge, especially if you want them big and high-quality. We can instead take advantage of actual video on the page, which, depending on the use case, may provide much better file size results. Using the HTML video element, we can hide all the controls in the player UI and set it to automatically play in loop, just to make sure that your app is actually able to see that solution with the results and see how it compares to others.

Now, we have a lot of awesome tools at our disposal. But it's not always as easy as just dumping a bunch of images and videos on a page. There's serious considerations that we need to take into consideration for how we actually deploy these experiences. Without considering the impact, we could be putting a lot of unnecessary load on our people's devices and bandwidth, severely slowing down their page load and hurting their experience. Or worse, killing our store's conversion rate. Now if you're not familiar, conversion rate is the percentage of your traffic that actually buys something. There's a lot of studies about how website speed directly correlates to conversion rate. eBay for instance found that a half percent increase in their conversion rate with a 100 millisecond load time improvement.

4. Optimizing Media Delivery for E-commerce

Short description:

eBay is worth over ten billion dollars, and even a small percentage of that can add up quickly. To optimize media delivery, we can use modern image formats like WebP and AVIFF, compress images without impacting visual quality, resize images to the needed sizes, and let technology handle optimization. By paying attention to media, we can significantly reduce file sizes without sacrificing quality and improve conversion rates. Check out my course, Ecom Product Management and Storefront, at egghead.io for more on building your own online store.

Now that might not sound like a lot, but eBay is worth over ten billion dollars. So just as an example, 0.5% of one billion is five million. So it starts to add up really quickly. That means that while all of our video and imagery might help build a good user experience, that media is going to take up a vast majority of the size of the page. So if we don't pay attention to how we're delivering it, we're going to bloat our pages and destroy our conversion rates.

So what can we do to help optimize that delivery? Well, let's look at some examples of images. Start off, while JPEG is a great option, there's more modern formats that can help us deliver high quality images at reduced sizes. WebP and AVIFF are two great options. And depending on the image, can bring some drastic reductions in size. We can also compress our images to the point where we're not impacting the visual quality. Maybe it won't matter for this tiny little thumbnail, but we've learned that we want to display these nice and big, right? So we want them all displayed in their all beautiful big glory. So we can let tech automatically decide how much we want to optimize without hurting the visual quality. We're not over optimizing and we're not wasting precious kilobytes in downloads. If you're working with high-quality imagery, your source files might be huge. If you serve them as-is, the browser has to resize them down anyway. So you're just wasting bandwidth. Resize to the image sizes that you need. And don't try to just crunch the image just to make it smaller. You'll end up with super blurry or pixelated images. Modern image delivery can give you the exact sizes you need on the fly. So take advantage of that. Bring this all together, we have some pretty amazing results. Using modern formats, letting tech handle automatically optimize our images, and serving the images in sizes that make sense for our web app, we were able to slash this particular example down from 652 to 76.6 kilobytes. All without sacrificing quality. If we pay more attention to our media, not only will we be able to responsibly build great experiences for the web, we'll be helping ourselves provide the best opportunity for conversion.

Speaking of e-commerce, if you want to learn how to build your own online store, check out my course, Ecom Product Management and Storefront, where I walk you through building a full stack app with Next.js, Snipcart, and GraphCMS. You can find it at egghead.io, where I'll include it in my talk notes. And that's it. If you want to learn more about or chat about the talk, you can find me everywhere at ColbyFayok. And also tweet out a link with some of the stuff you've seen here today.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion