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