135
Breaking down the feedback flow screen-by-screen. Can we do better than emoji comments and likes?

I’m a bit ashamed to say it's been a month since I've posted progress. I'd like to report that I've accomplished much in that time, but alas—no. It's been busy all around: family and friends, work, and other side projects have taken priority in the last few weeks. I'm hosting a lumberjack workout in an abandoned bank next month, and I produced and directed a video shoot for my wife's project last weekend. Now I'm on a family vacation in Colorado, and as soon as I hit publish on this post I want to be present with them in full-on vacation mode.

But first, let's look at what's new. Finally we have something that looks like an app! I've taken the sketches I talked about in the last post, and translated them into digital mocks. At the recommendation of basically everyone on Twitter, I'm using Figma for the first time. I've been using Sketch for interface design since 2012 so this is a big step for me. I wanted a way to share the real design files with you as we go, and Figma makes this dead simple. I've added another page to the project, Design, which will become a home for all design things to live.

There's a lot going on here, so let's break it down one screen at a time. Aesthetics and copy are not final.

feedback-flow
Feedback flow

Start screen

I debated whether to show the photo being reviewed here on the first screen. On one hand, it gets to the point quickly, but on the other, it immediately deflates the tension of revealing the main thing: the photo you're about to review. I also want to set the mood, that this should be fun, interesting, and quick. This is accomplished through the playful tone of the copy and the illustration (illustration is unlicensed and FPO, found on Chris Lochinski's Dribbble).

feedback-start
Start screen. Designed to be informative and set a playful mood.

"Good look" screen

This is where you get to see the photo for the first time. The mocks don't really capture the sense of reveal I want here. This will come in higher-fidelity prototypes with more advanced motion. A five-second countdown forces you to pause before continuing. I like that this gives a sense of import at this step. One thing I noticed in the clickable prototype is that the numbers changing distracts my eye from the photo, so the implementation may need to be tweaked here. This visual distraction is a great example of a potential problem area that can quickly be sussed out in a simple prototype, but wouldn't be obvious in static mockups.

Good look countdown

Quantitative rating screens

I developed this hovering card-based interface in sketching. It feels simple and obvious. There's only one action to take, and it's large and colorful. You can swipe back and forth between steps you've completed and the subtle etch-mark on the top of the card suggests it can swiped down out of the way to focus on the photo.

My first sketches used a slider instead of a set of buttons, but I quickly realized how much simpler the buttons are. They function as both the primary action (rating) and an implicit next action. In the clickable prototype I experimented with how the button should respond to touch. At first the card advanced immediately, but adding that slight delay felt more satisfying. There is a sense of completeness going from unfilled to filled.

The labeling of "Weaker" and "Stronger" can probably be better, and I'm not sure of how well the colors are working. Red may be too aggressive, like the big fat "F" written across your homework. I'll probably play around with something else like a monochromatic gradient from one to five.

The categories themselves (Composition, Story, Color / Tone, Light) come from research and much hand-wringing on the impossible task of how to quantitatively rate a photograph. These four categories cover the most fundamental elements of thinking about a photograph, and serve as an acceptable heuristic.

Quantitative rating interaction

A note on general layout

A challenge in this flow is how to let the photo shine without the interface being visually overwhelming. The screens were designed for iPhone 5/SE, which has the smallest screen that I plan on supporting. A secondary challenge is portrait-oriented photos, which is why I've used a 4:5 portrait photo in the mocks. I'm giving myself the worst possible conditions to design for.

Progress indicator

The progress indicator at the bottom of the screen gives the reviewer a sense of where they are (control) and satisfies an emotional desire for forward movement and completion. Because the quantitative parts are color coded, we can use those colors to fill the dots on the timeline, offering more confirmation and contextual resolution.

"Five words" screen

I don't remember where the inspiration for this came from, but I'm excited for it. There's a freedom in enforcing a five word (or phrase) constraint. It's like Twitter's 140 character limit. It forces you to cut away the cruft and get to the point.

The interface is another card, but we now have the keyboard to contend with. Vertical real estate is at a premium—especially on smaller screens like the one in these mocks—and the keyboard takes a huge bite. Once the first text input gets focus, we can lose the helper text and buy back some pixels. It isn't strictly necessary for the words to build up, but I like that you'll be able to see all the words at once.

Five words interaction

"Sum it up" screen

I'm trying to avoid the dreaded empty white comment box, but it's included here as the final step. In conjunction with everything else it allows reviewers to elaborate. I don't want reviewers to feel like they have to write a novel here, and that's communicated by capping the number of characters at 500. It should probably be even lower.

feedback-comment-default-filled
Commenting allows elaboration

Review screen

The summary screen lets you review everything before sending it off. It's a static screen and I'm just looking for a nice, sensible way to scan the information. It's not visually afforded other than some tiny helper text, but tapping something would shoot you back to that part to edit it. Using a darkened version of the photo as a background feels like nice continuity between the sections. I'll probably work out a fun animated transition to build into this screen.

feedback-summary
Summary screen allows you to review your work

Success screen

Not a whole lot to say here, other than I want some emotional payoff for all that work. Again, the basic clickable prototype isn't really capturing it. One thing that's for sure: I'm not putting in any damn confetti. But I can probably do better than a check mark.

There's a little carrot for the reviewer here: the bit about finding out how others critiqued the photo. The idea is that after the review window closes, the photographer and all reviewers get notified and invited to view all the feedback. This is what I need to design next.

feedback-success
Success screen


So that's where we're at with the feedback flow. As always, I'm super interested in your thoughts. Hit me up on Twitter, or email me. You can play with the clickable prototype here, and the mocks are here.

Share with
twitter-logolinkedin-logo
Want early access to the app?
No
my image
Subscribe for updates on development and be first in line when the app is ready!
Cancel