Dropbox’s Carousel Design Deconstructed (Part 1)

Home > Others > Dropbox’s Carousel Design Deconstructed (Part 1)

Dropbox’s Carousel Design Deconstructed (Part 1)

August 26th, 2014 admin Leave a comment Go to comments

Carousel screenshots of backup, viewing, sharing & discussing.

Many of today’s hottest technology companies, both large and small, are increasingly using the concept of the minimum viable product (MVP) as way to iteratively learn about their customers and develop their product ideas.

By focusing on an integral set of core functionality and corresponding features for product development, these companies can efficiently launch and build on new products. While the concepts are relatively easy to grasp, the many trade-offs considered and decisions made in execution are seldom easy and are often highly debated.

This two-part series, looks into the product design process of Dropbox’s Carousel and the product team at UXPin shares our way of thinking about product design, whether you’re in a meeting, whiteboarding, sketching, writing down requirements, or wireframing and prototyping.

Part 1 is about the core user, their needs and Dropbox’s business needs, and it breaks down existing photo and video apps. Part 2 will cover Carousel’s primary requirements, the end product, its performance and key learnings since the launch.

The Carousel MVP

It’s been reported¹, that Dropbox wants Carousel, its new mobile photo and video gallery app, to be “the go-to place for people to store and access their digital photos [and videos],” to be the “one place for all your memories.” In effect, Carousel allows you to access all of your photos and videos stored in a Dropbox account on any device, unifying them in a single interface that automatically sorts files by time and location.

More specifically, the app launched with several key features:

Backing up
It integrates directly with Dropbox’s file storage to save all photos and videos taken on your mobile phone.
Viewing
A cloud-based media gallery displays all of your photos and videos without taking up local storage on your phone.
Sharing
It offers many ways for you to share photos and videos with others, primarily by sending links to view them in Carousel.
Discussing
A new chat thread is created for every group of people with whom you share a collection of pictures or videos.

Carousel screenshots of backup, viewing, sharing & discussing. (View large version³)

Since launching, Carousel has received polarizing reviews. Amidst this uproar of praise and feature requests, we’ll go over how any product or design team could arrive at the same initial release — a critical exercise, especially in a market as crowded as the one for photo apps. First, we’ll summarize what Carousel is, then break down part of the design process for this MVP, and then compare the UI and UX to existing design patterns such as Apple’s Photos, Instagram, Google+, Camera+, Flickr, Facebook, Picturelife and Dropbox Photos itself.

You can be sure that the product team’s meetings sounded a little like this:

“Photos are hot.”

“People store a lot of photos on Dropbox.”

“So, let’s build a mobile gallery.”

“Want to copy Apple’s Photos but integrate it with Dropbox?”

“Sure, but we also need to copy Facebook Messenger because we’re social, too.”

“OK, draw some sketches, make some wireframes, create the final mockups and build a high-fidelity prototype.”

“Ready to ship to 275 million users?”

“Launch!”

Now that we have an idea of what Carousel is, let’s consider how the team might have gone about designing the app.

Core Users

Carousel clearly targets consumers, both young and old, rather than professionals or enterprises. No question about that. This is clear from the interface and the visual design choices⁴, marked by a youthful montage of two personas, Nora and Owen (yes, they have names), who we see growing up.

⁵

Carousel’s core users: Nora and Owen, your everyday consumer. (View large version⁶)

Users needs

A lot of decisions need to be made here because the market already has literally hundreds of apps for taking and managing photos. A few of the main use cases for these photo apps are:

taking photos (i.e. with the camera);
editing photos (with filters or advanced editing);
backing up and syncing across devices;
viewing;
managing (tagging, arranging, moving, deleting or hiding);
sharing (privately or publicly);
discussing (privately or publicly).

Clearly, a lot of user needs could be met by the first version of the product. But where to start? Francine Lee, now a UX researcher at Dropbox, took an initial stab at answering this question with a guerilla usability test⁷ on Dropbox’s existing solution, Dropbox photos. I’m going to take her work a few steps further.

Business Goals

In general, Dropbox cares about the growth and monetization of its core business. This is what most companies, hot or not, care about.

Specifically, the company wants to continue growing its overall user base (whether those users come from the main Dropbox app or from Carousel), driving new users to its main service of backing up and syncing files, upselling them on larger plans, and keeping everyone as engaged and happy as possible.

Carousel was built to help Dropbox grow.

So, how does this overlap with users’ needs and, ultimately, with the solution that needs to be designed and built?

Existing Design Patterns And Their Gaps

Let’s look at relevant products and design patterns that satisfy both user and business needs, as well as identify any gaps that Carousel might fill. If you’re interested in learning more, check out UXPin’s ebook Mobile UI Design Patterns⁸.

We’ll review a few existing mobile photo galleries and other design patterns to understand why Dropbox’s Carousel looks so similar to Apple’s native Photos app as well as Instagram’s direct-messaging feature, which, not coincidentally, is similar to Facebook’s Messenger app. Beyond the fact that Apple has made it nearly impossible⁹ for third-party developers to build a better app, we believe that Dropbox has taken this path for many reasons. And we have much inspiration to take from Instagram.

Because Carousel targets the average consumer, we’ll also look at media-gallery applications that target this user base with a strong mobile presence — after all, eyeballs and engagement are going in the direction of mobile. As such, we didn’t look as much into desktop and web-first apps such as iPhoto, Picasa and Unbound or into power-user applications.

Instead, we’ll focus on Apple’s Photos, Instagram, Google+, Camera+, Flickr, Facebook, Picturelife and Dropbox Photos itself. In “The Best Photo Apps for Keeping Your Memories in the Cloud¹⁰,” The Verge analyzes existing solutions in depth and validates our focus on these types of products in evaluating Carousel’s MVP.

A comparison of photo apps. (Image credit: The Verge¹²) (View large version¹³)

Given that Loom, a popular photo and video gallery app, was acquired by Dropbox¹⁴ within a week after Carousel launched and then decommissioned a month later in May 2014, we did not include it in this discussion. Everpix also recently went out of business¹⁵, so we cannot mention much about it either. To give you an idea of how competitive this space is, Everpix was giving away a free two-year trial just for downloading the desktop app, uploading some photos and linking it to a smartphone.

A demo video of the leading photo application. (Image credit: Loom.com¹⁶)

Taking Photos

Below are screenshots of Instagram, Apple’s Camera and Flickr.

They all provide roughly the same functionality (including filters), and all allow users to save copies of photos to their phone’s camera roll, which Dropbox already seamlessly backs up and syncs to the cloud when users opt in. Users don’t need any more options for taking photos, so building this into Carousel’s initial functionality wouldn’t make sense for Dropbox.

Interface for taking photos in Instagram, Apple Camera, and Flickr Mobile Apps, respectively. (View large version¹⁸)

Not only does a camera not belong in Dropbox’s core user experience today, but it wouldn’t complement the myriad of other digital cameras out there. By not building camera functionality into Carousel, Dropbox both minimizes development risks and plays nice with the majority of the market for capturing photos and videos, both apps and hardware alike. It just wants the picture once you’ve taken it.

Editing: Filters and Advanced Editing

Below are screenshots of Apple’s Photos, Instagram and Camera+.

As you can see, you’ll also have to consider a myriad of photo- and video-editing options. Enough reasonable solutions seem to be on the market. Again, most of these products allow users to save original and edited copies to their phone’s camera roll, which Dropbox already seamlessly backs up and syncs to the cloud when users opt in.

Filters and advanced editing in Apple Photos, Instagram, and Camera+ Mobile Apps, respectively. (View large version²⁰)

Because capturing and editing photos are usually a part of the same workflow, Dropbox has the same reason for not providing this in the initial version of Carousel: It just wants the picture once you’ve taken it. In addition to this reason, users also theoretically cannot edit photos until they store them on Dropbox. Because one of Dropbox’s primary objectives with Carousel is to increase the number of photos that new and existing users store on Dropbox, what users do thereafter is less important and is potentially a distraction from saving all of their photos and moving on.

Backing Up and Syncing

Below are screenshots of Google+, Apple’s Photos, Facebook, Dropbox and Carousel.

Unfortunately, most camera and photo-editing apps still require users to save photos to the camera roll before backing up and syncing. This multi-step process of safely backing up photos and videos and then clearing the camera roll to save space is not only time-consuming when done at the last minute, but also stressful because there is always the worry that something hasn’t synced properly. Beyond the potential for improvement in tying together the processes of capturing and backing up media, current cloud solutions have some additional design problems.

On iOS, separating the option to back up the camera roll from the option to upload new photos to the photo stream across all devices could be confusing. In fact, I still barely understand the difference. Google+ also confuses this experience because users might presume they can edit these settings in Google Drive, which they can’t. Google essentially forces users to share images on its publicly skewed social media website, Google+, with no clarity on the privacy settings for this content. While Google+ does offer auto-enhance and “Auto Awesome” — whatever that means — users might go over their data limits or their phone’s battery might die from uploading so many videos or photos over cellular data.

Facebook, on the other hand, has learned its lesson here and clearly makes media syncing private until the user does something. It also provides some granularity in the settings so that users can sync in the background with peace of mind. And users have a clear option to use Facebook for cloud storage, like Dropbox — obviously, Dropbox is interested in enabling this by default because this is its core business and product value, unlike Facebook.

Settings in Google+, Apple Photos, and Facebook Mobile Apps, respectively. (View large version²²)

Dropbox takes care of these use cases elegantly and, as we’ll see, has completely migrated these settings for photos over to Carousel so that users can get to the right place even if they try to edit these settings in Dropbox’s main app.

Settings in Dropbox and Carousel Mobile Apps, respectively. (View large version²⁴)

Viewing

Below are screenshots of Apple’s Photos, Facebook, Instagram and Picturelife.

At a basic level, these apps all present photos and videos according to the time and location in which they were shot (sometimes even the building) and in groups and in enlarged individual views. However, this can get confusing when users toggle between views, especially in Apple’s Photos, which has albums, collections and moments, with little or no visual cue of how they relate to each other or what they even mean in the first place — I, for one, still have no idea. This becomes increasingly problematic when users delete photos from their camera roll periodically to save storage space, because there isn’t an easy way to view backed-up media in iCloud.

Viewing photos with the Apple Photos Mobile App. (View large version²⁶)

Facebook is a much simpler solution but, like many cloud-based galleries, has issues with loading speed when the user scrolls quickly because it’s not a native app. Also, accessing these photos is not as simple as it should be — photos are still a secondary experience. On other other hand, Instagram is a photo-first app, but the viewing functionality is limited and extremely cluttered by supporting data (likes, comments, timestamps, etc.).

12-facebook-app-opt-500 — Viewing photos with Facebook’s Mobile App. (View large version²⁸)

Viewing photos with Instagram's Mobile App — Viewing photos with Instagram’s Mobile App. (View large version³⁰)

Compared to the alternatives, Picturelife stands apart with its sheer breadth of options for viewing the media not only in your phone’s camera roll but in 10 popular galleries and social networks, including Dropbox, Facebook, Flickr, Foursquare, Google+, Instagram, Shutterfly, Smugmug, Tumblr and Twitter. Switch easily between timeline, places, faces, memories, favorites, screenshots and albums. Within each album, sort by album name, date taken, date modified, date created or number of pictures. Most importantly, users can use free-form search to find what they’re looking for.

The primary drawback to so many options is that getting lost in the myriad of photos you’ve taken is easy. Moreover, by syncing so many galleries and networks, many of which have reposted images, users will likely see many duplicates. Nevertheless, this product probably enables you to find any image more quickly than any other solution to date.

Viewing photos with Picturelife's Mobile App — Viewing photos with Picturelife’s Mobile App. (View large version³²)

Managing

Below are screenshots of Apple’s Photos, Facebook and Picturelife.

This is where many media galleries and camera apps diverge. Management workflows (tagging, arranging, moving, deleting, hiding) are incredibly diverse, and each app seems to prioritize its own variation. At a basic level, most apps enable users to move media between folders, to use a preset viewing filter to stay organized automatically and to delete photos. These actions can typically be done at the level of picture, selected group or album. However, apps vary widely in how they enable users to hide media, duplicate media, save copies and originals, export to other applications, comment, change meta data, unduplicate, and even link media galleries and social networks.

Apple’s Photos, for instance, enables users to easily select one or more media files and move them between albums or delete them. Likewise, entire albums may be deleted. And a subset of Apple’s photo stream can sync locally, and third-party apps may store copies in Photos as well. However, you can’t manage these accounts from Photos directly. Any other advanced functionality for managing media doesn’t exist. It’s pretty basic.

Managing Photos with Apple's Photo Mobile App — Managing Photos with Apple’s Photo Mobile App. (View large version³⁴)

Facebook provides similar functionality. However, slightly more can be done on a mobile phone, including tagging people, liking media files, and viewing all cloud-stored album-organized media that include tags of the user or that are synced from a phone. While the experience of viewing all synced media in the mobile app is sluggish, the user at least isn’t limited to the local storage on their mobile device. In any case, Facebook is still a limited solution.

Managing Photos with Facebook's Mobile App — Managing Photos with Facebook’s Mobile App. (View large version³⁶)

Picturelife, by contrast, seems to have it all. Users can either touch and hold an image to see resizing options via drag-and-drop gestures or use a standard vertical menu to favorite photos, add them to albums, hide, delete, comment and more. The flexibility of the viewing options makes managing photos and videos effortless. However, a big drawback is that users can’t select multiple images to add them to a new album or to move them.

Managing Photos with Picturelife's Mobile App — Managing Photos with Picturelife’s Mobile App. (View large version³⁸)

Sharing (Private and Public)

Below are screenshots of Google+, Apple’s Photos and Picturelife.

Sharing a single piece or a group of media publicly is baked into every photo and video application we looked at. Whether they share directly from their photo gallery of choice or save to their camera roll in order to share later on another platform, users have options. That being said, how users add, remove and view media before sharing, how they engage with it once shared, where exactly they may share and how they add and remove people to share with vary widely. More importantly, in recent years certain applications give users the option to share media privately with a select audience — a common activity in chat and email clients.

Google+ is designed rather well to let users switch seamlessly between sharing a single photo, a selection of photos or an entire album, whether through Google+ itself or by saving directly to the phone’s camera roll. However, users will be sharing photos on Google’s network with “public” recipients as the default. If they want to send to individual recipients, they get a very limited subset of contacts to scroll through — and only within Google’s network — or a search box or preorganized list of contacts, which likely isn’t updated or properly maintained, especially compared to Facebook’s smart lists. Facebook is similar to Google in that it primarily lets you share media publicly with varying degrees of privacy. While Facebook Messenger’s integration of the camera roll into the private chatting experience is nice, users have no real way to send photos from a Facebook album directly to a private audience in chat.

Sharing photos with the Google+ Mobile App. (View large version⁴⁰)

Apple offers far greater flexibility with sharing on almost any social network, as well as through SMS and email. However, users get little assistance with selecting recipients and no additional organization of this sharing history, especially if they’ve ever shared across more than one channel. Users are also generally forced to share media publicly on social websites but can share privately through more traditionally private channels such as SMS and email.

Sharing photos with Apple's Photos Mobile App — Sharing photos with Apple’s Photos Mobile App. (View large version⁴²)

Picturelife, on the other hand, provides clear flexibility in sending media to a person or group through the phone’s address book or posting to one or more popular social networks. Each option is emphasized equally, so the user can decide how they want to share their photos and videos. Oddly enough for a mobile solution, the way of selecting contacts is extremely sluggish and seems to only offer email options and no SMS option.

Sharing photos with Picturelife's Mobile App — Sharing photos with Picturelife’s Mobile App. (View large version⁴⁴)

Discussing (Private and Public)

Below are screenshots of Apple’s Photos, Facebook and Instagram.

While all of the limitations on posting publicly are due to the sharing limitations mentioned above, the designs to support private discussion are rather distinct from the designs for public discussion and seem to vary widely based on the product’s priorities.

For example, on iOS, users can share multiple photos at once and include anyone in their address book (which is usually anyone with an email address or phone number), but they can’t add more people to the conversation on the fly or reply to a subset of recipients in a separate conversation or view their full media history in a consolidated display (because photos and videos are kept separate).

Discussing photos with Apple Photos Mobile App — Discussing photos with Apple’s Photos Mobile App. (View large version⁴⁶)

Meanwhile, Facebook allows users to add new recipients, effectively creating a new chat. Additionally, Facebook more clearly displays the various ways users can communicate with recipients, not just by text, photo and video, but with audio and emojis; and the option to choose an existing photo or video or create a new one is obvious at a glance. However, users can only chat with people they’re connected with on Facebook, not anyone in their address book.

Discussing photos with Facebook's Mobile App — Discussing photos with Facebook’s Mobile App. (View large version⁴⁸)

Instagram, on the other hand, makes it very easy to switch between private and public discussions. When users post to their followers to have a public discussion, they can also post to popular websites such as Facebook, Twitter, Tumblr and Flickr to continue the conversation there. Alternatively, they can send a direct message to anyone they’re connected with on Instagram. Again, they’re limited to the social network itself, but this is a dramatic improvement over many of the social alternatives.

Discussing photos with Instagram's Mobile App — Discussing photos with Instagram’s Mobile App. (View large version⁵⁰)

Time To Focus And Design Carousel

Now that we thoroughly understand Carousel’s core users, their general needs, Dropbox’s business needs and what exists on the market, it’s time to get something done.

In part 2 of this series, we’ll detail the product’s primary requirements, summarize Carousel’s state at launch and its performance in the market, and highlight key learnings since the launch. Hopefully, this will help you to design your own MVP, however you like to do that — with whiteboards, sketches, Balsamiq, Photoshop, UXPin or something else.

(al, ml, il)

Footnotes

The post Dropbox’s Carousel Design Deconstructed (Part 1) appeared first on Smashing Magazine.

Webmasters Gallery

Dropbox’s Carousel Design Deconstructed (Part 1)

The Carousel MVP

Core Users

Users needs

Business Goals

Existing Design Patterns And Their Gaps

Taking Photos

Editing: Filters and Advanced Editing

Backing Up and Syncing

Viewing

Managing

Sharing (Private and Public)

Discussing (Private and Public)

Time To Focus And Design Carousel

Footnotes

Categories

Blogroll

Archives

Meta