Industry Project

A 24-hour Hackathon with ShutterStock

Image by Annie Spratt

Introduction

For the Industry Project I've had the pleasure of working with a couple of my fellow UX designers at BrainStation as well as some very talented web developers in collaboration with the Marketing Team at ShutterStock to compete in my very first 24 hour hackathon. Although my team did not come in first place, it was still an incredible learning experience and an amazing opportunity.

My role: UX Designer, UI Designer

Project Duration: 24 hours

Tools Used: Figma

The Challenge

Prior to the beginning of the hackathon, we were given a brief introduction to the problem space. The marketing team had explained that at Shutterstock, there are thousands of creators that are delivering work using Shutterstock images, videos, music, 3D, and other tools.

The challenge given to us was the following:

Image by AbsolutVision

"How can your team create an experience that allows these creators to share their work on shutterstock.com as a way to inspire others that visit our site?"

The Team's Goals

Since we only had 24 hours to complete our design solution, my team developed some goals to work towards. 

Myself and my fellow UX Designers had decided to spend the first 12 hours developing the solution to the design before passing it on to the web developers who were paired with us for this project. 

We knew that we wanted to follow two things: to keep visitors engaged as well as to inspire creators on how to better utilize available assets.

Keeping these goals in mind, we decided on our solution.

We wanted to keep our design as a web design where we could give creators a platform to share their finished projects so that visitors looking to create similar projects can gain inspiration from them.

What is Shutterstock?

Unfortunately, a few of my team, including myself, had no idea what Shutterstock was for. We had heard of the name before, but we were not aware of what the purpose of the website seeing that we have not used it prior to this hackathon. So, we did some background research to help us understand the company before proceeding with the design.

Unfortunately, a few of my team, including myself, had no idea what Shutterstock was for. We had heard of the name before, but we were not aware of what the purpose of the website seeing that we have not used it prior to this hackathon. So, we did some background research to help us understand the company before proceeding with the design.

Unfortunately, a few of my team, including myself, had no idea what Shutterstock was for. We had heard of the name before, but we were not aware of what the purpose of the website seeing that we have not used it prior to this hackathon. So, we did some background research to help us understand the company before proceeding with the design.

To summarize, Shutterstock is a leading creative marketplace for high-quality royalty-free photographs, vectors, illustrations, videos, motion graphics, and music to business, marketing agencies, and media organizations.

Our initial impressions of the site itself was that we felt that it needed more storytelling. We also felt that the home page had way too many things going on and lastly, we noticed that the website didn't have an existing page for users to share their projects which became our main focus for our design solution.

Secondary Research

Million

stock photos, vectors, and illustrations

386

386,000

Templates

13,400

Music Tracks

24.2 Million

Stock Photos

3D Models

through

TurboSquid

Image by John Jennings

How might we help designers get inspired by ShutterStock images and graphics so that more people download the images?

Creating a Persona

Because of the time restraint, our team was unable to conduct user interviews and instead went straight into creating a persona based on the research that we found. 

15 PERSONA.png

Creating a Task Flow Diagram

Based on our persona's needs and pain points we created a task flow diagram that would help keep us on the right track when designing our new version of the ShutterStock website.

16 TASK FLOW.png

The Final Prototype

Key Learnings

We found the constant communication between the UX team and the Web Devs is super important to ensure that everything not only goes to plan, but also to understand where each team is at and to discuss what can be done and what cannot be done within such a short time frame.

Proper allocation of work is also vital in accomplishing as much as possible in a 24 hour working period.

Next Steps

We want to add in other features that would increase overall user experience such as a feedback/commenting system as a way for users to interact with the creators.

Continue to user test as we add new features and make revisions based on the feedback received.