Entertainment and media
Our client’s request
Our client, Oksana Zhukova, the Alias app founder and COO at Steelkiwi, was planning a farewell party in honor of her colleague. All the guests, including Oksana, wanted to do something special for their colleague. Coincidentally, the party fell on St. Patrick’s Day. So Oksana and the other guests prepared special cards with St. Patrick’s Day-themed words that they needed to guess in teams. When creating the game, Oksana noticed how much time it took her to prepare and print out the paper version.
It dawned on Oksana that she could create a word game app. She knew of many games such as Alias and Charades in which players guess words. But most of them are in English, so people who don’t know English can’t play them. Developers can’t come up with good word sets when they develop word games in different languages, but native speakers can. However, existing apps don’t allow users to add their own sets of words.
Oksana wanted to build an app that would contain not only themed words but a feature that lets anyone create their own word sets in any language and make them available for all.
Games can take us to any world or state of mind. They are also a means of having fun, building healthy competition among players, and letting people elevate their spirits.
Children and adults alike engage in word games to stretch their thinking and get intellectual exercise at parties, picnics, and other events. Word games improve brain activity, increase vocabulary, and develop social skills.
Paper versions of famous word games like Scramble and Alias can be quite big and expensive. They can also require a surface to put the game pieces on. What’s more, people can lose game cards or game pieces can get damaged. However, if a person has a digital game, all these inconveniences are cast aside. They can play anytime and anywhere using a mobile device.
The main idea was to create a design with a vision for Alias, a well-known word game. We provided a modern style with abstract forms to make the game recognizable. The Alias app is unique in letting users create their own word sets, play with them, and share them with the whole Alias community.
We were looking for fresh inspiration for the app’s design. The lava lamp became our main inspiration for every screen and animation. We chose a calming lava lamp effect while adding bright tones to every UI element.
The most important screens in the app are themes, the card screen, and settings. Instead of common screens with cards, we used another approach to the game. We designed a switch screen with two buttons (skip and done) to let players take actions faster and save time in the game. The settings screens give players freedom by letting them customize the game the way they want and play by the rules they’ve set.
To write styles, we used the CSS Stylus processor.
Canvas, the HTML5 element, is perfect for creating beautiful animations, so we chose it for our landing page. The interface of the web service where users can create their own sets is multilingual and pulls up the input words from the backend.
Our main purpose was to create a reliable application with the best user experience. But behind a good UI, we needed to have a system that could survive under high load. Since Python has rich built-in libraries that cover working with files, numbers, sequences, sockets, and testing tools, we chose it for development.
To keep code clean and have access to high-level classes, we went with Django. What’s more, Django has an extensible architecture and template engine and supports object-relational mapping, URL handling, model entities, and different database backends simultaneously. With all of this functionality, we were ready to start.
The Django REST framework can be used to create a REST API client for working with iOS and Android apps as well as single-page applications. With Django REST, we were able to develop our system independently within the frontend, backend, and mobile teams.
Every web application that manipulates data should have persistent data storage. For our purposes, we chose PostgreSQL. PostgreSQL has great documentation, which is important during integration. With Alias, we need to manage large data collections. We need to save data, retrieve it in different forms, alter it, and search through existing records. PostgreSQL supports full-text search, transactions, and extensible data types (JSON field, Array field, etc.). Thus, the choice of database was rather obvious for us.
For background tasks, we went with Celery and Redis bindings. Celery is an asynchronous task queue based on distributed message passing. We used Redis as a broker. These technologies allowed us to reduce the system loading time and improve user experience.
Support for multiple languages is based on Django’s translation system and the get text Python package, which can work with different web frameworks.
We needed to use a library that would save development time and ensure the Android app worked seamlessly. Picasso 2 was the perfect choice for us. This library allowed us to avoid loading images from the internet every time the app loads. The library keeps images locally, so there’s no need to make additional requests to the server. This saves traffic and lets the app be more autonomous. In other words, even if there’s no internet connection, an image will still load.
Paper DB, a simple yet fast object storage option for Android, allows us to store the game’s settings, temporary data such as the word set a player is using at the moment, and the current state of the game if the program is suddenly closed.
Since the client and server interact through an API, we chose Retrofit2. Retrofit2 is used for most requests to the server, such as for getting the set versions and the sets themselves, updating sets, and uploading the data archives. Additionally, Retrofit2 has a convenient interface to describe HTTP requests, which allows us to easily describe the type needed (GET, POST, etc.) to receive or update the state of sets.
We needed to track events in the user interface, such button clicks and events generated by the timer. Using RxKotlin, we can subscribe to events generated by Retrofit. Therefore, we can process the app’s behavior and save or display data in response to an error or successful operation.
We also needed to detect the reasons for crashes, so we went with Firebase Crashlytics. Data on every crash that happens while a user is interacting with the app is sent to the Firebase account for further analysis.
To store sets, we used Room, which allows us to filter sets by game type and language and receive them after a request has been sent. This library gives us a convenient wrapper to work with the SQLite database.
The Alias game for iOS is written in Swift and uses the Model–View–Controller (MVC) architecture plus a service-oriented architecture. Since the app needs to store data such as words, we used Core Data as a native persistent framework.
The most exciting part of the app is the animations in a charming and sophisticated lava lamp style. The drawing is completely implemented in code without third-party frameworks, which results in almost 0% CPU usage. Animated bubbles on the Game Type screen and Game Level screen are made with Adobe After Effects. For this, we used the Lottie framework. Since Lottie doesn’t support blending modes, we split the animation and implemented it by applying a compositing filter. A lot of UI elements are custom subclasses of UIControl, which enabled us to create smooth interactive animations.
It was a really fantastic experience to work with such a dedicated team. Every new idea for Alias was thoroughly discussed with the team and each team member provided significant feedback as well as ideas on how to make the game better. The stunning result is the great and fresh version of Alias available on the Google Play Store and the App Store.