.png){kind=spacer}
Saving Editors 100's of Production Hours
This project focused on a feature enhancement to Copilot, a proprietary content management system used by Condé Nast editors. Copilot powers the production and distribution of content for ~70 Condé Nast brand teams across 10 countries and in 8 languages. It has 4600+ users. Some editors were manually cropping up to 300 images a day to meet responsive design requirements as the number of distribution channels continued to expand.
This project covers the design and development of a new frontend and backend for the photo editor that Condé editors use. Thanks to this effort, photo renditions are now automatically created based on aspect ratios instead of editors manually creating pixel perfect crops. Entire days of production work were eliminated, freeing up editors to focus on creative, innovative storytelling.
Challenge
A small platform team built the proprietary CMS, Copilot, from the ground up. I was responsible for the end-to-end UX design for Copilot, joining as the first full-time designer on the team. After building the foundational elements of the CMS, the team began enhancing Copilot’s capabilities based on business and user needs.
In order for Condé brands to continue to have the same visual impact, the Copilot team needed to unlock the full potential of digital visual storytelling. This meant we needed to build technology and workflows that would flex and evolve as the medium evolved.
Brands like Wired, Vogue, Vanity Fair and Conde Nast Traveler are recognized
Solution
It is not often you get to work on a true, meaty UX challenge that can be solved with a light UI with a powerful engine sitting behind it. This project was a true win.
Powering the simple, intuitive UI is a new service that creates photo renditions based on pre-configured aspect ratios. By default, it crops top center. The service also backfills new renditions and converts png to jpeg also it detects an alpha channel; then, it’ll remain a png.
An almost impossible to imagine task of cropping 300 photos, is now completed by technology with enough editorial control built in for the editor to update the version of a specific crop or all crops if warranted.
Together, the new photo editor and photo editing service:
- Enabled the amazing visual presentation expected from Condé’s world class brands
- Good performance -- page speed + traffic
- Improved editorial efficiency, saving editors entire days of production work
- Prepared the brands for the future -- No longer defining images by pixels but rather by aspect ratios
Approach
Discovery
As the UX Lead, I kicked off discovery with a discovery sprint. There was a 100% committed, multidisciplinary team in place and ready to get started.
- Workshop facilitation, design audit, competitive analysis and user interviews (My role)
- Tech audit and SWOT analysis of possible ways to approach (Engineering Lead, Product Manager)
A few surprises were uncovered:
- Photo editing was handled by a small number of our users due to the specialization and effort
- The problem space was slightly bigger. Beyond cropping, photo editors also spent a lot of time searching for images previously uploaded, adding metadata to photos and adding credits to photos. There were also a lot of additional fields on the photo page that were not important.
- “The BIGGER problem is being able to delete.” Editors also could not delete photos which was a problem for various reasons including legal reasons.
Define
Activity: Mapping the Photo Editor Process
Ideation
Activity: Crazy 8’s and Zen Voting
A cross-functional team sketched ways to meet user and business goals.
We still had questions we wanted to resolve before moving forward.
- Do editors value control over cropping to automation?
- What information will help editors better organize images so they can find them later?
We were also torn between two approaches:
- Allowing editors to first set a focal point; then create image renditions based on the focal point.
- Always creating the image rendition with a top center focal point and allowing editors to adjust if needed.
We took provocations, or low-fidelity concepts, to the editors to “provoke” answers from the editors.
We were able to uncover that the best path forward was to automate rendition creation with a top, center focal point using the low-fidelity prototypes.
The team continued to refine the look and feel of the interface with continuous cycles of sharing and iterating while also starting development. The editors were extremely satisfied with the new photo editor, resulting in a higher satisfaction rating for Copilot.
The Team
Laura Cochran, UX Lead
Laura Carroll, UX Researcher
Gustavo Medina, Engineer
Ann Kim, Engineer
Christina Kung, Engineering Lead
Nadia Rivadeneira, Product Lead
View More Case Studies
