Refinery29’s New Crop Tool: One Image To Rule Them All
At Refinery29, we’ve been overhauling our Content Management System, Dash. This complete redesign is taking place while we are in the midst of relaunching our site as a completely responsive site. To support our beautiful new responsive site, we needed to change the way our editors and designers are creating and cropping images for all of their stories. We are under a constant barrage of new screen resolutions that require support and users consuming more content across a number of retina devices leaves us searching for an easier way to support large images sizes and create a wide range of images for devices without increasing the amount of time it takes to create and publish a story.
The entire redesign of our CMS is a 6-month-long mega project (more on that soon!). We know that we can’t redesign and reengineer the entire product in one shot, so we chose to break it up into manageable chunks. We explored the features we could advance without disrupting the entire product, which we also know has a huge payoff to the user. We want to give them a taste of what’s to come.
We started by creating a cropping tool where all of the art we use in opener images, or promotional spots for stories on Refinery29.com could be edited. When an editor requests a photo or illustration to accompany the story they are writing, our creative department gets to work. They create the artwork, and have to crop that image 9 times for all of the different placements it may appear on our site and on platforms like Facebook’s Instant Articles, Apple News or other social channels.
We did the math, and it’s as time consuming as it sounds! Designers spent an overall total of 8 hours per day cropping images for roughly the 80 stories we publish per day. With the new cropping tool, it now takes only a total of 1 hour, or 40 seconds per story.
The time saved is enough to fly to Paris from New York, visit the Eiffel Tower and eat a croissant (or five).
Having multiple images in a variety of sizes allows us to create new ways to display our content across the site and other platforms with confidence, and without having to worry about someone’s head getting chopped off. The tool allows the user to upload a single image, and then crop and reposition that image so that it looks good in each of the different image ratios we support. If the image they chose doesn’t look good in a particular crop, the user can override that single crop size with a new one, or replace them all.
After releasing the tool to a small group of beta testers, we trained the creative department on how to use it and released it out to them. The response was overwhelmingly positive. Our desire to roll it out to all of our editors across the globe in NY, LA, the UK and Germany was stymied by the fact that a little bit of on-boarding is necessary, so training in-person and all at once was a difficult option.
We produced a training video to live alongside the tool as a guide for our editors to essentially train themselves. Creating a tool that was so easy to use, coupled with great training was something that we had not done in the past. It was a pleasant surprise to roll out the product, sit back, and watch the excitement roll in (…while eating more croissants, of course).
Croissants for all of the people that worked on this, but extra gluten-filled praise to the lead Software Engineer for the tool, Laima Tazmin and our Product Manager, Sara Okin. Without their efforts, this tool would not have been possible!
