Flashgap: Designing A Peak Interaction

A UX Case Study

FLASHGAP

Flashgap is a time-delayed photo-sharing app inspired by ‘The Hangover’ movie, launched in 2014 in Paris. The movie inspired us to create an app where in an event no one has access to the photos taken by friends or themselves. Letting the next day at 12 hours be a discovery of every photo taken for all the participants.

I’ve been working with Flashgap since August 2014, collaborating with Arthur Cadiou and forming the first Flashgap’s design crew. We contributed solving many challenges concerning retention, easing the album creation process, the way users connect with their friends and take pictures.

“Flashgap’s differentiation lies in the surprise generated by sharing the discovery of every picture the next day.” — Julian Kabab, CEO

But how might we…

…create a peak experience moment to gather a group of friends on the app at the same time and improve the overall user experience?

Process & role

During this two weeks sprint I applied the Design Thinking method and adapted it to our needs depending on the projects. I was in charge of the UX research. I used a whiteboard, After Effects and Principle to create prototypes of interactions. I was also in charge of the execution phase to create the visual assets and communicate the design specs to the developers.

Research & User insights

Going through data

We started our research by taking a look at quantitative data. Our homemade back office and google analytics reports highlighted that:

  • There is a peak of pictures at 3am
  • There is a new peak at 11am after we send a notification saying the album will be released soon

Gathering qualitative data through a survey

We used Google Forms to send a survey to 20 regular active users offering a 20€ worth Amazon gift card. Offering a gift card can motivate respondents and create content for the community management. We wanted to gather more testimonials about the way our users set up parties and when they make a debrief of the night. At the end, users could answer to the question: “if everything was possible, what would you change to the discovery of your albums”. This question aims at generating ideas or notions that might inspire our team. Everything isn’t relevant but we don’t lose anything at asking.

Planning the interviews

An interview plan on Draw.io with paths & optional questions

Since I wanted to involve the whole team in the research, I sent a global email redirecting to an Excel file on Google Drive. In this file everyone could fill the cells with questions addressing the main problem of the peak experience, and tell us why they thought it could be relevant to ask this. Everyone contributed to this task, from the developers to the marketing team. By doing so, questions or notions we didn’t think of started to appear. Some questions were too global and needed to be divided into smaller questions. Because we asked the team to tell us why they wanted to ask these questions, we could rephrase them or create new ones to meet the expectations. Then I selected the most relevant questions and sort them in different categories. I drew a plan of the discussion for the interviewer. There are mandatory questions we need an answer to and optional questions. We ask new questions depending on how the interview is going.

Conducting the interviews

During previous interview sessions, it came to our mind that the dynamic of group is a core mechanic of Flashgap. It gathers people who had fun with the app. Their testimonials would differ whereas they were alone or with their group of friends. This is why we conducted 3 interviews of regular users: two interviews with two distinct users, and one interview with a group of five friends using Flashgap. We clearly saw the difference between the sessions alone versus groups for the reason that when answering questions: users also interacted with their friends in the same room. “Oh and I like the Hall of Fame feature. Hey Raphaël, do you remember when you were the top picture, the one where you are sleeping on the table?” Seeing which feelings users carry when talking about a feature and explain exactly how and why they use it is a very significant information for the research. I take notes directly on paper while listening to the users testimonials. Some of the questions were:

  • To you, what do you think the comment feature lacks of?
  • Once you finished consulting the album, what’s the first thing you do with your pictures?
  • Where are you located when you discover the album?
  • Who is around you?

I don’t write down everything because I’m also recording the session with an app on my phone. It will be useful later when I’ll be rehearing the record to check if I didn’t miss something.

Processing the testimonials

I always take a second look at my notes then write all the important information on post-its. I do the same with the testimonials extracted from the survey 13 users on 20 answered to. I sticked the testimonials to the wall and grouped it. I clearly saw that patterns had started to appear. To get feedback from the team and inform them on the press of the research, I created a Trello board and just transformed my posts-it into Trello cards. I placed them into one of the 16 lists representing the trending categories.

16 lists. 120 cards. Each one contains a testimonial. One color for each user. NDA content

Everyone had access to this list and could comment directly on Trello when they thought a card didn’t belong to a category or when they saw another trend I didn’t notice.

Discoveries

The previous steps prepared the raw materials for the research and enabled me to organize my thoughts. I drew conclusions from the documents I created and translated them into design recommendations. We discovered that:

  • A lot of new picture are taken before the album release. People might take picture of them after waking up, or pictures of their friends in a bad situation.
  • Some people aren’t with the others and can’t interact with them directly
  • Some users are disappointed when nobody comments on the chat
  • Some people open the album way after the debrief moment and miss the fun
  • Users don’t check their notifications and miss comments on pictures
  • After the debrief moment, pictures are shared through private conversations on Messenger, WhatsApp

Opportunities

After learning more about the way users interact with the app at the release of the album, our design team decided to dive into a brainstorming session to generate a lot of ideas. We sat next to our brand new whiteboard then started to sketch. When we have an idea we write it or draw it. If the others wants to add something to this idea or highlight the flaws they can directly draw over the original sketch. We divided the discovery of the album into three parts: 15min before release, release, debrief. We narrowed all our ideas to these ones:

  • Before— Sending notifications about statistics of the album with our friendly tone [e.g.: Arthur took the most picture! You better be smiling!]
  • Before — When opening the album before the release, display an ultra fast gif of all the pictures to have a taste of what’s coming
  • Before— One random picture is pushed 15min before
  • Release— 3 animations varying depending on the number of pictures [visual reward for having a big album, creations of easter eggs]
  • After release— Sending a chat message saying that “Arthur opened the album first!” so people know that the others started to check out the pictures
  • After release— Creating a feature where you can “photobomb” to generate interactions between users
“until the user opens the album, he doesn’t know what’s inside”

We debated on the notion of fun and we agreed that by trying to do too much we might spoil the fun and the story of the party. We decided not to go for a sneak peek of a picture or the fast gif because it’s like cheating to the main rule of the app: “your photos are revealed at noon”. We liked the eye-candy animation idea which is a teaser because it hides the cover picture of the album; so until the user opens the album, he still doesn’t know what’s inside. Exactly like gift wrapping paper. It might be useful and visually appealing. We kept the idea of photobombing which could enable users to crop a particular zone of the photo and make fun of their friends.

Execution

Creating the animation

I started to make some sketches and I created an animation linked to expressions in order to represent what I had in mind. I assumed that displaying the number of pictures on the cover was a relevant information that might improve the teasing: “Oh, there are 200 pictures! I didn’t remember taking so much” [testimonials from a user during an interview].

With a counter from 0 to x-pictures, the users have no idea when it will stop. We decided to create 3 animations played depending of the levels of pictures: from 0 to 30, from 31 to 100 and more than 100.

After Effects & Principle prototypes

It took me 15 minutes to prototype my idea, with a low fidelity animation on After Effects, using expressions to link the number displayed to the scale of the picture. Then I created a low fidelity animation on Principle to see if there was any problem. After that I created the assets in Illustrator. I really wanted to go fast on this phase since at this step of the project they weren’t mandatory and could be easily replaced with better ones before the release.

Preview of a the user flow sent to the tech team

Implementing the Crop feature

It came to our attention that some of our friends, or friends of friends on Facebook, liked to zoom in a picture to highlight an element or to make fun of their friends. We wanted to recreate the same interaction.

Prototype of the crop feature after observing people behaviour on Facebook

We named the feature The Crop and created a crop icon. The picture is sent directly to the chat giving the opportunity to start a conversation, answering the need to create activity as soon as the album is released. There is no limit to the number of crops on the same pictures.

Roll back

After creating the animations we were all concerned by the fact that it was maybe too time consuming. A single animation, without being linked to a number of pictures, was already doing it’s job: being appealing and covering the cover picture of the album. We rolled back and decided to create only a default animation. By quickly doing the prototypes in Principle and presenting them to the developers we made a strategic choice and we avoided to lose time and code three animations while we already created the minimal desirable experience.

“we already created the minimal desirable experience”

Concerning the special feature we developed, it sounded more like a codename and less than a cool feature. We wanted to name it Crop because the main action is to zoom in on someone making a funny face, but it wasn’t what is technically called a photobomb on the Internet. We used Optimizely to run an A/B testing with another proposition and determine which one would encourage users to use the feature.

After 2 months, the Photobomb proposition clearly distinguished itself from the other. The conversion rate stays low but this is not a core feature of the app.

Lessons learned

At first we might have considered the debrief experience as a unique moment while it was a sequence of smaller moments. Dissecting the experience led us to develop more relevant ideas.

We preferred to downgrade our animations even if thought they could be delighting in order to gain time: the minimal desirable experience was validated.

We didn’t spend much time on solving debates on details such as features names because we base our final decision on metrics.