Denny Al Farisi

HIRE ME

Increase Active Users with Story-telling Gamification

Research
Illustration
Interaction
Gamification
Q4 2022 | Learning Management System
NDA
gamification-ship
gamification-island
gamification-treasure-chest
Due to NDA, I only share process of creating and implementation of gamification.
INTRO

We started from learning only platform

It was began after our first version of LMS (Learning Management System) released. Marketing team is rapidly promoting the app to schools and exhibitions, and we aim to increase our active users, and interactive experience and encourage kindergarten and elementary students to spend more time on our platform.
Just an learning activity platform
Just an learning activity platform

We have some challanges

How do we create a interactive learning and mini-game without disrupting the main purpose, “Learning”?
Encouraging students to spend their time on the platform is our main purpose. But, how to create a “Game” that is not for playing only? We don’t want students use their time to only playing game, they need to finish the task, homework.
Cooking continuous story-telling gamification
Making an interesting story of mini game especially for kids really challenging
Make an Illustration that can interactive
It’s my first time to create an interactive animation. I had some difficulties before finally understanding that I need to separate static and moving assets.
RESEARCH

Gamification has similar components and patters

After a few hours of trying some apps and trying playing games, and chitchatting with game-player friends, I got similar patterns and components that gamification does.
Gamification components
Gamification components

Kids like interesting story

Since our end-users are kids, I tried to find an interesting story to have them doing an exploration.
Gamification components
Gamification components
CONCEPTS

Finalize concept and iteration some flow

I was influenced by some cards like gamification made me generate Concept #1 and after some iterations and discussion with Engineers and Users, the final concept is more likely a “Real Game” but still implementable by our team.
Mini game concepts
Mini game concepts
Decided to make a continuous story and adventure, avoiding boring stories for kids. Then, created some different maps for them.
Final Concept - Limitless Adventure
Final Concept - Limitless Adventure
ILLUSTRATE

Sketching and Animating

My first mistake in illustrating directly to high fidelity after knowing the concept made the production time take longer. Then, I changed the flow, starting with sketching, creating them with a black-and-white version, the coloring.
Image : Start from BW to Colored
Start from BW to Colored

Prepare animation assets

I prepared some assets for student to interacting with.
Animating Assets
Animating Assets

Implement concept with assets

The result, put them all based on concepts.
Image : Implement assets to concept
Implement assets to concept
The learning activity of course have reward system for make student spends more time to learn and get their rewards.
Get reward after completing
Get reward after completing a lesson
DEVELOPMENT AND ERROR

Trial and Error #1 : Animation in Figma Different with How Engineers Do in Code

We think, that creating animation in Figma using Smart Animate will be the same as when Engineers implement it. Engineers tried to change from asset 1 to asset 2 by playing the opacity, but it looked strange, like an ON-OFF bulb even though we already explored the timing.
Mini game concepts
Playing with opacity, but failed
Animating water, but failed
Solution
The moving water works smoothly after separating 2 assets (Ship and Water). To make the water move, engineers tried to loop the movement animation of water from the Left and Right.
Mini game concepts
Separated assets (water and ship)
Smooth shadow for moving ships

Trial and Error #2: All Assets Need to Coordinate the Position, If Not, They Cluttered in Different Devices

Done the implementation and have no issues with the engineer’s computer. However, after a test on my computer, we found a positioning issue due to different screen resolutions. 😧
Mini game concepts
Position in different devices
Solution
After some research and trial, the engineer guy figured out the solution by using the screen coordinate (X: 100%, Y: 100%). I tried to help by adding the layout grid and noting the coordinates and the line to make sure the main Ship would move to the correct position.
Mini game concepts
Positioning assets. (Red is X and Y, Blue is Sailing Route)

Responsive for Tablet and Mobile

Our team has limited time due to long trial and error. First, we decided to make 3 different aspect ratios, but finally, we dropped the tablet option and jumped to mobile due to the tablet having no significant result, and forced the tablet to the mobile view.
Mini game concepts
Desktop and mobile
Solution
After some research and trial, the engineer guy figured out the solution by using the screen coordinate (X: 100%, Y: 100%). I tried to help by adding the layout grid and noting the coordinates and the line to make sure the main Ship would move to the correct position.
IMPLEMENTATION RESULT

Mini Game and Learning Rewards

Student will have 2 resources to collect their rubies, from mini-game and learning completion. Earned rubies can be exchanged for any product at some convenience store that is already cooperating with us.
Collecting rubies from adventure
Training center before starting the adventure
Collect rubies from learning completion
Collecting rubies from adventure
Collect rubies from learning completion
LIMITATION AND FAILURE

Complex Animation is Hard for Implementation

My team told me about how it difficult was due to a lack of experience in animating. He spent a lot of time learning such as using anime.js, etc. But we ended up using the basic animation provided by Tailwind. Because of limited time and multiple discussions, we gave up using complex animation. However, the discussion helped me prepare a simple, not too complex one.
First plan : using animejs

Multiple Maps Unable to Develop

There is no time to trial implementation due to other issues (bugs and focus on improving the animation). Ended up with a little bit of changes in the flow and we added loading animation to exchange the first plan, travel to many oceans.
Multiple maps cancelled

Cancel the tablet and mobile view

Developing the responsive was no problem for us, but due to tight time and many failures, we ended up maximizing time delivery by sacrificing the tablet and mobile view and then developing it later.

There is a lot of Learning Points

Illustrate without Color will Increase Production Speed and Avoid Stagnant of Thinking the Colors

It makes me not focus on the color. Just design with black and white illustrations first till it looks clear, then give them the colors.

Understanding Your Engineers’ Limitations will Give You Image of Other Solution

Our company is generally working on SaaS apps. Gamification is our first experience, so much lack experience in this project. We decided to spend a lot of time discussing, trial and error between the Designer and Front-end engineers, which is necessary to understand the limitations and tackle the problem with alternatives.

Small Interactions Important!

The current result still has not enough small interaction, but I realized that there is more small interaction needed for example when the treasure box appears, maybe the box vibrates and looks “mysterious”. To be honest, I want to explore more at another time.

It’s been a long journey. Respect to the engineers and PM for feedback and the superb implementation. We had a lot of discussions, finding what we couldn’t and trying to solve the constraints in our collaboration. Hope we can improve it, or create better in the next projects.

BACK TO HOME