Instagram Trivia
Study Length: Short
A study that focused on implementing a trivia game feature into Instagram’s direct messenger, specifically for group chats.
The focus of this project was to create a feature that increased engagement, sociability, and the overall appeal of Instagram chats as a primary messenger.
Research
When it comes to mobile trivia games, there is a harvest to choose from.
Competitor screenshots were easily collected along with similar successful products, such as Kahoot. To help unify the interface, Instagram’s poll function was used as reference in both visuals and usability. For questions and trivia game design, Trivial Pursuit was used as a base.
Building
Simple drafts were made to flesh out the functionality of the feature. Some aspects to consider included:
​
-
Functionality vs. Convenience: How many steps would it take for a question to be sent? How to randomize questions while also allowing the user to tailor experiences to different people?
-
Visuals vs. Usability: How much space would the interface take up? What layout would balance readability with functionality? What kinds of components would need to be made to help the game flow well with the mobile chat interface?
-
Entertainment value: What makes a function easy to use, while at the same time engaging enough to return to? How to bring the competitiveness of trivia games into a casual setting without overwhelming the user or taking over the interface?
To encourage interactivity and sociability, a ‘Fire Round’ option was drafted as a way to further gamify the experience with scorekeeping. In short, the user could casually send out single questions, or set up ‘rounds’ where multiple questions would be tallied up and ranked. For this to happen, a number of settings would have to be added for players who either did or did not want to participate, as well as cancel-ability and turning off the feature entirely.
With all of this considered along with the initial research, a skeleton of the layout was sketched out to get an idea of how it would all come together.
Prototyping
After collecting screenshots from the messenger, lofis were made on top of them by creating simple components that blended in with the preexisting visuals. A simple scenario was created within the prototype, while a pop-up tab created from the poll feature served as the template for the game setup.
The lofi prototype included a simplified version of the function that included a simple flow of:
​
-
Setup
-
Question added
-
Answering
-
Results
​
Another focus of the lofi was to test out basic features such as question selection and randomization and differentiating between ‘correct’ versus ‘incorrect’ results. This created the overall base of the feature while also helping test the feel, flow, and its overall assimilation into Instagram’s interface.
Two questions were set up for each category to flesh out how to choose between different options. Trivial pursuit cards were used to generate questions for the various categories.
After fleshing out the basic functions, game design, flow, and base presentation, the function was ready to be fleshed out and tested. After getting some feedback from the lofi prototype, it was time to refine the feature.
Refinement
Atop the base of the lofi, the following had been planned to be implemented in the hifi prototype:
​
-
Settings to turn off parts of or the entire feature off
-
Fire Rounds and a scorekeeping function
-
Refined UI and responsiveness
-
The option to forfeit or leave a game from the chat function itself
-
Visual indicators between different options to assist with readability
First, icons were designed to differentiate between the categories, which would also be used on the question cards in both the setup and chat. The layout was tweaked to include the switch to turn on Fire Rounds, and a forfeit option was included in the answering pop-up, which included the option to ignore questions for the whole day or until the user decides to turn it back on in the chat settings.
A scoreboard was added to result cards, and chat settings were modified. Separate flows were created between correct and incorrect answers, forfeiting, and Fire Round being turned on or off, as well as a panel where the user can choose how many questions they want the Fire Round to continue for. As low as three, but no more than ten to discourage spamming and group burnout.
After cleaning up the rest of the interface, animations were set up to auto-generate the scenario conversation using delay transitions. Along with all of the option branches set up, this allowed the flow to generate itself into feeling as if an actual conversation and game were happening.
With that, the prototype played almost exactly like a real Instagram conversation. Very satisfying.
Conclusion
This was a shorter project that allowed me to both break away from my usual project planning, learn how to work with another company’s interface, and expand upon how I go about designing a game within another feature. I had to consider how not only to make the game usable and enjoyable within the chat itself, but also how it would affect other features within it such as the settings and other menu options.
​
This created a very large flow from all of the branches made from different options. To help Figma respond appropriately to different choices, I had to create separate screens on top of components. Some details such as what words would be both easily understood as well as fit into layout well, what colors were readable on both light and dark themes, and how to quickly allow users to access settings were also things I learned to handle.
​
Overall, this was an interesting look at simple game design and efficiency with preexisting design. After creating a completely new game from scratch in my Trendsetter project, this helped me study the basics in a setting where I did not have to think about designing ten other functions along with it. It also makes me think about how appropriate card games are mobile interfaces. That would be fun to experiment more with.
