A Better Way to Reap

The number of images an editor at Condé Nast needed to create was continuing to grow due to responsive designs and an endless number of distribution channels. One photo editor was cropping 300 images a day. Editors wanted the feature to be built in their current CMS, Copilot. Copilot is a proprietary system built by Condé Nast for editors.

My Role

Sprint Master, Design Audit, Sprint Deck, User Research, Prototyping, Wireframes, User Testing, Action Plan

The Solution

Develop a service that generates crops of an image for any aspect ratio based on a predetermined safe zone of top center.

Process

I used a user-centered, collaborative and creative approach to design, developing solutions by first understanding the motivations, goals and contexts of the people using our platforms.

Understand

Define what the user needs, business needs and technology capacities are.

Define

Take the information you learned in understand and create frameworks that capture the needs, goals and motivations of your users.

Diverge

Get out as many ideas as possible.

Decide

Use zen voting to pick a concept to prototype.

Prototype

Make your idea testable.

Validate

Get user feedback and iterate quickly. Make sure engineering scope is appropriate. Share with stakeholders.

Understand

I needed to better understand the photo editing ecosystem as it exists today. Who is involved? What activities happen? And, why? I also needed to understand technology that already solves this problem elsewhere. Methods we used included a competitive analysis of other media organizations, heuristic review of the current tool, interviews with expert photographers and stakeholder Interviews.

The War Room

Define

I created personas, scenarios, mental models and an experience map of the photo editing ecosystem.

Mapping the Ecosystem

Diverge

After we understood what the current system looked like, and the pain points with that system, we were able to pick a couple of problems to brainstorm solutions for. We used sketching and storyboarding to bring these ideas to life.

I was surprised to hear how inefficient other areas of the image editing workflow were. It wasn’t just the cropping that was time consuming. Photo research in the application was also very time consuming. I broadened our idea generation to include these areas also.

After doing crazy 8’s, sketching 8 ideas in 5 minutes, and then sketching one big idea, we put on our zen voting hats. Each person interpreted the sketches without explanation and put a green or red dot on pieces of the sketch they liked or didn’t like. The team combined concepts from the sketches into one big idea.

Decide

The team combined concepts sketched while we were diverging. Then, we used the zen voting method to decide on one idea to prototype.

Prototype

We created three prototypes using Sketch and Invision. The first prototype was a global media upload that allowed users to view and edit photo renditions by clicking an upload button in the primary navigation. The second prototype provided advanced search features for image research. The third prototype was ‘The Reaper,’ a tool that allowed you to preview and override machine-generated image renditions.

Validate

We shared the prototypes with people we met during user interviews that told us they handled photo production. Editors loved the concept of a global media bar because it made it easy to find and use images at any stage of content creation. And, the extreme editors we thought would want control over every image crop decision were comfortable with the “safe zone.”

The Solution

adminDesign Challenge: Photo Renditions