Educational app – Pugg

Interactive educational app - Pugg

Micro-learning app for university students to study in a fun, gamified way. By challenging leaderboard & competing with each other.

About project

About the company

Pugg was founded by a student and two professors from a university in Norway. Combining their knowledge and effort on how to make students study more effectively and fun. They developed quizzes and competitive games based on academic textbooks to simplify exam preparation and learn things on the go at your convenience.

About project

Projects tasks

The client came to us with an iOS native app and an incomplete Android app, with a minimal and an outdated design. Therefore, we made a decision to design & build everything from scratch using Flutter as core technology.

Designed a beautiful and interactive interface using Flutter

Design of a landing page

Developed two unique game mechanics with complex backend

UI/UX design process

How did we start?

The client came to us with a working iOS app and an idea on how to make this better and more engaging for the end user. They trusted us the app visuals, development and interactivity giving us full creative freedom. Since this platform is not a regular learning app but a interactive platform with game design elements, we had to think out of the box. The task was also personally interesting for one of our designers, who recently completed university studies herself. It all began with a competitive analysis, exploring the field and various solutions. This required us to meticulously plan many details and create unique elements, such as a special hero character.

Unique branding and engaging onboarding animations

One of the most important and challenging parts of the design process is onboarding, as its clarity and appearance form the user’s first impression. If it’s poorly executed, users may not want to continue using the app. Our designer created a delightful interactive onboarding experience in the form of a chat, where users are greeted by a cute cat named PUGG at the very beginning. PUGG asks all the necessary questions in a gamified way. After that, PUGG shows you how to use the platform using your answers, making the onboarding process quick and seamless.

Unique flashcards for memory retention and error correction

To make it easier for students to progress, we developed special flashcards (based on Swipe mechanics, which are so very familiar amongst young people) for better memorization and mistake correction. That way students can clearly see what they need to review to successfully pass the exam.

Play with friends, learn, and motivate others

To make learning even more fun, our team has created two games for playing with classmates. We've crafted the gameplay mechanics and a unique interface to make learning both enjoyable and effective. “King of the Hill” where users answer questions to climb to the top of the leader board and “Duel mode” where students can challenge their classmates and peers to find out who knows the topic better. For any achievement, whether it’s a won duel or a perfectly answered topic, you receive a personalized card with your name and result, which you can easily share with your friends on social media.

Development process + features

Game state management

The challenge was that, unlike the backend which automatically detects events like a player exiting the game, Firebase does not offer this capability out of the box. Therefore, our developer had to plan for every possible scenario of two people playing simultaneously, such as determining what happens to one player when the other exits the game and etc., and write the corresponding action code. Acting as both frontend developer and backend architect, he focused on structuring Firebase effectively.

Custom sharing cards

We used widgets for creating custom cards to share quiz results with friends. Each card is a separate widget with individual parameters, rendered and then converted into a card for the user, leveraging Flutter components.

Games mechanics and database architecture implementation

In “King of the Hill” game mode, users are tasked to answer as much questions as possible to stay on top, starting with 3 lives and earning bonus one every 50 questions. For each correct answer they get additional seconds, the longer you play, the higher your score. In Duels, users can challenge classmates. Challenges included synchronizing duels and ensuring real-time result visibility. An efficient database structure was designed for data storage and retrieval, ensuring real-time updates. Also, created a timer that updated based on specific game scenarios. The timer could count down or replenish, requiring meticulous logic to handle all possible scenarios.

In-app purchases implementing

The app itself is free, but to unlock specific quiz topics and lessons permanently across all devices, users need to purchase them. Our team implemented in-app purchases with support for Google Pay and Apple Pay. The primary challenge was ensuring that purchased quizzes remained accessible on different devices under the same account. Due to limitations in Apple and Google store internal purchases not retaining data, we devised a Firebase data storage structure to securely store all user data.

Summary

Outcomes

Learning has become more convenient and cost-effective, with no more expensive and heavy books.
Learning & saving your progress on the go, at your own pace, everywhere.
The client was so impressed with our work that they also requested us to design the landing page.

Successfully completed

Experience the innovative learning app PUGG by downloading the app here. Discover how interactive learning can transform your educational journey!

Let’s build products together!