Carousel

When you boot up the app for the first time, one of the smoothest onboarding flows I’ve seen in an app kicks into gear.

Smoothness and aesthetics aside, I can’t help but to bring up the fact that the video below shows the app auto-scrolling if I don’t touch the screen within a few seconds. This tells me that, for whatever reason, people weren’t interacting with the indicative scroll gesture on the splash screen, so Dropbox had to nudge people along.

I’d love to know more behind that decision to auto-scroll users to the sign-in step, but for now it tells me that somewhere in the testing process the team found that people weren’t making it past the splash view.

If you are the person who engages with the onscreen prompt to scroll, you’ll see a beautifully choreographed animation as the photos on screen fall elegantly into alignment on your phone. I love that it’s not a timed animation, but rather that it corresponds precisely with your scroll speed.

Carousel is a Dropbox product, so they already know I have an account and am logged in on the main application. So here I get a beautifully-simple sign-in flow that forgoes having to look up my password or go through a 2-step auth flow.

This view, I imagine, was a tough one to design. Here we have an app that, by its very nature, needs access to your photos. But they don’t just come right out and flag you with the iOS permissions notification. Instead, you have to opt-in with a clear text label and checkbox. If you try to sign-in without granting access to your photos, a subtle shake guides user’s eyes to the right place.

Truthfully, I’m wondering how many people drop off from Carousel at this point. As an avid technology consumer and eager experimenter, of course I’m going to give Dropbox access to my photos. For someone that might not be as familiar with the product, parent company or even the concept of organizing your photos in the cloud, it might feel slightly more intrusive and daunting to grant this access.

For those brave enough to continue, there are wonderful things in store.

This video is just showing how Dropbox primes users for the iOS permissions notification. As soon as you tick the checkbox, the real permissions have to be granted. This priming pattern is becoming commonplace among well-designed iOS apps; the priming of permission requests helps users to understand why and how their data will be used. Asking for permissions at the right time is key.

Oh, here’s the traditional walkthrough I was missing before. It’s interesting to see Dropbox explain the details and value of Carousel after signing in. Sure, it reduces the cognitive load of a new user booting the app up for the first time, but somehow this walkthrough explains things in a way that would convince me even more to use Carousel in the first place.

“Carousel keeps your photos safe…”

That’s so key, at least for me. It’s not just about creating a nice looking gallery of your photos and organizing them into albums. I can do that in Photos.app. I can do that on my Mac. What I want to know is that my photos will be taken care of, that they’ll always be there for me no matter what happens to my hardware.

Okay, we’re in. But Carousel isn’t quite done showing users the ropes. Once your photos buffer in, the app kicks off a fairly explicit and intrusive “tutorial” about some of the different elements of the app. The first one tells me that my photos are organized – here I can see them filtered by date and location.

There are different opinions about whether these “tooltip-style” tours provide a good user experience. On one-hand, I can see it being helpful for someone less savvy on an iPhone. On the other hand, seeing that organization by date and location is just obvious – or, at least it’s obvious enough that I’m questioning such a prominent callout in the new-user experience.

There are two more tutorial steps in the flow. The first shows me how to select and share sets of photos. Fair enough.

The second shows me a time wheel, and how to access it. Interestingly enough, I have an old video from when Carousel first came out and this timewheel was along the bottom of the screen. Iterations, ftw.

I’m a little camera-shy, so here’s my kitchen. But it’s a nice touch to have a preview of the crop for your image at the same time you’re taking the photo. On a high level, I’m confused why I need a profile picture for Carousel – does this tie over to Dropbox? Does this show up anywhere? Can other people see it?

I figure it’s basically just so that people you share photos with can see your photo. Maybe adding that explanation could make this process more inviting. After all, this is the dominant UI element on the “more” tab of Carousel.

This is my favorite part of Carousel. It’s just smart psychology and activation design, but it’s also (almost comically) friendly and inviting. Who wouldn’t want to make that lil’ cupcake happy?

At a high level, including onboarding “task-lists” is still a rare experience in app design. I’d say Dropbox is most famous for their web implementation of this flow, where they offer users extra storage for completing certain tasks or sharing Dropbox with friends. Here, they cleverly mix in two super-easy tasks (view a photo…right) with a viral component: share your photos with friends.

That’s how they getcha. That’s smart design.

The time wheel is a really nice feature here. In most photo apps it can be a massive pain to scroll back through thousands of photos. I’ve been snapping smartphone pictures for 8 years now, so giving a quick way to access years and months makes so much sense.

Apple has done this by letting you zoom out in the “moments” view of the stock Photos app. Dropbox instead took a more linear, visually engaging way of helping users go back in time. Sometimes the timeline here is harder to pinpoint, but for the most part it’s fairly obvious and fits into my mental model of how my photos relate to each other chronologically.

This video is a bit confusing, sorry – what you’re seeing here are screenshots of Carousel in my camera roll being show inside Carousel. Those screenshots will be further down in this post, so just ignore them for now.

Anyways, check this out: If you scroll past the bottom of the timeline (Today), a wonderful little design details fades into view: “Take me somewhere…” Keep pulling and you’ll be taken back in time to a random moment. I tried this a few times and Carousel will sometimes spring you back to a specific place. There’s not much practical use here, except to perhaps encourage exploring and reliving past moments and memories.

It’s a powerful thing to yank on those emotional strings.

This is another video I managed to save from when Carousel first came out. Originally you could swipe photos into boxes along the top and bottom of the screen to hide or share. It was a really fun experience, although not too practical. Carousel has since toned the sharing experience down to be more straightforward and obvious, but I still thought it was cool to see this evolution.

These next few screenshots didn’t warrant videos, but the illustrations here are worth sharing. For me, the illustrations make the app work.

Dropbox has assembled one of the best illustration teams in the world, and their work breathes life into what might otherwise be a bland application.

Notice how the bottom photo has the woman hiding her face while I’m looking at the hidden photos view. Brilliant.

Carousel is a gorgeous iPhone app. They get a lot of interaction design right and the product is so simple and clear. I wondered if their web application would offer that same ease-of-use and clarity; I was pleasantly surprised.

Here’s the header image on their homepage. I’m constantly amazed at how such simple illustrations can create such an emotional experience. The photos tell a story, they’re relatable, they evoke real-world memories; a perfect example of emotional design.

Once you get inside the web app, a brief walkthrough pops into view. Dropbox’s clean modals take center stage and help guide users into the app while, naturally, pushing folks to activate on their mobile apps as well.

This sequence of photos captures the flow of sharing a photo on the web app. The animations and interaction design here is worth visiting the website to see in-person.

Two more little details I loved: on the left, you can see a slick recreation of the timeline scrub. Jumping back in time is incredibly easy, and bold tooltips help guide you to a specific date. Putting this tech into the browser must have been a lot of work, but the continuity of experiences makes the application feel complete.

On the right, we’re greeted once again by our friendly cupcake encouraging you to share photos with friends.