Image for post
Image for post

Designing Moments

We set out to help people gather the photos they take with friends. A strong collaboration among our multidisciplinary team got us there.

Laura Javier
Jun 15, 2015 · 8 min read
Image for post
Image for post

What’s Moments?

With a phone at everyone’s fingertips, it’s easy to capture photos of just about every moment in our lives. But it’s cumbersome to collect all the photos different people take in one place. It’s also hard to be sure you’ll get all the photos friends take of you. Even if you do end up with some photos others took, keeping them organized can be a chore.

We set out to improve the experience of gathering the photos friends take together. We ended up developing Moments, an app that makes it easy to give photos to friends and get photos back.

Hacky Beginnings

Moments began at a Facebook hackathon. After a night of hacking, a small group of us had a working prototype that matched places you’d been with photos you took there. After a little more work, the prototype also let you and your friends pool all the photos you’d taken together. We felt we were on to something unique and started forming an official team with members from design, research, content strategy, engineering and product management.

Image for post
Image for post
An early prototype was built at a Facebook hackathon

Our early prototype was based on our own dissatisfaction with existing ways to privately share multiple photos with multiple people at once. It also reflected what we’d heard time and again in qualitative user research:

“I take so many photos, but I always forget to send them to the friends who want them.”

Birthday parties, graduations, vacations, holidays, casually hanging out — people take photos together all the time, but they never seem to get around to exchanging them. Yeah, there’s texting, email and social media, but that only accounts for a slice of what’s captured.

A Deeper Dive

Our team’s core principle for Moments was to make it really fast for friends to exchange photos in a way that works better than existing options. Building a simple way for groups of friends to share groups of photos became our team’s north star.

One of the app’s main functions is grouping the photos in your phone’s camera roll based on when they were taken and who’s in them. This is done using the same facial recognition technology that powers tag suggestions on Facebook today. Early on, we discovered that this could be a tool for helping to suggest which photos you may want to share with specific friends. We just needed to find a user-friendly way to unlock the possibilities.

To get a sense of decisions we made in the process, let’s take a closer look at the main screen in Moments.

Image for post
Image for post
The Moments home screen.

1 — Suggestions

Moments suggests specific people to sync photos to. For example, if Moments thinks you took photos at a wedding with Jack and Jill, it will group those photos and ask, “Do you want to sync these photos to Jack and Jill?”

Image for post
Image for post
The app suggests which friends to sync groups of photos to.

In order to be actionable, the suggestions need to communicate a lot of context in a small amount of space: What are these photos of? Why are they being shown to me? What am I supposed to do with them?
We knew we needed to minimize confusion if Moments made a mistake — maybe the app misidentified a friend or there were a couple of photos included that didn’t belong with the rest of the group. Our solution was to pose the suggestions as questions and add a line of subtext to communicate the rationale behind each one. We made incremental refinements in response to ongoing research until we were convinced that people could independently grasp how handy suggestions are.

2 — Private and Synced

If we expected people to use suggestions as a primary way of syncing photos, we had to make them prominent. We explored several ways to present suggestions. A vertical list seemed the most straightforward, but that suffered in research because there wasn’t an elegant way to confirm when photos were synced or show you where synced photos “went.”

Another big challenge was making it explicitly clear that photos you haven’t yet synced are not visible to anyone else. This was imperative to ensuring that people feel comfortable using the app. We ended up arranging suggestions in a stack at the top of the home screen under a section header that says Private. A second section, labeled Synced, sits below.

Image for post
Image for post
The home screen is divided into two sections, Private and Synced, to distinguish between photos that have and haven’t been synced with friends.

3 — Activity Feed

After you choose to sync a suggested group of photos, they visibly drop down from the Private section to the Synced section and become part of a chronological record of photos you and friends have synced. We saw that this sort of activity feed is a model people rely on to keep track of photos they’ve given and gotten.

After a group of suggested photos is synced to specific friends, it drops from the Private section to the Synced section.

4 — Synced Photos

It was important to us that Moments not only facilitate exchanging photos, but also be an enjoyable place to look back on them. In addition to the activity feed, we wanted to give people some alternative ways to do that.

An All Photos tab presents your synced photos in a familiar layout similar to your phone’s camera roll. This makes it easy to scroll through all the photos you have in Moments. The Titled Moments tab presents a grid of groups of photos you’ve added a title to. This makes it convenient to access your most special moments.

Image for post
Image for post
Synced photos can be viewed three different ways by toggling among the Activity, All Photos and Titled Moments tabs.

The swipeable navigation lets you view your synced photos in three different ways. It keeps the overall hierarchy of the app relatively flat and contained to one screen, which helps prevent people from bouncing around in tabs and becoming overwhelmed.

Lessons We Learned

Step by step we worked toward realizing a shared vision — and sometimes the process really was three steps forward, two steps back. Rather than try to solve a problem in a silo, we embraced a fluid collaboration among design, research, content strategy, engineering and product management. We all learned some valuable lessons along the way:

Fall in love with a problem, not a specific solution

Design’s responsibility is to generate concepts and explore a wide range of possibilities that stitch the most promising ideas together. Throughout months of exploration, we studied countless mock-ups and prototypes. In the end, only one design became the app we launched. But all the iterative work wasn’t in vain because the key to a successful design process is committing yourself to a real problem, not marrying the first seemingly attractive solution that turns up.
A big part of designing a product is allowing yourself the freedom to ask “What if?” and knowing that you’re not going to be satisfied until you’ve tried answering the problem many different ways. It’s rare to solve a complex problem the first time (or even the 5th time). Iteration is part of what makes product design such a satisfying challenge.

Simplify, simplify, simplify, then simplify some more

We quickly discovered that if we couldn’t put something into writing — if we couldn’t explain it in a concise and compelling way — it probably wasn’t the optimal approach. Writing descriptions of different features and benefits was also a speedy and effective way for us to test what resonated with people. We found that how well people understood something we’d written could directly inform decisions about what to prioritize or smooth out in the UI.
No matter how brilliant all of your ideas are, it’s critical to prioritize and simplify. Sometimes that means letting many of those brilliant ideas go because trying to do too much at once compromises clarity. There were lots of ways we could have designed Moments, lots of additional features we could have included in v1, and plenty of alternatives for how we could have framed the product. Ultimately, no amount of user education will compensate for a product that doesn’t have a tightly defined value and organized UI. An overload of explanations and options dilutes how useful and enjoyable a product feels.

Check your assumptions

Qualitative research is an essential part of keeping product development oriented. It’s like a conduit to reality. A major challenge in any creative process is striking a healthy balance between intuition and raw feedback from real people. Our team found that it’s critical to test assumptions early (as soon as we had our first hacky prototype, we started observing others interacting with it) and often (for months, we ran usability sessions as often as every week).
Sometimes our questions were tactical: What’s the best layout? What should this button say? Sometimes they were about social dynamics: What are the barriers that cause people to not share? With every new insight, we uncovered a slew of new questions. Through one-on-one interviews and focus groups, we continued to meet with people to understand how they were using what we were building. This real world feedback kept our instincts grounded and greased the wheels for rapid iteration.

Image for post
Image for post

Launch day is just the beginning

We didn’t stop tinkering, clarifying and questioning until we were confident that what we came up with solves a need in a way that feels intuitive, with a touch of magic.
We realize that, despite all the effort put into getting Moments “right,” we probably got a lot wrong. We’re lucky to be part of Facebook Creative Labs, which was set up to give scrappy teams a chance to experiment with new concepts. At some point along the way, you have to accept the notion that done is better than perfect without letting that dampen your drive to do the best damn job you can with what you know at any given time.
The more people start using Moments, the more we’ll continue learning. And the more we’ll have our work cut out for us. We’re excited to keep hacking away.

Image for post
Image for post
Creating Moments was a truly collaborative process that involved insights, skills and persistence from many different disciplines. Thank you to everyone who was involved!

Our wonderfully talented and tenacious team includes:

Rujia He, designing for Android;

Ashwin Bharambe, Hamilton Chong, Zack Gomez, Lin He, and Dhaval Shreyas building for iOS;

Jasper Fung, Jiakai Liu, Nathan Ma, and Lide Zhang building for Android;

Bob Peterson, our Engineering Manager, Inna Rubio, our QA Lead, and Brady Simpson, our Product Specialist.

Facebook Design

Designing for the global diversity of human needs.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store