ShotDeck
Improving an existing UX feature for a cinematic image database, tailored to the filmmaking industry
Project Type - Solo
Timeline - 3 1/2 Weeks
Role(s) - UX Designer, UI Designer, UX Researcher
Tools - Figma, Photoshop, Autodesk Sketchbook
I completed this case study as a conceptual assignment for Designlab’s UX Academy, where my objective was to take an existing website and design a new feature that would enhance it.
As a former animation student I chose ShotDeck.com, which is a cinematic datatbase that collects thousands of animation, movie, television, and other cinematography images for public viewing and reference.
I decided on this website because I rely on visual libraries and references from sources like ShotDeck to create moodboards and inspire my animation and art compositions.
So I wanted to build on the idea of customizing and building moodboards by developing ShotDeck’s “Decks” feature (which, defined in this context, as customizable folders for ShotDeck’s stills) as a way to help creatives like myself visually organize their references.
Update - At the time of this case study, I came up with an expanded Decks feature by myself while using ShotDeck’s Beta trial. Later in 2022 and onwards, the official ShotDeck website released a similar, comprehensive Decks feature, which validates my idea.
Defining Objectives
Establishing the project's scope and focus
_edited.jpg)
ShotDeck.com Beta website, 2021
In ShotDeck's Beta website, the basic elements for Deck creation were already present.
However, as a personal observation, I felt that the original Your Decks section was very basic in presentation and inaccessible for users.
ShotDeck.com Beta website, 2021
For instance, hiding at the bottom of the left-hand side of the screen and underneath the shot filters, is the original “Your Decks” section. This was where users could create folders for saved shots and compositions and delete shots/folders in the trash below.
Browsing ShotDeck, I initially didn’t see Your Decks, until I saw it hidden at the bottom of the screen. I felt that the Beta website could have placed Your Decks clearly for first time and returning users.
I also wanted to share some stills for reference work, however I did not find options to share or collaborate with users outside of the website.
So while I believed that the basic components of Decks were present, the Beta version of Decks had open possibilities for further expansion. And instead of creating a brand new Deck system from scratch, I saw this as an opportunity to emphasize ShotDeck's existing components and make it more visually accessible and customizable for its users.
Concept Testing and Research
Understanding core users and what they expect from Decks
Concept Testing
When I started the ShotDeck project, I initially thought that redesigning the Decks feature would be a great idea for the website. However I wanted to make sure that other ShotDeck users actually needed or wanted this expansion, aka validate users’ need for an extensive Deck builder. So I conducted concept testing by surveying users and evaluating if there was a substantial demand for the product.
To conceptually validate Decks as a desirable feature, I surveyed film creatives about their use of mood boards and other tools identical to Decks to gauge how useful Decks could be in their work.
I chose to conduct a survey in this stage of development because there are many professions and creatives that utilize media and image references in their work, such as directors, cinematographers, story artists, marketing advertisers, and more. And keeping all these professions in mind, I wanted to assess how they could benefit from collecting ShotDeck's references and what would set Decks apart from something like a Photoshop-made mood board or another media reference library.
To summarize, I wanted to understand:
-
WHY would they need Decks?
-
WHAT would they use Decks for?
-
HOW would they use Decks?
-
HOW would Decks stand out from other mood boards or other visual reference libraries?
Survey
I interviewed 3 participants, 2 who are storyboard artists between the ages of 20-30 and 1 filmmaker, aged between 30-40 years old. I compiled common and key words from their responses into a world cloud below:
Based on the survey results, common words and themes that popped up for all 3 participants were:
-
Organization - They wanted a feature to visually organize and catalog any visuals for their work.
-
Sharing: They wanted to share their Decks with clients, bosses, coworkers, and friends for presentations.
-
Inspiration - They saw ShotDeck as a visual tool to boost their creativity and inspire their filmmaking.
Based on these results, I concluded that there is a need for an improved Deck-creation tool. While I noted that some of the participants were unfamiliar with Decks as a term, all the participants unanimously agreed that collecting visual references and sharing with their friends, bosses, and colleauges are crucial steps in their creative work flow.
Survey: Post-Research Correction
Post research, I realized that conducting a survey for this stage of research was not the ideal strategy for gauging the opinions of other ShotDeck users.
Surveys rely on surveying a broader population to find quantitative trends, and while I did gather some useful information from my 3 participants, conducting a survey with them was not the optimal option because the sample size was too small and I needed more in depth information on their user habits.
So if I had more time to revise this project, I would have probably conducted INTERVIEWS instead, to collect more qualitative and detailed experiences from users.
Competitive Analysis
.png)
.png)
Following the survey, I noticed that some of the participants referenced other film reference websites they’ve used in their work, such as Film Grab and Frame Set. So as additional research, I looked into these websites to assess if there were any factors that set them apart from ShotDeck.
Looking at these websites, I noticed that while they have similar basic functions as ShotDeck, such as extensive filters on still and composition types, they all lacked the ability to collect and organize their stills in one place. Unlike ShotDeck, I discovered that while these websites had a lot of great film stills, there was no designated place for users to save and collect images that they would want to revisit on their respective sites.
Overall my discoveries from the research phase solidified that Decks were necessary for users’ creative process and could be improved to become more valuable as a ShotDeck feature.
Designing and Prototyping
Integrating wireframe designs into the prototype
_.png)
After gathering my research, I drew drafts of what I wanted the Decks layout to look like. My goal was to faithfully follow ShotDeck's UI and branding style because I wanted the new feature to add to the website, not change it completely.
I took screenshots of the original Decks page (which were mostly blank at the time of this project) and digitally drew over it. I did this to ensure that the overall look and flow of the deck-builder was cohesive with the website’s existing. I also referred back to the competitor websites (in particular Pinterest and FilmGrab.com) for inspiration on how non-existent components like pop-ups and social media could be integrated.
Afterwards, I separated them based on different sub-components of Deck-creation, such as:
-
Sharing Decks
-
Previewing customized Decks
-
Adding comments to established Decks
-
Viewing Decks in timeline mode
After sketching, I developed a clickable prototype. Because ShotDeck has an existing style guide and UI in place, I decided that it was easier to jump from the sketches straight into the high-fidelity designs.
While ShotDeck's established style guide made it easier to match the prototype to the original designs, it was also a challenge to keep the wireframes and interactions cohesive with the original website.
Usability Testing
Testing the Prototype and revising based on results
After working on the prototype, I conducted usability tests to make sure that the user flows and high-fidelity designs made sense to users. I tested the prototype with 3 participants, 2 who were new to the idea of Decks and one who used decks and mood boards in a professional capacity.
Their results are as follows:
-
The prototype draft had some accessibility issues, especially with the icons and visual aids. Two of the users were unfamiliar with the designs of the icons (ex. what is the grid layout vs. timeline layout).
-
Information hierarchy needed to be clearer, specifically where the Preview page and sharing pop-up screens appears. (On the top of the page or scrolling up to see the pop-up).
Iterations
After receiving my usability testing critiques, I iterated the prototype with the updated suggestions.
Most of the changes addressed accessibility issues highlighted in these testing rounds.
I moved the preview to the top of the screen, so it would pop up for users as soon as they opened or loaded the page.
I added larger side margins to create more negative space and made the information hierarchy more readable.
I minimized the text size for additional readability and responsiveness.
Reflections and Results
Reflecting and planning the next steps
The ShotDeck project challenged me to work with an established website and enhance one of its existing features. I adapted ShotDeck’s existing style to their Decks feature, but I discovered that there were many conceptual possibilities that Decks could take, which allowed me to strategize how to expand on this design.
My next steps for this project would be to redefine the prototype based on the usability testing critiques and add the following options to the design:
1. Sharing - Creating a sharing option so users could collaborate with curated decks via social media platforms like Pinterest and Instagram.
2. Exporting - Expand ShotDeck's exporting option by allowing users to save their decks in jpg, png, or photoshop formats. Artists and designers could download the screenshot timelines and edit them on third-party software or websites.
How did I grow as a UX designer?
As both a UX designer and a target user of ShotDeck, this case study was an interesting insight into designing from both perspectives.
As a story artist, I use reference websites like ShotDeck for my animation and storyboarding work. So without relying too much on my own user bias, I did my best to approach this case study with the knowledge of what ShotDeck's target users would want in the Decks feature.
This project also challenged me to adapt to designing with clear branding guidelines and UI already in place, something that is very crucial as a UX designer.
ShotDeck's official release: How does it compare?
In 2022, ShotDeck ended their Beta trial and launched their official version of the website, which included the updated and improved Decks.
The official Decks now include options to:
Add or Delete Shots to Decks
Share Decks
Archive Decks
Edit Decks from Decks Menu
Export Decks
Rename Decks
Delete Decks
Based on these screenshots, the official ShotDeck designers prioritized users’ need to freely expand their image collections, and made Decks more accessible for sharing and collaboration.
I was very pleased to see these extensive changes on the official website because they further validate my initial proposal and ideas from this case study.
While of course ShotDeck's Decks feature is designed differently from my initial mockups, the main concepts of creating, collecting, sharing, and exporting Decks are both present in my initial designs and the official Decks feature.