Shutterstock uses an agile software development process. We're on two week sprints and use Rally for project management. There are several teams: footage, search, revenue, contributor, and customer. I was the Senior UX Designer on the customer team, which means I am usually working on whatever ends up on the site.

I work closely with the front and back end developers to develop ideas we hash out in backlog meeting and in sprint planning. We rapidly prototype them, test on customers, iterate, and deploy. Often we'll run A/B tests or even larger tests with more variants for things that we're just not 100% sure on.

Search Results Grid

The search results grid is the bread and butter of the company and the most important page on the site.

I had a hunch all the text and buttons were distracting customers from easily scanning the page. We don't do major redesigns in agile, so I tweaked this a bit, removing the text and showing the buttons only on rollover. I also changed the similar images icon to a download icon, which I thought was more relevent.

My theory was that if a customer clicked the down arrow to indicate download, they'd be more likely to complete that transaction; I was prompting them in their mind. That's the most important thing we want customers to do. Download.

Test Results

We ran a multi-cell test and the results were astounding. Turns out I was right! The green line shown in these graphs is the design treatment shown above. We increased revenue and downloads, and now that search results page is the new standard.

Lightboxes

Essentially unchanged for years, I was tasked with creating a new design for Lightboxes that:

1. Did not break our existing customers workflow
2. Was able to be completed in a sprint (two weeks)
3. Iterated toward the direction we wanted to go
4. Kept things fairly simple and straightforward to use

Our current Lightbox page is rather bad. It has both share and send (what's the difference?) and the UI is rather dated. There's no pagination, and a whole host of other issues.

So I set out to not redesign it, but realign it. While I had an initial vision for what I thought would be a great approach, I worked closely with our front end developers which took is in lots of different directions I would have never thought of. We ended up using mostly core CSS to create the new prototypes, thus allowing for a rapid but quality build.

Lightbox actions study

Some added UX Fundamentals

1. I added select all/none which should have been done in the first place. It's a real pain to go through and select each and every image, so select all makes sense here.

2. Controls to share, rename, and delete a Lightbox are shown at top. They are dimmed, however, when an image is selected. Actions for images have their own set of controls. Similarly, those controls are dimmed until you have selected an image (or all of them). This keeps everything in context. We have far better solutions than this, but they will come in later sprints.

3. To switch from Lightbox to Lightbox in production, you use a selector/dropdown of sorts. There is no Lightbox homepage, so when I finally created one, I improved upon the selector so that you can still jump from Lightbox to Lightbox, or goto the Lightbox homepage. You can also search for a Lightbox right in the selector!

Workflow

I had a problem. I was consulting with a company on the side and they needed stock photography. I'd email them a few images, they'd email me back. I'd email them some more, and they'd send me links to other images back. The process was broken.

So I created something called Shutterstock: Workflow so that you could create light boxes and share, comment, and collaborate on the images right in the same place. I like to think of it as a Basecamp for stock photography.

Once you select the images for your client's lightbox, you share it. If you give them approval authority, they can go in an comment and approve or reject images themselves. It's really easy, and saves you a whole bunch of time and headache. Of course you can collaborate in real time as well, say over the phone or in person, but you don't have to - ideal for remote scenarios.

Lightbox Home

Here's all your lightboxes. You can see how many images you have in each one, and whether any activity has occurred. You can also see who you've shared a particular lightbox with. You can turn off this data with the checkboxes if you prefer a cleaner look.

Lightbox List/Grid

Here's the contents of a lightbox, shown in listing view. The comments are on the right, and you can subscribe via email to be notified when there is a new comment. If you have the authority, you can click on the image and set it to rejected or approved. The default state is not sure. For every image there are a host of actions you can perform, such as deleting the image,  sharing it, moving it to another lightbox, etc.

Here's the lightbox shown in grid view.

Sharing

Sharing is a snap. It's a lot like Google Docs. You just enter an email address, select what type of privileges you'd like them to have, and click invite. It's as easy as that. They get an email with a link to the lightbox and can login right away and get started.

 I think the concept turned out great and think it will help people who have to collaborate on selecting stock images for their projects.

Comp Viewer

Another cool idea I had after working on Workflow was to allow customers to place stock images into their mockups or comps to show the image in context. Sometimes just selecting an image isn't enough. You need to see how its going to look on the site.

Here's where you upload your comp. It can be pretty much any size you have.

Here's a comp from the Huffington Post. Once you've uploaded it, you resize the image box to show where the image will be placed. All you do is drag the handles and it even shows you the size right inside the box so you know exactly what you're getting.

And now you're set to browse some 19 million images to find just the one that works for you. When you've found it, you select it and it automatically scales and resizes the image to the box you've drawn. Once you're done, you can output this finished graphic to a JPG or PNG and share with a manager, client, colleague and get feedback.

This is a great tool if you don't know Photoshop all that well or just want to try a few ideas quickly.

Infographics

These were a lot of fun to make and helped convey the numbers behind the design decisions we made about Lightboxes. Getting metrics and info on user behavior on your current products can help guide and shape design direction for new products and features.

Having Fun

Shutterstock sponsored a Hackathon, a 24-hour period where you form teams, design and build products, and then demo them at the conclusion. One of the projects I worked on was geo-location; you could find photos from a certain place in the world, say photos taken in Ames, Iowa, for instance. Shutterstock asked everyone to go into a room and speak, put on a skit, do whatever - for the promo video. I was very honored and flattered when they chose my little skit for the promo video.