Waku Waku
Mobile and web development of an IMDb-like app for anime enthusiasts
Project idea
A popular anime blogger with a significant following recently approached our team. To monetize their blog, our client decided to create an online platform where anime enthusiasts can share their thoughts on movies and series, as well as discover new episodes to watch.
The client’s team plans to promote this platform via social media and engage with their existing blog audience to drive traffic and interaction.
Project idea
A popular anime blogger with a significant following recently approached our team. To monetize their blog, our client decided to create an online platform where anime enthusiasts can share their thoughts on movies and series, as well as discover new episodes to watch.
The client’s team plans to promote this platform via social media and engage with their existing blog audience to drive traffic and interaction.
Goal
Client’s goal
Our client has decided to attract users to the platform through gamification. Users can share reviews of films and series and engage in discussions. By participating in these activities, they earn Waku points, which can be used to level up their accounts. Those who earn the most points can compete for top spots on the leaderboard and become popular platform users.
The client wants to sell subscriptions. Users with a subscription will receive more Waku points and will be able to earn rewards within the app faster.
Our goals
Design and develop a mobile app for iOS and Android and establish an infrastructure capable of handling a high volume of users.
Additionally, we needed to replicate the entire functionality in a web application.
UI/UX design
Mind map
First of all, our team created a mind map where we listed all the app features and showed how the screens would be connected to each other. With the help of the mind map, we ensured no features were overlooked, all the team members were on the same page, and all users' needs were fulfilled.
Data model
Before moving on to creating a prototype and a full-fledged interface design, our designers thought through a data model. This application includes various entities such as users, movies, series, and reviews. Each entity is described with several characteristics and is connected to the others. The data model is a scheme that outlines these entities, their attributes, and their interconnections.
The data model serves as a crucial tool for both designers and developers, providing a clear understanding of how the future app will function. It significantly eases the handoff process from the UI/UX design stage to development. By visualizing the data flow across different parts of the app, it helps developers structure their code more effectively and bind data to UI components correctly.
Design concept
Waku Waku owners had only one design requirement for us — to create a dark and light mode of the interface — and provided us full freedom to experiment with branding and UI elements. Our design team has prepared a design concept to present our vision of the application’s UI and approve it with our client.
Color palette and typography
For this application, we chose a vivid pinkish-red shade as an accent color. We think it nicely complements the bright nature of this app and can be associated with Japan, the anime’s country of origin.
The interface displays a lot of text information. To make it easier to read, we chose a clear san-serif font that doesn’t make the interface look noisy.
Outfit
Prototype
We have also created a clickable prototype for the entire Waku Waku project in Figma. When creating it, we paid extra attention to non-standard flows and animations, such as the feature for swiping movies on the first screen.
Prototype brought several key benefits:
- We agreed with the client on how the final product should feel
- It would allow us to save resources on development since the prototype makes it easier for engineers to understand how the product should work
- The prototype could be shown to investors to draw new funds
Branding elements
Apart from building interfaces, we usually help our clients with branding elements. We offered several variants for the platform logo, however our client wanted something that would be closer connected to Japanese culture.
We then presented our client with several other logo sketches. The client selected a logo designed to resemble the banners typically seen on Japanese streets, evoking the country's rich culture for users.
Creating comprehensive design documentation
During our time on the market, we have accomplished many design projects and established our design system. It’s a collection of UI elements ready to be customized for each design project. With its help, we can design interfaces faster.
Variables are one of the techniques we use in our design system. They are dynamic elements that can store values and be tied to different design components. For the Waku Waku project, we have created sets of variables for typefaces, spacing, roundings, paddings, and a color palette.
Let us explain how variables work using the example of a color palette. Each color is tied to the status like primary, secondary, background, or any other. When the color is changed in the table of variables, it’s automatically changed across all the design mockups. This was especially convenient for us when we created two color modes for the Waku Waku app.
We needed to design one mode and then implement variables to change the colors for another mode automatically. We usually add the table of variables to the design system to streamline the design and development processes.
As the design process goes on, we gather a UI kit. The UI kit is a set of all UI elements used in the interface mockup. We always hand the UI kit to the clients, so they can keep scaling the interface design and keep it consistent. This can be especially helpful when the client wants to keep working on the project with an in–house designer or other design contractor.
Development
We helped our client pick the tech stack that best suited the needs of this project. Together we decided to develop the mobile app with React Native so it could be launched on both iOS and Android from one shared codebase.
Third-party integrations
Data provider
Waku Waku platform displays a lot of information about anime movies and series, detailed information about episodes as well as stories of voice-over actors. To ensure accuracy, we integrated with AniList, which provides regularly updated anime databases. AniList's free API tier is both convenient and cost-effective. Before stopping with this variant, we changed several other information providers upon our client’s request.
Authentication
We used Auth0, a technology for enabling authentication with different methods. With its help, we allow users to sign in with email and password.
Email service
We integrated Mailgun into the app to handle email communication. This allows the platform owner to efficiently send verification emails during the registration process and provide secure password reset options for users.
SMS service
The client also required us to integrate the app with Twilio, an SMS service. With its help, the business owner is going to send verification codes to users and send them subscription reminders.
Handling large amounts of traffic
Community apps like Waku Waku usually have to deal with a large influx of users, that’s why they need robust infrastructure that can stand it. To solve this issue, we deployed infrastructure using the AWS cloud service provider.
Community apps like Waku Waku usually have to deal with a large influx of users, that’s why they need robust infrastructure that can stand it. To solve this issue, we deployed infrastructure using the AWS cloud service provider.
During our work, we also used Kubernetes, which automatically manages and organizes our services, ensuring they run smoothly. Additionally, we utilized CloudSQL or RDS databases that can handle lots of users accessing the data simultaneously without breaking down.
Implementing an effective search mechanism
This platform offers detailed data about anime episodes, including genre, rating, release date, name, illustrator, and more. To help users easily find episodes using any of this information, we incorporated multiple filters into the interface and implemented them with Elasticsearch. This technology supports faceted and full-text search, enabling users to filter by various attributes, search using synonyms and word stems, and benefit from relevance scoring.
Creating storage for data about episodes, ratings, and reviews
To store all this data, we used the PostgreSQL database. To make sure the information is quickly accessible when users need it, we also used Redis to cache, or temporarily store, frequently accessed data. This way, the app can provide users with the information they search for faster.
Key platform features
Two types of users usually use IMDb-like services. One of them is searching for movies and series to watch, and others like writing comments and rating movies. When working with this platform, we made convenient functionality for both user groups.
Home screen
The main screen displays sections for top-rated anime, reviews, and themed episode compilations. This setup enhances navigation, allowing users to access any app section directly from the main screen.
At the top of the screen, there is a compilation of episodes provided by service owners. We designed it in the form of a card deck. Users can swipe banners in the compilations as if they were cards. This interactive feature makes the app more engaging and fun to use.
Movie screen
The movie screen presents detailed information about each anime episode. The number of likes, comments in the discussions, reviews, polls, and users who watch the episode are presented in the form of icons and reflect how popular the anime episode is.
To help users remember which episode of the season they stopped at, we added a reminder in the form of a selector. When a user taps on the chosen season, the division of the selector enlarges and shows the episode the user stopped at.
Search flow
The app displays a lot of information and entities, which is why we sought to make the search flow extra convenient. All the cool search features were implemented with Elasticsearch.
To search for required episodes, users can use a search bar. They can search for episodes not only by name but also by quotes and key events from episodes. This is especially useful for users who remember specific fragments but cannot recall the title.
The automatic error and typo correction system makes the search results more accurate. For instance, if a user enters a query with a mistake, the system suggests the correct option.
We added advanced filters for genres, actors, illustrators, directors, and release year, enabling users to find suitable movies or series more quickly.
More than that, users can use personalized recommendations that are created based on reviews they leave and discussions they participate in.
Watchlist
Users can save the movies and series they plan to watch on the watchlist. Each time they watch something new, they can update the information in the watchlist and see their progress on each saved item.
Reviews
Any user can write reviews and rate the episodes to express an independent opinion about a movie or series.
On the episode reviews screen, users can see how many positive and negative reviews have been left for an episode. Positive and negative reviews are highlighted in different colors for easier navigation.
Episode discussion
Users can discuss episodes with each other to earn in-app points. We provided the opportunity for users to create threads and comment on them, similar to Reddit.
Polls
Users can discuss episodes with each other to earn in-app points. We provided the opportunity for users to create threads and comment on them, similar to Reddit.
Gamification
When users write reviews, participate in discussions, and rate the series, they receive kudos Waku points.
The users who received the most Waku points and have the highest account level can compete with each other on the leaderboard.
Users who buy a subscription can earn Waku points and build up the level of their accounts faster.
The users who received the most Waku points and have the highest account level can compete with each other on the leaderboard.
Users who buy a subscription can earn Waku points and build up the level of their accounts faster.
The users who received the most Waku points and have the highest account level can compete with each other on the leaderboard.
Users who buy a subscription can earn Waku points and build up the level of their accounts faster.
