Case study: Made Of Pixels

overview

Made of Pixels was a stock photo search engine for professional art buyers and art directors. With hundreds of photo agency sources and millions of images, the aim was to aggregate and index all the licensable imagery in the world. The project entailed both artist and buyer-facing application interface design.

project duration

Phase 1 began in August 2010, concluding with a Minimum Viable Product in December 2010. As feedback and attention grew, Phase 2 began in earnest in February 2011, moving Made Of Pixels from a desktop product to a tablet-oriented site, requiring an App be developed. Made of Pixels was sold in 2012.

My role

I was responsible for the experience strategy and design of both the website and the iOS app. Working with a small team, I lead the UX work, producing all the deliverables and managing the feedback.

the challenge

MILLIONS OF PICTURES.
SO LITTLE TIME.

The initial UI challenge was to figure out how to minimize the time spent by art directors searching by optimizing their cognitive load while searching. Response time was always top-of-mind, but we needed user feedback to figure out where to streamline. We initially thought that providing search results of strictly licensable images was enough to prove the MVP. And it was. However, the immediate feedback from the first prototype was that some kind of storage and image sharing tool was needed.

the approach

MEET USERS WHERE THEY ARE

We began with in-office interviews with art directors and buyers to see how they worked. Witnessing their daily routine and events was key to determining features and prototypes.

Though we weren’t aware of Lean UX at the time, rapid sketching and iterative feedback with the interview subjects shaped much of the design insight.

the discovery

SEARCH RESULTS ARE NOT ENOUGH

mopdetailringsOur research revealed that users required more than just relevant search results to do their job; they needed certain work management tools, such as a Lightbox and a sharing mechanism for colleagues.

Response-time variability needed to be minimized, as users were skeptical of their images being saved and linked properly.

A surprising part of this discovery process was the affinity for more ergonomic site design, such as darker backgrounds and one-click functionality. Searching and saving hundreds of images was hard on the eyes and arms.

Perhaps the most important insight that came from the on-site/in-office interviews was that a lot of search work was conducted on the tablet. The requirement to build an app became apparent if we were to truly meet the users where they were at.

the vision

A SINGLE RESOURCE TO CONDUCT STOCK PHOTO WORK

Out of the hundreds of stock photo agencies, there were only a handful that art buyers used on a daily basis. That meant that the UX for Made Of Pixels, in terms of response time, had to be at least as good as those giants. Regarding work management tools, our agnostic position allowed us to develop using “minimally viable products” from the best stock photo sites. With the decision to develop an app, we felt that Made Of Pixels could enhance the workflow and decision-making process for licensing images within mid to large agencies.

the requirements

DESIGN FOR FASTER EVALUATION

As we brought all the research together and analyzed them through the Activity Theory lens of Human-Computer Interaction, our goals were realigned to meet not just user needs, but their environmental and workflow constraints.

Response-time variability needed to be minimized, as users were skeptical of their images being saved and linked properly.

ENEMY #1: FATIGUE

It seemed insignificant at first, but the white background of so many stock photo sites affected the productivity of users – we’re effectively staring at a light bulb when we look at our computer monitors. Similarly, reducing the amount of mouse movement would also help. As I witnessed in the interviews, the number of clicks and mouse mileage was appalling considering how long these users were on a project.

REMAPPING THE WORKFLOW

A significant portion of an art-buying project is dedicated to the approval process. With many stakeholders involved, particularly with varying weights of opinions (ex., art director vs. creative director vs. client), faster and more effective evaluation of stock images could be designed into the product.

I PUT THAT SOMEWHERE AROUND HERE

Acknowledging that users were on multiple projects simultaneous, we saw that they really needed a good device to save their searches. Lightboxes are widely used within the photography business, so by leveraging that affordance, we saw them as the pivot-point to maximize the workflow, with the approval process clearly in mind.

the framework

SYNTHESIZING THE WORKFLOW

Part of the journey to truly understanding the art buying workflow required me to map not just the process, but the relationships. Relying on a core interaction principle of enabling the user to easily back out of an action shed light on the back-and-forth nature of the agency approval process.

ME AND MY WHITEBOARD

My preferred method of understanding all the components of a project is to draw it all on a whiteboard for all to see. There is something about working on a larger scale in public that allows me and the team to more fully comprehend and thus ideate what is required to meet our goals.

WIREFRAMING FOR COGNITION

Photography en masse is visually arresting, hence, inherently distracting. So instead of sketching interfaces, I opted to use photographs in my wireframes so that I could get a better sense of user activity and then build a cohesive design.

PROTOTYPING & USABILITY TESTING

I worked closely with our lead developer to bring our designs to life as a working prototype. We used several user tesing services and revisited the recorded tests feverishly to uncover the nuances of user interaction. Discussing constraints and possibilities was an effective way of solving the interaction challenges. We worked collaboratively, tested constantly and iterated progressively.

THE MOCKUPS

To move forward with the design I used Photoshop to create sets of detailed mockups. This approach was beneficial in showing our stakeholders design progress, but was too time consuming to iterate at the pace required.

iteration 1

iteration 2

iteration 3

iteration 4

iteration 5

iteration 5: tablet view

the refinements

REAL USERS. REAL ACTIVITY. REAL FEEDBACK.

Made of Pixels launched to a select group of art buyers and art direction blogs. Within a few days we were seeing traffic rise from a few dozen to a few hundred. While this was thrilling, it also highlighted what were our strengths as well as a few glaring weaknesses.

LANDING PAGES COUNT

The initial homepage was an image-loaded results page of a sample keyword. This proved to be a heavy cognitive load and a misstep. By introducing a landing page with a search box and a value proposition via a tagline, users spent more time on the site and came back more often.

LOTS OF LIGHTBOXES

Our insight as to extending the functionality of the Lightbox proved to be enormously successful. Use of the email and sharing features of the Lightboxes, which saves searched images, promoted greater usage and exposure to Made Of Pixels. This one feature in particular is what got the project noticed by investors.

the results

SOLD

Made Of Pixels was sold to a private company in 2012.

At that time we were experiencing rising traffic of about 1,200 professional art buyers per day, with an average site visit of three hours per session. Made Of Pixels was clearly being embraced by its intended audience.

final thoughts

When I look back on Made Of Pixels, I cringe at how over-designed it was.

I’ll take my lumps on this, as I believe this is part of the maturation and honing of the design craft.

While Made Of Pixels was bought for the innovative use of open-source technologies that allowed for exacting image search, it was the user interface that brought the users back everyday and provided a business case for the acquisition.

I learned that UX design involves a high-level of collaboration not just with colleagues, but also with prospects and intended customers. A core methodology of successful UI design truly requires the designer to maintain face-to-face relationships with every stakeholder. And an intrinsic characteristic of the designer is to respect and consider all the feedback.

THANKS FOR READING