Screenshot of Social Games app.

Social Games: Designing & developing an MVP in 1 month

My experience with dipping my toes into UX design and mobile app deployment.

TLDR;

I used guidance from the Google UX Design Professional course to design a mobile app for playing social games, implemented it with Flutter and Firebase and deployed the app on the App Store and Google Play!

1 Introduction

I’ve wanted to release an app in production for a while now, but I struggled to find an idea that inspired me. I started thinking about social games due to two motivating factors:

1. The first was due to COVID, where I saw people finding random online activities to do to bridge the distance. Some of these activities included Geoguessr, Among Us, and skribbl.io, and I saw how games with a social element could help people connect and communicate.
2. The second factor was a Christmas party last year, where we played the classic social deduction game, Mafia. It was my first time playing and I was surprised by how memorable, funny and complex it could be with just deception and deduction.

This inspired me to create an app of some sort where users can play social games where the rules are easy to learn but the complexities are endless.

I also wanted to learn a more rigorous approach to UX design, since I’ve usually gone with a more gut-feel approach in my previous projects, so in the following sections, I will cover the entire design process from research to development and deployment.

2 UX Design Process

2.1 Problem Statement

The first thing I did was take a step back and define a generic problem statement. This helps to ensure that you do not start tunnelling into a solution too early on and miss out on problems faced by some users.

My general problem statement was hence to design a mobile app for social games.

2.2 Empathising with Users

The next step was then to empathise, which is essentially conducting user research and putting myself into the users’ shoes. Firstly, I defined some research goals:

1. To understand what type of games people like to do in groups.
2. To understand when people seek games when in groups.
3. To understand why people who play group party games seek them out.

Then, I created a research study plan, which mainly involved who should be interviewed, how the interviews should be conducted and what kind of interview questions need to be asked. There are other methods for collecting research data, but I will focus on the user interview aspects for this post.

Some of the questions I created were:

• Do you play games with your friends, family or colleagues?
• If you do, what games do you play?
• What are those games like?
• Why do you play those games?
• When do you play those games?
• If not, what do you do when you hang out?
• What do you enjoy about those activities?

After conducting the interviews, the results were used to create 5 different tools.

1. Firstly, the interview results were collated into an empathy map, which helps to summarise the key points of what users have described.

Empathy map.

2. Next, pain points were listed to help identify key issues which users experience:

• Financial: Need to have a free activity
• Product: Cumbersome to always remember to bring cards/board games
• Process: Different people play by different rules
• Support: Unsure of what to do when mid-game and unsure about rules

3. Subsequently, user personas were created to characterise the different qualities of the interviewees. This helps in the UX design process by providing of point of view to empathise from. For example, these are two user personas which were generated from my interviews:

User Persona 1

User Persona 2

4. Then, user stories can then be created to identify problems to be solved. It follows the template, “As a type of user, I want to <action>, so that <benefit>”, and some user stories I created were:

• As a host, I want to be able to find games which everyone can enjoy so that no one gets left out.
• As someone in a relationship, I want to find games quickly and easily, so that I can spend more time with my loved one.
• As a parent, I want to play meaningful games with my kids, so that I can educate them.
• As a college student, I want to play games with my friends, so that we can make memorable experiences.

5. Finally, user journey maps were created to identify improvement opportunities for certain user stories, for example:

User Journey Map

2.2 Defining the Problem

The next step in the design process is to define the goal, which begins with defining a problem and if/then statements. For example,

Problem Statement

If/then Statement

More than one problem and if/then statements can be generated using the tools developed from user research, and these statements are then used to create a goal for the user design process:

Goal Statement

Next, value propositions were created:

• Cost: Free to play.
• Convenience: Collection of curated social games for easy search and selection, allowing you to spend more time playing the game than searching for it.
• Social: Connect with loved ones regardless of where you are in the world over fun activities; Get to know your friends and family better; Break the ice when meeting new people.
• Ease of Use: Easy to learn but filled with complexity.

2.3 Ideating & Prototyping

The first thing I did was design user flows and UX design storyboards to identify what kind of features were needed in the app. User flows helped to identify what kind of information and actions need to be on each screen, and design storyboards helped to visualise the process a user might experience.

User Flow Diagram

UX Design Storyboard — Big Picture

UX Design Storyboard — Close Up

Finally, wireframes were then created, where different UI layouts were explored. The following two examples were wireframes I created for a page where users can search for games and when users join a room to play a game.

Wireframe — Games Search Page

Wireframe — Room Page

3 Development

I then started development with Flutter and Firebase, skipping the high-fidelity prototyping stage since I decided to use Material UI. In the following images, you can see the wireframes created in the previous section transformed into functional prototypes.

Functional Prototypes: Room and Games Search Page

This iterative design and development process was repeated until I had all the necessary UI for creating an MVP.

4 Discussion & Conclusion

There were several important lessons I learned throughout this process:

• Firstly, formalising a rigorous approach to the UX design process helps identify opportunities for improvements in what you may think is a problem and/or solution. It can also help you see implicit biases you might have, and having a structured methodology can force you to think outside the box.
• Also, I found creating user flows and wireframes useful because I used to waste a lot of time trying to go straight into developing UI in Flutter, only to find out later that what I developed would not work because it did not satisfy a crucial part of the user experience.
• Last but not least, I learned that it is important to know when to step outside the UX design framework in consideration of the time and resources available. As a one-man team for design and development, there were times when I had to acknowledge that I needed to skip some steps in the design checklist and prioritise more important tasks.

I hope that this article was an easy read for you and you’ve gained some insight into Google’s UX Design framework.

I’ve just released this app on the App Store and Google Play for open testing and I’m looking for user feedback, so I would appreciate it if you are ever keen on trying it out with your friends and family! You can find the app on Google Play and the App Store.