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:
"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
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.
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.
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.