Thursday 22 January 2015

Dropbox’s Carousel Design Deconstructed (Part 1)


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 upIt integrates directly with Dropbox’s file storage to save all photos and videos taken on your mobile phone.

  • ViewingA cloud-based media gallery displays all of your photos and videos without taking up local storage on your phone.

  • SharingIt offers many ways for you to share photos and videos with others, primarily by sending links to view them in Carousel.

  • DiscussingA new chat thread is created for every group of people with whom you share a collection of pictures or videos.

02-carousel-opt-500
Carousel screenshots of backup, viewing, sharing & discussing. 

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 sound 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.


03-carousel-core-use-opt-500
Carousel’s core users: Nora and Owen, your everyday consumer. 

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.


04-carousel-opt
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.


05-app-comparison-opt-500
A comparison of photo apps. 

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.


06-demo-video-opt
A demo video of the leading photo application. 

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.


07-instagram-apple-flickr-apps-opt-500
Interface for taking photos in Instagram, Apple Camera, and Flickr Mobile Apps, respectively. 

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.


08-apple-instagram-cameraplus-apps-opt-500
Filters and advanced editing in Apple Photos, Instagram, and Camera+ Mobile Apps, respectively. 

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. 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.


09-googleplus-apple-facebook-apps-opt-500
Settings in Google+, Apple Photos, and Facebook Mobile Apps, respectively.

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.


10-dropbox-carousel-opt-500
Settings in Dropbox and Carousel Mobile Apps, respectively. 

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.


11-apple-photo-app-opt-500
Viewing photos with the Apple Photos Mobile App. 

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. 
13-instagram-app-opt-500
Viewing photos with Instagram’s Mobile App. 

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.


14-picturelife-app-opt-500
Viewing photos with Picturelife’s Mobile App.

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.


15-apple-app-opt-500
Managing Photos with Apple’s Photo Mobile App. 

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.


16-facebook-app-opt-500
Managing Photos with Facebook’s Mobile App. 

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.


17-picturelife-app-opt-500
Managing Photos with Picturelife’s Mobile App. 

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.


18-googleplus-app-opt-500
Sharing photos with the Google+ Mobile App.

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.


19-apple-app-opt-500
Sharing photos with Apple’s Photos Mobile App. 

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.


20-picturelife-app-opt-500
Sharing photos with Picturelife’s Mobile App.

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).


21-apple-app-opt-500
Discussing photos with Apple’s Photos Mobile App. 

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.


22-facebook-app-opt-500
Discussing photos with Facebook’s Mobile App. 

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.


23-instagram-app-opt-500
Discussing photos with Instagram’s Mobile App. 

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.



Dropbox’s Carousel Design Deconstructed (Part 1)

No comments:

Post a Comment