Helping Fans See the Whole Picture (and Not an Armpit)

By Susan Stieglitz, Head of Imagery & Michael Luzmore, User Interface Engineer

Our customers use the StubHub platform to find tickets to an event that will delight all of their senses — whether it’s a Broadway show, a Giants game, or a stadium concert. Today’s customer demands a rich visual experience in almost everything they do. This, of course, includes shopping for tickets online.

When customers land on StubHub.com, they see a hundred thumbnails of their favorite artists and sports teams — and this doesn’t even begin to touch on the breadth and depth of our visual content, which includes photos, videos, views from seats, virtual views and more.

But the old way of handling this visual content, from manually editing our images in Photoshop to tracking down and deleting images that we no longer had the rights to, was a tad backasswards.

Delivering imagery at the quality we demand — and at scale — is no small feat. The images themselves are utilized at a massive and rapid clip:

• 54,506 entities in the catalog with multiple images that need to be selected, edited and updated for events continually
• 120,000 active events on site
• 800+ unique events published every day

As StubHub continues to modernize our tech stack, we decided to partner with a cloud-based data asset management (DAM) platform to help us dramatically improve the way our images are edited and utilized across mobile and desktop platforms.

After an exhaustive search, we went with Cloudinary. We knew that by adding this new tool to our growing toolbelt of software solutions, our image content editorswould be able to construct a new DAM in a way that would make our images load faster, look clearer and appear exactly as they are supposed to.

The Case of Billy Idol’s Armpit

In the past, editing images to fit the event cards on our desktop platforms was an onerous task — we’re talking 17,000 images that had to be manually edited. An image that was formatted for a desktop browser wouldn’t always fit in a mobile browser. This is problematic as all other viewports share the same image. This resulted in the dreaded “croppening.”

For instance, a picture of Billy Idol that has been edited for a desktop browser may show him in full on someone’s desktop browser, like this:

But in other viewports, like a mobile phone, you may just see only a portion of the same image, which can be anything from his trademark spiky hair to his armpit. A less than desirable user experience.

In many cases we’re not allowed to alter the images due to copyright issues. As you can imagine, using one image to fit in all 30 different shapes and sizes on multiple platforms (including mobile apps and mweb) was a headache — hence Billy Idol’s armpit appearing on a desktop browser.

Moreover, for many of the images we use, we only have rights for a certain period of time. When those rights lapsed, we’d have to manually track the image down and remove it from our platforms. In a perfect world, we would have the ability to add metadata to images in order to track and remove protected images when the time came.

Older versions of the StubHub website were lightweight and used fewer images for the events we promoted. However, since 2015 we’ve greatly expanded our image library, in addition to improving how we utilize images on the site and how many images we have on the site. This made our website “heavier.” We wanted our discovery pages to be able to hold more images but still be lightweight and able to move faster.

We liked Cloudinary because it gave all teams that work with images — Content, UX, Performance, Brand Partnerships — a self-service tool that has Photoshop-esque functionality already built in. The DAM also gives a centralized location to track where all images come from, what kind of license they have, when the license expires, and how they can be used.

Image is Everything

Adapting and integrating a DAM into our operations gives us a singular location for all our assets, keeps our updates in sync, and sets the expiration dates for when we no longer have the digital rights to an image. It also creates a self-service system for Marketing’s brand and partnerships teams to use the content correctly.

As part of our modernization initiative, the User Interface team has been migrating StubHub’s website to React. We designed a standardized Cloudinary component and integrated this into the React stack so that any changes made to an image are applied throughout all other UIs. It helps the UI team standardize what types of transformation are applied to imagery to enhance quality and optimize the asset for the numerous platforms we support.

This new component also gives us the ability to use a single high-resolution source image that can be utilized in multiple end-user configurations.

Asset Load Time is (Also) Everything

Let’s say we have a high-resolution 2mb image of Lizzo from our catalogue that we need to use for her performer page. The image is loaded into the Cloudinary component and we use the facial recognition tool to ensure that Lizzo’s face remains prominent in all viewports. For images that don’t have faces in them, the imagery team use edge and entropy detection tools to also ensure that the image is being displayed as desired in these viewports.

We can reduce the page weight without compromising quality. The Cloudinary component optimizes the image for the device type and browser — this is important, as some devices, like Apple, have different device pixel ratios (DPR) than others. We’re utilizing the Cloudinary component in such a way that now one image will automatically adapt to the DPR of any device.

When all is said and done, that 2mb picture of Lizzo has been reduced to 15kb. This results in a faster download — from 336ms to 51ms. Overall, site speed is now up by 70 percent thanks to these improvements, and we’ve experienced a 40 percent reduction in asset load times on the homepage so far.

Keeping an Eye Towards Future Solutions

Right now, we are exploring new ways of utilizing images to make our customer experience is entirely unique to StubHub. Take, for instance, the primary image on the Jonas Brothers’ StubHub page. The current image has a lot of orange hues in it:

We are now able to use the Cloudinary component to automatically detect the primary colors in the picture and use those tints as the background colors of the page. The Jonas Brothers’ orange hue will soon replace the purple and teal colors of the brand’s header on its StubHub page to provide more visually distinct traits that are meaningful to performer-centric pages.

Another example: We don’t have brand partnerships with every single sports team that we sell tickets for, which means we often end up using generic sports content that doesn’t match the official colors of the team. But now we are able to add a team’s official colors to the images used on its StubHub page.

This helps users automatically make the association between the image and their favorite teams instead of experiencing that brief moment of confusion when a generic image of, say, a football player in a gray jersey is being used on the Kansas City Chiefs’ StubHub page.

By notching up all of these seemingly small things, our customer now has a faster and more visually appealing user experience. A beautiful image that downloads at a rapid speed instills confidence in the consumer and tells them that StubHub is a reliable service. It goes to show that a great user experience really is in the eye of the beholder.

Learn more about the authors of this post, Susan Stieglitz and Michael Luzmore. Want to work on solving small problems that add up to big results? Come join us.