Creating a game-changing film stock comparison tool
Film photography is alive and well. There are over 180 currently produced film stocks (not including expired and discontinued ones) and they’re all different. How does someone learn what those differences are and which ones they want to use? A valuable resource is side-by-side film stock comparisons, but the ones that exist online are scattered over different websites, resulting in a time-consuming and inefficient experience. I created a product that would consolidate these comparisons into a library of content that was searchable, filterable and flexible in the way it was displayed.
My Role
UX Researcher
UX/UI Designer
Tools
Figma
Keynote
Notion
Methods
Wireframes
Functional Prototypes
Usability Tests
Secondary Research
So many choices, so little time
There are nearly endless amounts of different film stocks to choose from. The images that they produce can look extremely similar to each other or drastically different.
Photo by Derrick Story: https://flic.kr/p/F8Z4EV
But how do we know that photographers are interested in educating themselves on these differences? For starters, the amount of people uploading content on this topic is staggering. There are blog posts, articles, Youtube videos, and forum discussions all dedicated to this topic.
A Google search for “film stock comparison” yields
80 million results
I also asked the target audience first-hand if they have sought out information on film stock comparisons in the past. 5 out of 5 film photographers interviewed said they have looked for film comparisons in the past and would be interested in a product that makes the research process easier.
“That would be rad!”
The Wild West
If there’s already a ton of content online as well as enthusiasts looking to consume it, what’s the problem? When looking through the comparisons that exist online, 4 distinct drawbacks with the experience become evident.
Disjointed: All the comparisons are spread out over different websites, forcing the user to have to navigate to each one individually.
Noise: When they get to a comparison, there’s often a lot of information that isn’t relevant they have to sift through to find what they’re looking for.
Un-targeted: If the user wants to find comparisons that have certain attributes like a specific camera or light environment, they’re left to the mercy of their search engine to show them good results.
Low Functionality: Some users have enough experience to benefit from seeing the close-up details of images, but the majority of websites have poor solutions for this, making the user download full-sized images or open them in a new tab.
Is it just me?
I knew there was a huge amount of interest in this topic and I could see that there was room for improvement with the current experience. But did other film photographers have a similar desire for a solution? I showed some feature concept sketches to my target audience to find out.
Feature Concept Sketches
Collection Page
This page would showcase an entire comparison study a contributor had conducted and was formatted very similarly to the way articles were already written online.
A/B Compare Page
This page would let you select 2 to 3 different film stocks and see all the results from the site for those selections as well as being able to sort and filter by many different tags and categories.
Product Page
This page shows info about specific film stocks and an image wall of examples of that film.
Yes, but not like that
I originally assumed the Collections page would be the main content people would want to see as it was most similar to how content appeared already, but I found that repeatedly, users found the A/B Compare page to be the most useful. After getting this feedback, I realized why: it was the only view that fixed nearly all of the problems I had initially set out to address with the current experience. It consolidated all these comparisons into one place, so the experience was cohesive. Because they could select exactly the things they were looking for and see only those results, the searching process was efficient. And with the inclusion of sorting and filtering options, users could target specific details about the comparisons they wanted to see.
To address the issue of close-up functionality, I sketched a feature for a lightbox that could be accessible anywhere on the site and would allow users to select a few images, open them in an isolated view side by side, and use an inspect tool to hover over a zoomed-in window that would be be repeated over the different images. This made it easy for users to have this same kind of side by side experience for whole images as well as close-up views.
Lightbox with Inspect Tool
Adopting the vocabulary of the users
The language I was using was also something I was able to improve through usability testing. I had been using the terms Collections for full comparison studies, Image Sets for specific side-by-sides within those Collections, and A/B Compare for that main Comparison view. These words felt lacking to me but I wasn’t sure what else to use. While listening closely, I noticed that the people I interviewed naturally used words that fit their mental model. I heard the word Project used to describe a comparison study. The word Scene was used in reference to specific side-by-side comparisons. A/B Compare was changed to just Compare as it was too technical for some.
Houston, we have a problem
I felt that I had landed on what this service’s unique value offering was. But embedded within it, I detected a challenge. For it to work, users would have to manually enter data about the comparisons they were uploading. Not only that, but the more info people contributed, the better the experience would be.
“Keep it short”
In Nielsen Norman Group’s recommendations for online forms, brevity is the first one mentioned. So how could I take an analog medium like film and standardize an upload process for it while also incentivizing users to input more data rather than less?
Keep it simple
I sketched some ideas for how the upload process could look, but quickly found that they were extremely unusable. Users weren’t able to take in all the information on the page and also found the language to be confusing and foreign to their experience.
I went back to the drawing board and created a flow that only asked one question per screen and worded requests for info in plain language that matched what users were used to.
Revised Upload Flow
Putting designs to the test
I created high-fidelity interactive prototypes and conducted usability tests to see if my design decisions held up in practice.
Compare Page
For the Compare page, I found that users understood and liked how it was laid out but wanted some brief info listed in each comparison card such as who had uploaded it as well as a way to navigate to the source Project.
Project Page
For the Project page, users were confused by the lightbox selection buttons. The lightbox feature would likely be something that would be influenced by what is possible to develop in a webpage, but a solution for this could be to remove the button for selecting images with simply being able to select things directly on the page indicated by a hover state followed by a contextually-appearing “open in lightbox” button.
Upload Form - Part 1
The first part of the uploader would focus on only the information that the target users felt was absolutely necessary to be able to search and filter by. Only one question would be asked per screen and whenever possible, combining multiple pieces of information that could be derived from a single answer. For example, by asking for the model of the camera, the film size format, lens mount type and brand of camera could be inferred without having to request it.
Upload Form - Part 2
The second part would be a gamified list of information categories where each category completed would reward them with points that could be spent on profile badges, cosmetics and advanced features and would remind them that their contributions make Chromaray better for everyone.
What’s next?
Closed List vs Hashtags
I’d like to look into how the data could be managed. Trying to make a list of every film stock ever would be impossible and would end in a restrictive experience. On the other hand, letting users enter whatever they want in a hashtag-style way would be chaotic and defeat the purpose of the service. So likely there would need to be some combination of the two.
Usability Testing
Since the upload process is so critical in the potential success of Chromaray, I want to do more usability testing on it as it’s still a work in progress.
Next Case Study: SnackThat
Discovering personalization as a food delivery market gap