Reformation Designs Engaging Shopping Experiences With Cloudinary

Reformation is a leading sustainable fashion brand with more than half of its customers visiting its website through mobile devices. Relying on a basic, out-of-the-box functionality of its existing e-commerce platform, Reformation struggled to deliver optimized images suited to every user’s device and videos that weren’t choppy and hard to watch. After integrating Cloudinary into its visual media workflow, Reformation was finally able to deliver high-fidelity and high-performant images and videos for each individual visitor’s device and bandwidth requirements. These changes simplified Reformation’s media workflow and boosted its customer experience, resulting in a significant improvement of its conversions and brand satisfaction.

ABOUT

Reformation

Reformation is a Los Angeles-based fashion brand that “makes killer clothes that don’t kill the environment.” The process for its sustainable women’s clothing and accessories starts with designers thinking about what its customers really want to wear right now. While most fashion is designed 12 to 18 months before release, at Reformation a sketch can become a dress in about a month. The company sources the most beautiful and sustainable fabrics possible to bring those designs to life quickly. Reformation has brick-and-mortar stores in California, Florida, Illinois, Massachusetts, New York, Texas, and Washington, D.C., with plans to open between five to eight new locations annually. These storefronts are designed to showcase the company’s products, but to date the majority of its business is conducted online.

THE CHALLENGE

Limited Control Over Image and Video Experience

For Reformation, the design of its website and overall customer experience is as important as the sustainable fashion the company designs and sells. Because its brick and mortar stores showcase designs and draw shoppers to order online, the company’s website needed to offer consumers the ability to quickly look through the latest designs, see multiple images of products, and make purchases with ease.

Reformation also has a fast timeline for producing images and going live with new products on its website. Priding itself on bringing fashion to its customers within a month, it typically takes just three days to go from photoshoots to launching the items online.

To serve images on its site, Reformation was using an out-of-the-box, built-in functionality included with Workarea, its e-commerce platform. It leveraged Dragonfly, a customizable RubyGem, to generate thumbnails in Ruby on Rails.

Even though the solution seemed to work well, “there were problems that we didn’t even realize were problems,” says Jessica Chappell, Director of Product Management at Reformation. “We were delivering the same image to customers shopping on a desktop as we were for mobile devices not on WiFi.”

Workarea’s solution required every website visitor to download the same image at the same resolution. This either caused issues with the quality of brand and product images on high-resolution screens or required unnecessary bandwidth use by the customer, depending on the platform or device they were using to access the site.

Reformation’s developers were also experimenting with video on the site, integrating clips via Vimeo. However, Chappell noted that the performance was choppy and not the quality experience it hoped to deliver to visitors.

THE CLOUDINARY SOLUTION

Optimized Image and Video Delivery

When Reformation’s Vice President of Engineering found Cloudinary, Chappell says that’s when they discovered the problems that images were causing on the website, particularly for mobile users, which made up about 56% of the visitors.
Reformation integrated Cloudinary into its workflow in October 2018 to support its fast turnaround from photoshoot to product launch. The creative team uploads final images to an FTP site, identifying products based on style, color, and other features.
The development team has a cron job set up to check for those images on a regular basis, which then creates the necessary database connection and uploads to Reformation’s Amazon server. Cloudinary is used in the background to upload high-resolution originals and deliver an optimized, responsive version to each visitor, regardless of whether they access the site via the web or on their mobile device.

Rather than manually specifying breakpoints for each image across the homepage, product listing page, and product details page, Reformation uses Cloudinary to automatically adjust the resolution and pixel density of every image based on the device pixel ratio (DPR) and viewport of the viewing device.

“We’re essentially saying that we want to generate 20 images every 100 kilobytes,” says Matthew Wicks, Software Engineer at Reformation. “If our visitors are on a high-definition monitor, we have it set to be 2x of the required display resolution. Cloudinary then figures out which version to serve.”

In addition to these product images, which are featured on product listing and product detail pages, Reformation also leveraged Cloudinary to optimize its content images. The content images are marketing images, often with text overlays, that are handled through Reformation’s content management system.

After seeing how Cloudinary had been instrumental in optimizing images, Reformation adopted it for videos as well. This process, too, is automated. The e-commerce merchandising team uploads each video into Workarea, then Cloudinary ensures the videos are delivered with smooth streaming and no buffering interruptions, regardless of the device or bandwidth available to the customer.

“Cloudinary is a platform that we’ve been able to easily integrate with other existing systems and use it in a seamless way,” says Chappell. “Most of our team doesn’t even realize Cloudinary is there doing all those magical things.”

THE RESULTS

Engaging Shopping Experience and Improved Mobile Performance

By switching to Cloudinary, Reformation achieved significant improvements in online store performance, particularly on mobile browsers. Overall, page load time is now 31% faster. This resulted in a 26% higher Google PageSpeed score, which directly impacts Reformation’s SEO ranking.

Reformation also reduced the size of its website, decreasing the total size of all images by 60%. Images on the category page shrunk by 48% after the company implemented Cloudinary.

“What’s so cool is that our tech team can leverage Cloudinary to make ongoing improvements to our site,” says Chappell. “It’s not a one-and-done solution and we can now effortlessly evolve with the latest trends and technologies.”

After seeing how Cloudinary helped with image optimization, Reformation explored how it could help in other parts of the business. “When we started to use videos, it was a no-brainer to use Cloudinary,” says Wicks. “We saw the benefit of using one platform for all of our image and video needs — simplifying our martech stack — with the same workflow.”

“Cloudinary has so much functionality, and is constantly innovating its platform, that you can decide how far you want to take it. One of the things that’s so special to me about Cloudinary is how it allows us to make continuous enhancements to our website to ensure our users have a great experience.”