How I built a Real-time Games Platform for Social Distancing, in a Month
At the end of March, with the start of the COVID-19 Social Distancing directives, friends and I wanted to have some fun and play card games over Zoom.
It was a struggle, with one guy having to be the dealer, and the rest having to try follow with difficulty. I thought: “there must be a way to play this with synced shared-screens, that manage the flow of the game for you”.
So I took a deep breath, and started building it…
Enter Ziago — a real-time social games web app for having quality time with friends and family you can’t meet in person, over video.
I had the domain from previous endeavors, and I knew I had to act swiftly. I needed to have an MVP (Minimum Viable Product) launched for testing with real users, in at least a month.
I took every strategic principle I acquired over the past 10 years of building and designing digital products and FORCED myself to heed them:
Leverage Platforms Where Possible
In the book, Smartcuts: How Hackers, Innovators, and Icons Accelerate Success Shane Snow explains how one of the best ways to build early momentum, is to leverage existing platforms.
For Ziago, I depend on Google’s Firebase for getting off the ground:
- Free SSL-enabled static server for hosting.
- Built-in Email, Facebook, Google, Twitter, etc. User Authentication.
- On-demand JS functions in the cloud for back-end logic, that can easily interface with your database, authentication, and hosting setup.
- A real-time capable non-relational database with Firebase Firestore, that has an SDK for most platforms imaginable.
- Generous free-tier quotas
I’m aware of some pricing and other constraints with Firebase that might come up in the future, but I’m going with the following philosophy:
Get the Momentum First, Worry About Scaling Later
Get the traffic, get the users and test interest, and only then worry about operating costs, maintenance, and monetization. Fry the big fish and the small ones will fry themselves? We’ll see… Getting momentum is a very big fish indeed.
Don’t go for Perfect, go for MVP
One of the most important strategies, and takes years to master. It’s unbelievably tricky to balance good UX v.s. getting to a functional MVP in time.
It takes time to learn the discipline to not want to create something perfect every time, to be OK with something that works, albeit without beautiful animations or transitions.
Know when to deprioritize a feature, know when to dig in and build it. I use the player/user experience as the ultimate decider. Would this feature make the game more fun and engaging? Nice to have or deal-breaker?
Aim for Testing, use the Results
I’ve launched the MVP as soon as possible to get some early users on it. This way I get early involvement and reactions from real people. Do they confirm all the assumptions I’ve made? Do they get stuck somewhere? I use these results from early observations to improve the app. These are big steps in the right direction.
Getting real people enjoying your app as early as possible is also a fantastic source of motivation to keep going!
Don’t Build from Scratch
Using existing templates, frameworks, and boilerplates is also using “platforms”. Choosing the right ones is paramount.
Vuexy and Vue
For the app UI, I purchased an admin dashboard template called Vuexy for the bargain price of $35. It comes with a fantastic set of UI components, neatly styled and production-ready. This saved me at least a month of dev-time.
It’s coded in Vue.js, which I learned a few years back. I also tried React and dabbled in Angular. For me coming from a jQuery background, the learning curve of Vue.js was unbelievably low.
I’m able to produce functional web apps at breakneck speeds with Vue, thanks to the brilliant people behind it, Evan You and team.
Don’t Design from Scratch
As a designer by trade, this is one of the hardest: To force yourself to not try be super original and start on a blank page. Chaos.
Use what is out there for inspiration!
- Landing Page: I collated a mood board will all my favorite designs from sites such as landingfolio.com and onepagelove.com.
- App UI: I used the Sketch design components accompanying the Vuexy template I purchased to design the games. It was challenging to stick to a design system already created before-hand, but worth it.
No time for Fancy Graphics? Leverage Stuff like Emoji and Free Design Resources
The app theme is fun and social, and everyone can relate to emojis because we all use it on a daily basis. That sparked the idea of using it to give the app some life. A fun, social touch that every modern OS supports:
For the logo, I Googled “free logo resources”, and modified a pre-designed illustration to suit my color palette and name.
Be Organized and Focused
New Ideas
When you get overwhelmed with new ideas, write them in a project diary, and ignore them — One of my favorite quotes from Steve Jobs:
“People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.”
I’ve had many epiphanies on how this concept could pivot. How people can just join and “play with anyone in the world”. Or how easy it is to “just add video chat”. Although these are all valid, they could sometimes be dangerous and make you stray off course.
Keep a backlog
Act as your own Agile product-owner, and diligently keep a backlog of ideas. Prioritize them by feasibility, time to build, and desirability.
Ziago
By the end of April, I had Ziago in a functional, MVP state with 3 games ready for soft launch!
On the first two weekends of soft launch, Ziago has seen over 1500 players and received some good interest and reaction. Plenty of motivation to keep chasing!
Ziago now has 8 fun games and counting. Not all of them drinking games, though, it’s busy expanding to family/alcohol-free games also!
Ziago is launching on Product Hunt soon… Be on the lookout, and remember to upvote!
Follow the Ziago journey on Twitter
I’m always open for feedback, would love to hear any ideas or comments on the concept/article.
