Building Gamereel: Part I

Around January last year, I was in the middle of yet another FIFA gaming session when Messi (as always) produced his magic and I scored an unreal free-kick. Invariably, I instantly got an on-screen notification saying that my game clip had automatically been captured and saved. It wasn’t the first time that something like this had happened — if you’ve played FIFA, whenever there’s a moment of individual brilliance (free kick, long-range goal, chip shot etc.) or special gameplay, EA automatically captures that for us, and these clips can be accessed later. I have been playing the game for a decade now, and have probably seen this “Game clip saved” notification thousands of times. But this time it got me thinking — Do other games have this feature too?

I’ll be honest, I have never really been a fan of mobile games. Sure, I have played a few games on my phone here and there, but the bulk of gaming I have done was either on a PC or a console. But I knew very well that I’m the exception here, not the rule. The gaming ecosystem has undergone a major paradigm shift in the last 4–5 years. With low-cost feature-rich smartphones flooding the market and mobile data becoming cheaper than ever, more and more people have started playing mobile games. Statistics suggest that the mobile gaming market in India is an absolute record-breaker. The number of mobile gamers and the average session time also exceeds that of console/PC gaming by a huge margin. So, I ditched PC games and started exploring popular mobile games (PubG, COD Mobile, MLBB, etc.). I was mainly concerned with 2 things — a) Do players of these games share their awesome/funny game clips? b) Does the game have a feature of clip auto-capture? I was not surprised to see that there actually was a lot of content for these games on social channels. PubG was the absolute leader in this regard. From funny/wtf moments to extreme skills and insane fights, one could find a wide variety of PubG clips online. I noticed the creators were mostly pro or semi-pro streamers, and there was a lot of duplicate content as well (same clip from YT being shared on Instagram from a generic account). But nonetheless, the following of these channels and accounts was huge, suggesting that people were actually interested in such kind of content. However, none of these popular games had any feature (at least then) even close to the auto-capture one like FIFA provides. Mobile Legends Bang Bang (MLBB) came the closest, giving a match download feature where you could download a video file of the entire game on your device and do whatever you please with it.

This is the first of a series of articles where I will be talking about how we ideated, designed, and developed Gamereel. This one will be mostly around what problem we wanted to solve with Gamereel and how we went about ideating the MVP. In the articles that follow, I’ll deep dive into the technical aspect of building an app for creating and sharing video content.

Ideation

We wanted to build a product that could help everyday gamers create clips and montages of their awesome gameplay moments easily. In addition to that, we wanted to have a social angle to the app with basic social media features. Considering this, we realized there would be 2 main aspects to the app:

  1. Creator flow — to capture highlights, create and edit clips.
  2. Social flow — Post/Like clips, View feed, follow gamers, etc.
The initial wireframe for creator flow entry point. On the left is the game studio screen that shows the reels created by the user. On the right is the one-tap highlight feature that captures (-x) to (+y) seconds of gameplay at the moment when the highlight is tapped.

Our goal was straightforward — make the process simple so that even a casual gamer can easily create content. We started brainstorming and came up with the following flow:

  • The user would fire up the Gamereel app, give a few basic one-time permissions and start recording from within the app. He would then start his game.
  • We wanted to enable gamers to identify share-worthy moments in real-time. This would be achieved through a one-tap highlight button. During the game, there would be a floating button (Highlighter) that could be dragged and placed anywhere on the screen. While playing, if the user wanted to mark a particular moment as important, he could simply tap on this button. We would then save some moments before and after the mark as a suggested clip (say a 20-second clip — 10 seconds pre and post the mark).
  • At the end of the game, the user could long-press on the highlighter to get an option to stop the recording. He would then be routed to Game Studio in the Gamereel app.
V1 wireframes for the suggested clips and Create your own clip sections. (The current look is quite different as the final version was born out of multiple iterations)
  • The Game Studio is where the magic happens. The user could select a Reel (a reel is the entire recording of the game session) to proceed. For every reel we have 2 options: (i) We show a set of suggested clips which we create from the in-game user highlights ( -x to +y seconds from the point of highlight). We wanted the duration of these suggested clips to be short (somewhere around 40–45 seconds) so that it captures the moment and the context, as well as lies within the viewer's attention span. This was the default length, but the user could trim it according to their will in the next steps. (ii) The second option is “Make my own”, where we allow the user to view the entire reel and choose the custom start and end points to create his own starter clip.
  • Next, we have an option to add multiple audio tracks to the clip. These could either be chosen from a bunch of short background scores that come with the app, or the user can select any audio file from their phone to be added as a background track. There’s a ‘Record Audio’ option as well to give a personal voice touch or simply add a background commentary. We provide the feasibility where these tracks could overlap and lengths and volume could be adjusted individually. We wanted to have another section where users could add effects to the clip but parked it for later versions.
  • In the last step, we show the final clip to the user and let them add a description for it. Once done, they can simply hit the publish button and within seconds it would appear on the feed. (Again, we parked the download clip feature for later versions)

That’s it! This 3-step process usually took about 3–5 mins to create a clip.

Besides this, the social flow had regular features like searching for a user, following them, liking/commenting on posts, etc. (Think of it as an Instagram for gamers).

It took us about a month working on the side to turn this concept into a working MVP. It took another couple of months on iterations from user feedback, until we had a much more refined product. You can check out the demo here: https://youtu.be/0dCzBPg69P0.

In April ’20, we distributed the app to around 150 odd beta users and most of the response we got from them was positive. There was a bit of a learning curve (that we knew could be solved with a better onboarding journey) but once the users had know-how of how things worked, they were able to create clips quite easily.

Unfortunately, we never got around building an advanced version or increasing the reach of the app to the numbers we had hoped for (more on that another day). But for me, there was a lot of technical learning in the process of building this from scratch. I’ll talk more about that in detail in the next article.

Thanks for reading! You can visit https://gamereel.in to download the app and give it a go.

Developer with a Business acumen. Builder at heart. Experimenting with new products in gaming (Try https://gamereel.in). Ex-Rivigo, Sprinklr.