Published on | Prototyping: From UX to Front End — Medium Aayush Jain

If you are a part of Moments team, I would highly recommend you to take a moment and download the keynote presentation for this article.
You will take much less time and will get a far better understanding of the process.

There are three parts to this article :-

It starts with a short story about a series of events that inspired me to redesign Moments app.
The next is my understanding of the product and my process of redesigning, with empathy being one of my most valuable tools.
And the last covers the possible design suggestions to facilitate a more engaging, intuitive and seamless experience when it comes to using the Moments app.

On a side note: I do not work for Facebook, and the views in this article are strictly my own. Unlike the designers who work at Facebook, I don’t have full access to all the user data that influenced their current design. As a result, this study is not exhaustive, and I am certainly not suggesting that Moments abandon their current design and adopt my redesign.

More than a year ago I moved to Mumbai, India from my small home town, for the first ever Job of my life. I worked as Product Designer specialising in UI and UX design for the then hottest startup of India, Housing.com.

I was living with few of my friends. We started Airbnb-ing our apartment. Our first guest was Arthur, from France. He booked for a day but ended up living with us for more than two months.

Living with someone from a different land for the first time, I learnt so many new perspectives about life. We created memories that we surely cant forget for the lifetime.

But I knew he would leave soon!

An idea sprouted up in my mind.

I really wanted to save our story together, which I can look back on to recall those times and tell about it to others as well.

I called that idea — Mo-meants!

I swear !!
!Moments that are meant to be remembered.

Your story with people in your life — photos, calls, chats, places you have been to, food you ordered, songs you introduced to one another, online purchases, tv series, etc, etc — everything you have done with one person arranged according to time and locations.

Graphical description of a ‘Mo-meant’

There are so many Mo-meants you create in a day.

Mo-meants app was a place to save your digital story in an interesting way, by attaching them in the form of memories with your friends.

I loved this idea and I started working on it from the very moment it struck.

I was reading Hooked : How to Build Habit-Forming Products by Nir Eyal, around the same time. Mo-meants was an idea linked to a certain kind of human behaviour and desire. Hooked certainly helped me to think how to use design to get people to use your product!

My belief in Mo-meants grew stronger day by day, until the day I got a notification on Facebook messenger.

Download ‘Moments’ App!!!

S**t! F**k! I sensed what was there in it for me.
I instantly downloaded the app.

Keeping aside the strange coincidence of the similarity in the names, the idea of sharing and organising photos with friends was also freakishly similar but done in a much better and efficient way.

I am not sure if you can imagine how I felt on seeing that notification.
Arthur knows. I woke him up at 4 in the morning, shouting.

I realised one thing soon after.
I had two options.

Still work on Mo-meants, face the fear, go all-in, make the North Star, gather a team, build it and show it.

OR

Follow the journey of the ‘similar one’ and try to learn from it as much as possible.

I decided to go with the latter.
And I am really glad I did.

Over the past year and a half, I’ve been able to see all kinds of changes and innovations that have emerged within the Moments app. I have been kind of obsessed with all-stuff-moments related — reading blogs, articles, reviews.

Fall in love with a problem

The rest of this article will take you through my process of redesigning this wonderful app.

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 organised can be a chore.

Sending photos to friends, on the first place, has too many steps.

Sending a photo to a friend simply has too many steps (Damjan Stankovic)

Moments makes it really fast for friends to exchange photos in a way that works better than existing options.

One of the app’s best function is, it automatically groups the photos in your phone’s camera roll based on who’s in them and when they were taken. This is done using the same facial recognition technology that powers tag suggestions on Facebook today.

In one tap, you can sync your photos to your friends. Then, friends can add their photos to the moment. It is a simple way for groups of friends to share groups of photos.

Process of sending photos with Moments App

Moments on a deeper level is also an expression of one of our core behaviours.

Julie Zhuo, VP Product Design at Facebook, righty says —

In my parents’ bedroom is a photo of me where I’m six years old and the composition is terrible. My parents aren’t bothered by that. What matters most to them, and to the vast majority of people out there, is that when it comes to photos, it’s about the people and the memories. Family and friends congregating at a certain point in time. Weddings and graduations, vacations and family portraits.

Moments began at a Facebook hackathon in mid 2015.

I love hackathons. You usually don’t win anything, but the feeling of building a product, seeing people try it, and convincing yourself that this is huge and you’re going to work on this further is a great feeling.

Glad that such a good product came out of one such hackathon.

For the journey of a typical moment’s user, the story matrix looks like this —

The Story-Matrix for a Moments app’s user.

A story-matrix is a set of journey points in a domain within which a product interacts with the life of a user.

It starts from the point where user first feels the need of using the product till the point after the user have successfully completed the desired action using the product.

I came up with the idea of story-matrix while working on a project. You can read more about it here — Stop making persona, Start making Story-Matrix.

The story matrix helped me in identifying the right features to implement, improve or remove which I will cover in the subsequent slides.

Moments linked friends.

It was perfect for me to conduct, what researchers call as, contextual inquiry, a method where you go to people and observe them in the environments where they use your products.

Working remotely, I was fortunate enough to travel to a lot of places and meet most of my friends from different spheres of my life, again.

I introduced Moments to the friends I met.
Here’s what we did —

Empathy was the key here. My job was to try to understand, why they are behaving the way they are when engaging with the app, not to try to change that behavior or influence it, but accommodate it within the app.

I loved this process. I was really happy seeing people learn to use a product and eventually loving it.

I now think this approach is much better than asking some random person to fulfil a series of random tasks, at an inconvenient time, in a forced environment, on a new device, in front of a completely random person.

That’s me mostly introducing Moments App to my people 🙂

Choosing my friends for the study was a real plus. Its when things are natural, you get the truest insights.

Don’t Ask People What They Want, Watch What They Do

#1. Onboarding New Users

The educating screens for first time users.

Findings

Out of 20 friends whom I talked to for my study,
12 started using the Moments app for the first time.

Most out of those 12 were confused as to —
What moments did?
Why all their photos from gallery and facebook were shown?
What will happen with these photos?

The educating screens are not clear in highlighting the purpose of the app.

1. The first screen

Finding
One of the core values of Moments app is the concept of ‘Privacy’ which is nowhere mentioned on the login screen.

Recommended solution
Add a line about privacy on the login screen

Severity of the problem : HIGH
Effort to implement the solution : LOW

2. Organising photos

Finding
The user gets no clue as to which photos are being organised and processed and what will happen with those photos.
Also, this card is shown as a modal above the screen.

Recommended solution
Adding a line about where the photos are being taken from and that they will be only visible to the user.

Also, showing this card within suggestions and not as a overlay because the results will appear in the suggestions section only.

Severity of the problem : HIGH
Effort to implement the solution : LOW

3. First suggestion

Finding
On the first look most of my friends were confused seeing all their photos in the app.

What are these photos of?
Why are they being shown to me?
What am I supposed to do with them?
Have I shared these photos with friends shown above?

Recommended solution
Its important to highlight the fact that the suggestions are only visible to the user and also after clicking on create a new private moment will be created with the friends is those particular photos.

Severity of the problem : HIGH
Effort to implement the solution : LOW

#2. The Notification Trigger

The trigger to remind user to send photos to a friend.

In the version, before the update in mid 2016, Moments app had a trigger in the form of a floating head.

When you clicked a photo, the head would pop up on your camera screen, asking you to send the photos to the person you took the photos with!
[It recognised the name of the person based on the same facial recognition technology].

The trigger in the next update of Moments app comes in the form a notification the moment you click photos.

Trigger to send photos on camera screen asking to send photos to the person in the photo in the form of a head (L) in the form of notification (R)

Findings

When I introduced moments to my friends, they were so surprised and delighted to see their name popping up on my phone and vice-versa when we clicked a photo.

This was surely among the most genius of features I came across in any application.

But this trigger got removed from Moments in an update around Jan 2017

Unlike the designers who work at Facebook, I didn’t have full access to all the user data that influenced this design decision but my qualitative research helped me figure out a couple of possible reasons that can be responsible for this decision.

The popping head was more of a hinderance
My friends felt good the first time they saw it, but not after that.
Imagine something popping up everytime you click a photo.
It became unpleasant after a while.
It lacked in timing
You wouldn’t want to send photos right away after clicking them.
Your friend is still with you.
You are taking more photos.
You are outdoors.
You lack that motivation, etc, etc.

Recommended solution
Show the trigger to send photos to the friend whenever they interact for the first time after they have clicked the photo — either on Messenger or Whatsapp or Call!

Trigger to create a moment on (L to R) Whatsapp screen, Messenger screen and Calling screen.

Severity of the problem : HIGH
Effort to implement the solution : HIGH

Why is the new trigger important?

B.J.Fogg’s Behavior Model shows that three elements must converge at the same moment for a behavior to occur: Motivation, Ability, and Trigger. When a behavior does not occur, at least one of those three elements is missing.

Triggers are important for a behavioural app like Moments.

Like all good design, the process of getting to a simple solution is complex.
It took me a while to come up to a solution for a trigger.

In the very first article by Laura, she mentioned one of the core problems they set out to solve while designing moments —

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

Trigger’s job should be that simple : to remind people to share the photos with their friends, at the right time!

Also, apart from having the advantage of right timing, this trigger also has an added advantage of creating nostalgia for users.

Imagine, you met a friend, clicked photos, you texted him if he has reached back to his home and suddenly you get to see the photos you took in the day and option to share them with that person directly.

Nostalgia is a powerful weapon!

Trigger to create a moment comes on messenger screen while texting the friend with whom photos were clicked.

How to implement the new Trigger?

How would Moments App know if I am calling or texting the same friend I met and took photos with?

Well, this would require a lot of database calls between Whatsapp, Messenger and Moments app in the backend to leverage the fact that Moments app already knows the name and face of the person you took photo with.

#3. Suggestions

The cards that show suggested moments to create.

Suggestion to create a new moment (L) and adding photos to an existing moment (R)

There have been many refinements in the design of the suggestions over the previous few updates.

Findings

The changes over suggestions have definitely made it easier for people to independently grasp how handy suggestions are.

Replacing the concept of ‘sending photos to friends’ by ‘creating moment with those friends’ is particularly amazing — to create a place where all the photos of a particular event, from all the friends, should be together.

But during my study I found that my friends were confused about a few things in the suggestions section.

1. What happens after I skip a suggestion?
My friends skipped most of the moments but they couldn’t figure out what skip did to that moment.

They had no clue that skipped suggestions were going under the list icon on top left.

Out-of-sight-out-of-mind.

Recommended solution
Replacing ‘skip’ with ‘later’ and adding a micro-animation.

Severity of the problem : LOW
Effort to implement the solution : LOW

‘Later’ button will convey to people that they can create this moment afterwards too. Adding a little animation to the list icon after the user has tapped on later will guide user to the tab from where they can access that moment later.

This can be animated for first few times when someone skips a suggestion.

You must ensure that there is always some feedback for user actions, because it makes users feel in control. Visual feedback acknowledges that the app has received a user’s action.

Animation options for saving a moment for later use

#4. Improving existing moment

Design suggestions for improving the experience of Moments already created by the user.

You click ‘create’ on a card in suggestions list, a moment gets created.

Inside an existing moment

There are lots a things that you can do with your created moment —

Findings

1. Who all are part of the moment?
It was not very clearly indicated who all are part of a moment upfront and how many photos are there in it.

Recommended solution

The data for number of photos is shown independently above the moment thumbnail.
Showing friends who are a part of that moment clearly. Thumbnail is an entry window to any moment. It should show the people with whom the moment is with.
All activities related to a moment like comments or if a friend has seen the moment or who added photos the last time, etc are clubbed together as a notification bubble with a number to lead user to go inside the moment.

Severity of the problem : LOW
Effort to implement the solution : LOW

2. Inside a Moment
Who all are part of this moment?
Who has seen and who has not yet seen the moment?
How many photos are there?
Who added which photo?
When were the photos added?

Showing people in moment screen similar to the design of suggestion card
Clearly indicating the status of friends who are a part of that moment.
Adding name of person who added the photo below each photo.
Clubbing information regarding total number of photos and adding more photos together.
Clubbing all the activity and comment related information together.

Severity of the problem : HIGH
Effort to implement the solution : LOW

3. Why is there an ‘add more friends’ card?
It makes senses to add people who might be in photos in the current album.

Most of my friends were confused to see why some other random friends, who were in no way related to the open moment, were shown inside that moment.

Recommended solution
Remove the ‘add more friends’ card.

Severity of the problem : HIGH
Effort to implement the solution : LOW

Its not the intent that people see first, its the faces and the name.

If I add some friends often to moments or send moments to them often doesn’t mean I would want to add them to every moment.

One of the core value of Moments app is the concept of privacy. And this ‘add friends’ card generated a kind of a opposite feeling within users.

I strongly recommend to remove the ‘add friends’ cards shown within a created moment.

#5. Reminding friends to send the photos

Asking your friends to send the photos they have of you

Findings

One of the questions I asked during my study was —
Do you ask your friends to send photos they have of you?

Out of the 20 friends, all 20 said YES!

Currently they do it verbally or over text. People want a way to ask others for their photos.

In the previous versions of Moments, there was a separate tab showing a list of friends whom you can ‘ask’ for the photos they have of you.
This tab was also removed.

Less number of people asking for photos through a separate tab?
Not a good way to ask for photos?

Recommended Solution
Showing a card about reminding a friend to add the photos he has in an existing moment.

The reminder card can be shown both within the moment suggestions list and below the respective moment.

The reminded user will get a notification and he can add photos from the notification itself.

The reminder card shown both within the moment suggestions list (L) and below the respective moment (Centre). The friend gets a notification if someone reminds him and he can add photos to the moment from there itself (R).

Severity of the problem : MED
Effort to implement the solution : MED

Sharing photos is a very important part of every Moments App user’s journey.

In the current version, if anyone from a group creates a moment, everyone else who is a part of that moment gets to see a suggestion card showing a group of photos from their phones which they can add to the existing moment. Other way to remind friends is by commenting within the moment. But that’s not a design solution considering the fact that asking for photos is a crucial part in the user’s journey. I believe that the idea of showing ‘Remind’ cards can be a better solution to facilitate this exchange of photos.

#1. Sharing directly on Facebook

A growth hack for getting new users.

There are three ways that are there in the current version of the app for getting new users onboard.

Three ways to get new users on moments — Sending preview in messenger (L), showing invite cards (Centre) and showing albums created on facebook in past as suggestion for new moment (R).

Showing the albums you uploaded in past on facebook as suggestions for creating a new moment is a feature launched most recently.

I was thinking one on very similar lines. I wish I would have sent this posted this article earlier, but I am really glad the moments team came up with this. This is really an excellent way to get new users.

Recommended solution
Sharing photos and albums directly from moments app to Facebook and Instagram.

Social card for sharing photos on facebook directly from Moments app.

Sanket and Anurag were two of my friends whom I introduced Moments too.

They both started using the app when we went on a road trip. We added all our photos in a Moment.

But they both independently shared few photos, which were also the part of our Moment, on Facebook and Instagram.

Posts by my friends on facebook and instagram after our trip

People love sharing few of their best photos, from an event that just happened in their life like a weeding, birthday, trip, etc, on Facebook and Instagram.

In the story matrix of sharing photos, posting on social media lies somewhere after the event of clicking photos have happened and it is also a crucial part of Moments user’s journey.

What if we can show a social card below every moment and give users options to customise it according to their needs.

Social card shown below respective moment(L), Options to change/add/remove photo (centre) and Automatic location and friends tagging done before posting to facebook (R).

Its beneficial to the user because he doesn’t have to go through all the tasks of selecting photos, adding location and tagging friends.

Moments can do it using the current technology.

Now you can just post your awesome group of photos on Facebook and Instagram with a click.

As mentioned earlier about inviting new users to use moments app, sharing on Facebook and Instagram, with a small ‘shared from Moments App’ tag can help attract new people towards the platform.

Shared from moments on facebook

#2. Refining the Search

Design suggestion for improving search results.

Finding

When I search for lets say a friend with a name anurag, the results are shown in the order of firstly photos and then moments.

The problem with this is I get to see all my friends named anurag on facebook first and then the relevant moments.

Recommended solution
The sequence of results shown should be based on relevancy, as in, the number that is shown on the right.

All results with value > 0 should be first and then the remaining results should be shown.

Additionally the results can be categorised within people in moments, albums and others.

#3. Removing screenshots and text images

Its very displeasing to see the screenshots and text images in suggestions.

Text images and screenshots shown within suggestions and also within some created moments.

Recommended solution
A card showing an option to choose the folders the user want to see suggestions from can be shown upfront.

This is currently hidden under settings tab.

A card for clearing off all suggestions with images having text can be shown.
All the text images can be identified using image recognition.

A card showing an option to choose the folders the user want to see suggestions from (L) and a card for clearing off all suggestions with images having text (R)

#4. Look Back!

Notifying users to look back on created moments based on time, location and date created.

Facebook’s year in a review, Timehop showing past status updates and photos shared exactly one or more years ago, Heyday using a similar approach, reminding users of the past but adding another dimension: location.

These are just are a few products that use nostalgia to spark engagement and build compelling experiences.

I took out some time to observe the activity of sharing old memories with friends on facebook.

Going through most of the ‘see your memories’ posts on facebook, I noticed that activities like liking, commenting, etc around the memory which is shared is done mostly by the people who were a part of that memory. Memories are more relevant to the group of people already associated with it.

Moments app have great advantage of harnessing this power of Nostalgia.

Moments also knows at which location, at what time and with whom you have created a memory in your life. It can use any of this information to provoke the feeling nostalgia within you.

Recommended solution

i. Using time and date : Asking you to look back on a moment you created an year ago.

ii. Using location : If you are visiting a certain location after say two months and you already have few moments at this location before, moments can show you those moments at that location.

iii. Using people in a moment : If you interact with a friend on messenger first time after say three months, moments head can pop up asking you to take reflect back on moments you have that friend.

<a href="https://medium.com/media/2ca616b9febce71d3ef2278cc47e214b/href">https://medium.com/media/2ca616b9febce71d3ef2278cc47e214b/href</a>

I know this presentation is a bit lengthy and I have written a lot about this redesign process but it was important that my story makes sense in a deep and personal way.

I have been working on this since almost over an year now. Working little little day by day, checking whats new and validating what better can be done.

This decision to follow the journey of Moments and not working on ‘Momeants’ has helped me a lot in evolving as a Product Designer.

I now have my answer to the most common question in an UX interview — which is the app you love the most and what changes you can suggest to make it better? 🙂

I was also inspired by a lot of early stage product designers across the globe who got a job at their dream company by taking a slightly different and more logical approach than sending out mere portfolio and resume links to the company — its by proving how you can solve their problems.

Facebook is my dream.

References and Mentions

Designing Moments Laura Javier
Nirandfar.com Nir Eyal
Empathy is the best UX Policy uxplanet.org
Why design at Facebook Julie Zhuo
Why Product Thinking is the next big thing in UX Design Nikkel Blaase
My Facebook Product Design Internship Interview Geunbae “GB” Lee
I wanted to see how far I could push myself creatively. So I redesigned Instagram Kim Thuy Tu, freeCodeCamp
How to Get Your Job Application Noticed Every Time Raghav Haran
Nostalgia: A Product Designer’s Secret Weapon Ryan Hoover
How you can land a 6-figure job In tech with no connections Austin Belcak
Airbnb Moments @Jihad Kawas
A Guerilla Usability Test on Dropbox Photos Francine Lee

Special Thanks

Prof. Prasad Bokil, Department of design, IIT Guwahati
Arthur Nobiron, because of whom I got this idea
Nupur Aggarwal, Product Manager @explorelifetravelling
Gaurav Joshi, Head of design @Housing
Abhinav Chhikara, product designer @lisnapp
Sweta Agrawal, software developer @Adobe
Parth Sabharwal, Ph.D. student @Dartmouth
Sanket Garg, Android developer @Citrix

Thanks to all my friends for taking out time for my study and giving me the strength to make this possible.

I am Aayush, a product designer based in Mumbai, India. I am specialising in mobile UI/UX and growth. I have done my bachelors in design from the Indian Institute of Technology (IIT) Guwahati.

I am currently building @healofy and was previously designing experiences @housing. I am looking for opportunities where I can contribute with my vision and grow as a Product Designer.

Portfolio : aayushj.com
Email id : aayushjain.jain28@gmail.com

All in! _/\_

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Redesigning Moments App ❤ was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Redesigning Moments App ❤

Cool stuff, every week

More Articles