Sketching a Better App for Photographers
This story was originally posted on Over Instagram. Over Instagram is a real-time log of designing and developing a better app for photographers to get feedback on their work.
“Grande cappuccino for Nick.” The cardboard cup is hot on the tips of my chewed-up fingers. I’ve tried everything to kick the damn habit. Nothing’s worked. The shop is bright and empty and I have my choice of the good seats facing out toward the murky pre-dawn street. I sit down and pull a long frothy drag into my mouth as I watch a few other early-morning zombies shuffle by. I plop down my dotted notebook — the one I bought for this project — and a Micron pen. The caffeine hits. I’m ready to sketch.
Sketching is a jam session with yourself. Or a friendly debate. Sometimes it’s a drunken back-alley brawl.
I’ve still got questions — big ol’ meaty ones that I know I should just push out of the way and get to work. Questions like: what makes a good photograph? I’ve wrestled with it from the start. It’s impossibly nuanced but I need to start somewhere: a foundation to build on. Even an imperfect framework will do. I mean hell, one of the ideas that started this whole damn thing is that photographers deserve some guardrails for giving feedback, versus just tossing them out to stare at a blank white comment box.
I want to sketch the riskiest stuff first, the main feedback flow that I imagine will be the foundation of the app. It’s something that I can prototype and test before the rest of the app is fleshed out. In the post, The Competiton, I identify a space in the market for a photography feedback app that’s both fun and useful. I’m aiming for something in between the binary hyperactivity of Instagram and long-form critique. This is one of the things that will set the app apart so it’s crucial to get it right.
I uncap the pen and will it towards the paper. First I’ll just draw a nice little rectangle to represent the the screen dimensions of an iPho—dammit! My hand is scribbling words! These are NOT tiny rectangles at all! And worse: the words are forming questions! Fucking more questions is the very last thing I need right now.
I come up for air and I’ve written down five things that get at the core of a good photograph. Even though I just barfed them onto the page, I didn’t arrive at them lightly. I’ve done my homework — including reading several books like “The Art of Photography” by Bruce Barnbaum. The last section — the technical one — I can take or leave. It’s a bit tacked-on sitting alongside the others. I nix it for now.
Out on the sidewalk, a short man wearing a filthy bucket hat shuffles by. He moves clumsily with a heavy limp and a fat, soggy cigar hangs from his lips. He’s right on time.
A good review needs to provide enough structure to be useful to the photographer without feeling overly burdensome to the reviewer. No other app seems to get this right. More than anything though, I think a photographer wants to feel that her work was seen. And when I say seen, I don’t mean the way most social networks count it: that the pixels penetrated the user’s visual field for a few milliseconds sandwiched between ads for toothbrushes and suitcases. I’m talking about another person out there in the crazy world considering your photograph for a minute or two. Through that lens, maybe the primary function of a review is a receipt: proof of being seen.
I take the four categories I’m satisfied with and drop them into a flow. It’s not enough to rate a photograph quantitatively. From what I remember from art school, crits allowed me to get unstructured reactions to my work. Matt echoed this experience in our discussion about his time at NYU. A plain old comment box will serve its purpose just fine here. But I have an idea for another interaction too, one that challenges reviewers to think of the first five things that pop into their head.
I like the idea of starting with the quantitative stuff as a warm-up. When I think about any flow, I think about psychological momentum. Getting someone to do a small, easy thing first builds momentum towards the bigger, harder thing you’ll ask them to do later. Sunk cost bias starts to work in your favor. So I draw arrows between composition, color, light and story. At that point the user is primed for the word associations, which allows us to end on a free response comment. That feels right. We probably need a review screen for them to look things over and a success screen for confirmation.
After I get all that down on the page, I take a minute to reflect on the narrative. It feels a bit awkward to drop someone right into the first step of the review — it’s like starting a movie with a cold-open to bullets whizzing by an unknown protagonist. Ok, not quite that dramatic. I tack on a “start” screen at the beginning, and imagine the questions someone might have before starting a review. I also try to imagine what would incentivize someone towards completing the review. It seems important to communicate that reviews are fun, quick, easy, and that you’ll be recognized and rewarded for completing them, possibly through the use of points. Also, the user needs to know that you they don’t have forever to do it, there’s a time pressure. Finally, it could be interesting to show how many others have provided feedback already, providing some social proof.
I’m happy with the flow. It feels like a thing.
I take a sip of lukewarm cappuccino. It’s light out now. A tall blonde woman in skin-tight black athletic leggings bounces past, her intense gaze fixed on the horizon. Her hair is pulled back into a high ponytail and porcelain wireless headphones dangle from her ears. She’s glowing and her taut muscles flex with each step like a race horse.
My hand cooperates this time and I start drawing little rectangles shaped like phone screens. There’s just barely more detail than the previous sketch. I’m getting a basic sense for how things can be laid out on the screen: buttons here, the photo there, stuff like that.
Next, I zoom in on the quantitative rating interaction. My first thought is to use a slider for input. Although sliders on desktop are an abomination, they can feel fun in touch interactions. I imagine the ability to rate the photograph on composition — let’s say — by sliding the knob between weak and strong and then tapping a button to submit the score and move on to the next screen. Interact-able elements go at the bottom, within natural reach of fingers holding a phone. The photograph being considered lives at the top part of the screen, and I note that it should be visible at all times. Portrait-oriented photos will stress this design, and I note this along with a potential solution (the actionable area could slide down out of the way). As an alternative to a slider, I explore discrete buttons numbered one through five. This instantly feels simpler, and I realize has the added benefit of not requiring a separate “next” button. Tapping one of the numbered buttons would just zoom you off to the next screen.
Progress indicators are surprisingly tricky. They’re not necessary for every flow, but when you’re making the user do work like this, it alleviates the tension of not knowing how much is left to do. On the last page I had one sketch with clunky left and right arrows for navigating between the cards, but I don’t love that. This a touch interface and swiping between cards should feel natural and obvious, especially when paired with a progress indicator. Conceptually I don’t like the progress indicator living on the card, and I make a note for myself with a little prohibition sign.
I make a few quick sketches for the word association interaction and commenting. The only real trick here is managing the keyboard, especially on smaller phones where the keyboard occupies a huge chunk of real estate when it’s active.
My back is to the counter but I can feel the buzz of the morning crowd in the queue behind me. I check my calendar for the upcoming day and find a pleasant surprise: no meetings. Cecilia is probably already on her first nap of the morning. I unlock my phone and watch a video of her laughing and I feel that familiar swell of warmth working its way up from my heart to my upturned mouth. It’s a few minutes past nine.
I quickly put down some thoughts on a summary screen and a success screen. The summary screen exists to see an overview of feedback, and to make it easy to jump backwards in the flow if you made a mistake or changed your mind. As I’m sketching it out, I realize the pattern I’ve established of shrinking the photo at the top to accommodate the card might break here, since the review card has more stuff on it than any of the other ones. I sketch an alternative version that breaks the pattern, filling the screen edge-to-edge with the photo and putting the card over the top.
Finally, the last screen has two jobs: communicate success (functional) and to feel fun and congratulatory (emotional). I think about Duolingo, one of my all-time favorite apps. I can’t recall exactly what happens when you finish a lesson but I remember there’s a trumpet noise it feels really good.
I close my notebook, cap the pen and peel my noise-cancelling headphones off my ears. The din of the busy shop swells and I toss what’s left of my cold cappuccino. I push open the door and into the hurried flow of sidewalk commuters making their way to work. There’s an extra bounce in my step.
Postscript: When Not to Sketch
Look — I don’t sketch out everything I design. If I’m designing a login form I’m not going to sketch it out like an asshole and waste everyone’s time including my own. When I’m sketching, it’s mostly a dump of pent-up thoughts. I end up writing a lot of notes as I go: describing how a layout might work, an emotion I want to invoke, or questions for myself that I’m not ready to answer yet.
A lot of real world day-to-day design isn’t particularly novel, nor should it be. If you have any kind of design system in place you shouldn’t need to be doing a lot of sketching — hopefully you’re leveraging the pieces you already have in place, not re-inventing the wheel every time.
Sketching is a fast way to get ideas into the world. But design tools are at a point of maturity that makes sketching less valuable than it has been historically. With modern tools you can go from zero to high-fidelity really fast. The tradition of elaborate low-fidelity prototyping comes from a pre-software world where high-fidelity prototypes were expensive and a romanticized vision for bespoke design craft.
For more stories like this one, check out Over Instagram. I’m designing and building a better app for photographers to get feedback. Sign up for my mailing list to get occasional updates.
