.png){kind=spacer}
A New Photo Editor for Condé Nast Editors
This project covers the design and development of a new photo editor Condé Nast editors use. The photo editor is part of a proprietary content management system that powers the production and distribution of content for ~70 Condé Nast brand teams across 10 countries and in 8 languages. It has 4600+ users. This work freed up days of production work, saving 100's of hours, allowing editors to focus on creative, innovative storytelling.
The Situation
A small Condé Nast product 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.
Some Condé Nast editors at world-class brands (Wired, Vogue, Vanity Fair, The New Yorker) were manually cropping up to 300 images a day to meet responsive design requirements as the number of distribution channels continued to expand.
Design Challenge
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.
Approach
We kicked off this work with a design sprint that I facilitated. This aligned the team from the beginning. One agile squad defined the work after the one-week sprint then moved to design. I was the player / coach on this work.
Impact
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
Understanding the Problem
As the Design Lead, I kicked off discovery with a sprint that immersed us in the problem space. There was a 100% committed, multidisciplinary team in place and ready to get started.
My role
- Workshop Facilitation
- Design Audit
- Competitive Analysis
- Research Coordination and Execution
- Wireframes
- Prototypes
- Detailed Design Delivery
A few surprises were uncovered during our sprint:
- 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
Problem Statement
We are going to reduce the hours spent on photo production so that we can give the brands more time and resources to focus on world-class storytelling.
We are going to design a feature that is deeply integrated with the tool our editors use to produce stories, so that editors can more efficiently produce image renditions required for responsive designs and an endless number of distribution channels, as well as, edit metadata, focused on a Q2 launch.
Persona
User Stories
As a producer, I need to quickly upload images in copilot so that I can add the images to articles, galleries and promotional areas of my site.
As a producer, I need to quickly generate renditions of a image based on aspect ratio so that the templates for my site have the images expected.
As a producer, I need to quickly edit images in copilot so that I can edit the credit, caption and other relevant data pertaining to the image.
As a producer, I need to see the different crops of an image based on aspect ratio so that I can make sure the cropped images meet my editorial standards.
As a producer, I need to upload images and restrict cropping so that I can preserve the way the original image appears.
As a producer, I need to edit automagically-generated crops of an image based on aspect ratio so that I can correct crops that do not meet my standards.
As a producer, I need to be notified when my uploads are complete so that I know when it is ready to be edited.
As a producer, I need to see my most recent uploaded content so that I can easily find and edit the content I upload.
Mapping the Editing Process
Following our qualitative in-depth interviews with users, I mapped the photo editing process showing how the different systems the editors use support their needs
Ideate
Crazy 8’s and Zen Voting
A cross-functional team sketched ways to meet user and business goals.
Design
Using low-fidelity concepts, we conducted research with the users to determine the best path forward.
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.
Setting a Focal Point
Always Setting the Focal Point at Top Center
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.
Results
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.
It is impossible to imagine the burden of cropping 300 photos. Now, this task is almost completely automated by technology with enough editorial control built in for the editor to update the version of a specific crop or all crops if warranted.
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.
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
Reflection
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, Design Lead
Laura Carroll, UX Researcher
Gustavo Medina, Engineer
Ann Kim, Engineer
Christina Kung, Engineering Lead
Nadia Rivadeneira, Product Lead
Let's Work Together
