Designing Cinescope v2

Process | Insights

Now that Cinescope v2 has finally be released 🎊 I thought it would be fun to reflect on the design process. If you’re interested in developer-related things check out the companion article in which I dive into my journey rebuilding the app in Swift.

Background

In 2014 I began collaborating with DP Rachel Morrison to build Cinescope. She was looking to create a camera app that would allow her to quickly scout locations and capture imagery using aspect ratios common to the film industry.

Rachel had a strong vision for the app from the beginning. She wanted a streamlined UX with quick-and-easy workflows and pared-back functionality. This minimalist camera app was designed to meet her unique needs as a Director of Photography.

Cinescope v1 — Fullscreen viewfinder, camera roll access, aspect ratio picker, and a capture button
Cinescope v1 — All the options could fit on one screen

Version 1 of Cinescope was successful in meeting its goals but a lot has changed with Apple products in the last five years. iPhone hardware is more powerful than ever and iOS developer tools expose additional nuanced control over the camera. Our users have been asking for Cinescope to support these evolving features and for the past two years Rachel and I have been working in our spare time to redesign and rebuild Cinescope to meet those needs.

Iteration 1: No Pixels Allowed

The biggest design challenge facing the new version of the app was figuring out how to incorporate a more complex feature-set without sacrificing Cinescope’s minimalist nature. We grouped our feature wishlist into three levels of prioritization. Categorizing by priority made it easier to chunk work out into sprints so that measurable and testable progress was always being made.

Must-have features:

  • Manual adjustment of exposure, focus, and white balance
  • High resolution video capture at 60, 30, and 24 frame rates
  • Create and store custom aspect ratios using both on-screen controls and keyboard input

Nice-to-have features:

  • Capture in either compressed or uncompressed image formats
  • Include RAW information when capturing photos
  • Crop media in Camera Roll

Bonus features:

  • Video stabilization
  • Lens-switching
  • UI color themes
  • UI sound effects
  • Debug information
  • Generating matte color options from the color information of the selected media
  • “How-To” Guide

With priorities in order, I focused on interaction design and feature-mapping. I spent this initial time sketching ideas and wireframes in my sketchbook or on my whiteboard…digital devices were intentionally prohibited.

The first pass at figuring out what Cinescope v2 might look like

When I’m focused on generating new ideas, my brain strongly responds to drawing and prototyping in meatspace. I’m able to explore concepts more rapidly using physical media and I also find that my creative output is more varied and of better quality if I start off in this modality.

Note: I don’t have sketchbook images to share because I can be forgetful. Sadly, I left the sketchbook in question on a plane. It was one blank page away from retirement.

Version 2 also provided an opportunity to reconsider the visual design and my initial intention was to simply refine the existing look-and-feel of the app to account for the additional features. But then I started looking at real cameras, and it gave me an idea.

So pretty 😍

I love the machining on the dials of old cameras. And their typefaces are weighty and strong out of necessity. I wondered, could I embody the qualities of a physical camera within the digital interface of a camera app?

Iteration 2: Kill Your Darlings

For the next phase of work I returned to my trusty sketchbook and white board. The basic features and flows of the app were established in round 1 and now it was time to imbue them with a look-and-feel…some personality, some soul. I began to imagine the user interface as a layer of dials that would slide over the viewfinder when needed and then tuck away afterward.

The wireframes reimagined with a dial metaphor

From a design perspective, dials make the leap to the world of pixels fairly naturally and a condensed-bold Helvetica Neue conjures the feel of camera type, but I wanted to avoid the pitfall of veering too far into the land of skeuomorphism. At this point in my process it was finally time move into the digital world and find a way to blend the spirit of old-school cameras with the flat, modern aesthetic of a touchscreen.

The design explorations below show how I tried to minimize physical properties like shadow, specularity, and surface texture and instead used blurs and type treatment to embody these qualities. One intentional concession was the inclusion of a dotted stroke around the dial, which I thought was reminiscent of the analog tick marks on the physical machines without being too on-the-nose.

Dial variations…hmmmmmm

Once I felt comfortable with the design I created a first-pass of the implementation. It’s important to prototype early and often. It’s impossible to get a feel for how the functionality, workflows, and interactions blend together by looking at static screens alone. Prototype to the highest level of fidelity you are able: the more “real” the prototype is the better you will be able to validate your idea against the environment in which it will exist. Since I knew I could code this design almost as fast as I could create a robust click-through prototype, that’s the direction I chose. However, I didn’t want to spend too much time polishing the interactions and animations just yet since I wanted Rachel to vet the idea first.

Here is a gif of what the UI looks like when manually adjusting focus. As you begin dragging your finger across the screen, the camera function button turns into the focal ring and displays lens position.

Manual focus prototype

And here’s a gif of the aspect ratio dial. Tapping the aspect ratio button brings up the dial which allows the user to select their desired aspect. In this case, switching between 2.39 to 1:1.

Aspect dial prototype

I was excited to share this build with Rachel and get her feedback. Unfortunately, that feedback was not positive. She thought that the UX wasn’t as intuitive or fluid as what we had accomplished with the original version of the app. Although I was disappointed and my ego was a little bruised, once I gave myself some time to think things through and disassociate myself from the work, I was in agreement with her.

If this were my personal project I would have taken extra time to refine the experimental UI, but that’s not the situation I was in. Plus, the app has a loyal following and it’s rarely a good idea to pull the rug out from underneath your users by throwing an entirely new interface at them just because you think it’s cool. We are a team of two people creating something in our spare time and on a shoestring budget. We don’t have the runway or resources to fully vet every idea via user testing and refinement, and that has to be taken into consideration when prioritizing features and getting products shipped.

Kill your darlings, darlings. We’ve all got more than one cool idea floating around in our heads, so try not to get overly-attached to any single one of them.

Iteration 3: Simplicity Is Hard

I pulled back from the novel dial design and began a new iteration that would represent an evolution of the existing Cinescope interface, rather than a completely new direction. If the UI was going to be influenced by the aesthetics of camera hardware, it would have to be accomplished within the constraints of the established UX. But the challenge remained: how do we incorporate additional — and more complex — functionality and still keep the interactions fast and straight-forward?

The new, new idea: viewfinder interactions re-defined (“pinch-to-zoom” is missing from the sketch)

Manual Controls

One solution to this challenge was found in using pan-based gestures for making manual camera adjustments. Exposure adjustment in the iOS camera app is accomplished with the same interaction, so it’s a familiar pattern to users. In addition to exposure, Cinescope allows users to also manually adjust focus and white balance. By distinguishing between both pan axis and number of fingers on the screen while panning, Cinescope can leverage four touch-based states to map directly to functionality and avoid cluttering the screen with additional UI elements.

Images from the “How To” guide

Quick Change

Another interaction choice that helps speed-up workflow is the “quick-change” feature. Rather than require the user to drill into a sub-view to change the camera function or current aspect ratio, we allow them to perform a swipe gesture on the buttons to move between previous and next options. In the gif below I’m swiping on the camera function button to move between the photo, video, and slow-motion functions. I added a little directional shake to the icon to indicate previous/next changes.

Swiping the button moves between camera functions

Keyboard Input

The original version of Cinescope allowed users to drag on-screen guides to set a custom aspect ratio, but we had several requests to also support keyboard input. I decided to create a custom control for the numerical input rather than using a standard keyboard. This allowed me to keep the control’s visual style in-line with the rest of the design and also expose a simplified set of interactions that were focused solely on the task at hand: creating an aspect ratio.

Use the keyboard input or drag the indicators to create a custom aspect ratio

Hardware Edge Cases

We had to spend time considering the “UX of messaging” with the new version of Cinescope as well. There are some quirks associated with the iPhone’s hardware that have to be communicated to the user to properly set their expectations. I wanted this experience to be just as fluid and low-friction as the UI controls and workflows. After exploring a few options, I decided to use a combination of progressive disclosure and animation.

Contextual display of information

It’s important to avoid unnecessarily adding to a user’s cognitive load. In this case, only users interested in capturing RAW photos need to consider the limitations imposed by that choice. Cinescope presents that detail in context — when a user explicitly enables the feature. A quick animation calls attention to the new information, and the wording strives to be clear and concise — hopefully 😃.

Parting Thoughts: The Myth of Finished

Even though version 2 has been released, I will never be done designing Cinescope. Between Rachel, and me, and Cinescope’s users, there is a steady stream of cool ideas or new functionality we would like to add. Every time I launch the app to take a photo I notice something that could be tweaked…an animation timing, a color, a word, a margin. I can always design it better. Although it’s nothing more than an ephemeral stream of electrical charges, software is very much like a living thing and the one constant with all living things is that they want to change over time.

Cinescope v2 in camera mode shooting with a 4.0 aspect ratio

In the past, these kinds of things would drive me insane. Part of me feels like a rigid perfectionist while another part of me feels like a talentless hack. Maybe they are two sides of the same coin? Constantly flipping between periods of working non-stop to get something “just so” and periods of procrastination because “everything I do is terrible” is a zero-sum game that leads to burnout and anxiety. But when I finally gave myself permission to accept that I was neither perfect nor talentless, but instead just a regular person, I found that I could balance the coin on its edge rather than vacillate between its extremes. It’s a lot easier to get things done and move on in that state of being.

Shipping software, making art, writing a book, writing this post — any form of creation — is a process with no definitive ending. There is always something more that can be added, or edited, or tweaked. Achieving a state of completeness is not the point. The point is to give your idea to the world because, at its core, I think creation is an act of communicating with others.

Your work wants to be free, so let it go. Observe it in the wild, listen to what your users have to say, and refine it over time.


You can purchase Cinescope here and support my amazing client. If you have any questions or comments you can hit me up here or on the Twitters or email or whatever…I’d love to hear what you think about the app!

Cinescope v2 in video mode

Thanks to Lukáš Petr for his excellent framework that makes it possible to demonstrate touch interactions while recording in-app video.