Justine F
Product Designer | UX Designer

learning through gamification

NATIVE MOBILE EDUCATIONAL GAMING DESIGN

AVENTURA IS A NATIVE MOBILE DESIGN FOR A LANGUAGE LEARNING GAME

AVENTURA IS A NATIVE MOBILE DESIGN FOR A LANGUAGE LEARNING GAME

project overview

Project Scope: 3 weeks
Client: Ktunaxa Interactive 
Teammates: Enrique Soler and Joseph Chin
My roles: Lead Designer, Project Manager, User Research, User Interface Design, Prototyping, AB Testing
Tools: Figma, Mural, Notion

CONCLUSION FROM AFFINITY MAP CREATED ON MURAL

CONCLUSION FROM AFFINITY MAP CREATED ON MURAL

research

User interviews were conducted on people who have played RPG games, mobile games, and have learned another language. We asked these users about what they liked, didn't like, wish they did differently, and what their favorite experiences were.Through affinity mapping we were able to find commonalities.

solution

We found the most effective and engaging way users learned another language was through interaction. We also found that the most engaging games were ones that were progressive, customizable, and allowed them to play with other people.

We believe that designing an interactive RPG game paired with storytelling would help preserve their heritage.

JOURNEY MAP CREATED ON MIRO

JOURNEY MAP CREATED ON MIRO

plan 

Based on our interviews, we created a persona, Benjamin, who we designed our game for. I created a journey map of his current experience learning a language in college. The journey map shows the different stages in how he feels about his skill in this language. Benjamin felt he was the most engaged through interaction with other people using the language.

USER FLOW CREATED ON MIRO

USER FLOW CREATED ON MIRO

user flow - game progress

This user flow shows the different lessons on how to learn words by completing missions.

When the missions are completed for that level, different features are unlocked for that user.

Another point that was made in our interviews, was that users’ favorite games involved customizable features and complex paths in the game based on different options they were able to choose throughout the game.

As you can see, Ben completes each mission in level 1 and unlocks level 2 and is able to pick an animal for his avatar.

He then goes through level 2 and when he completes those missions, he unlocks level 3 and gets to choose colors for his avatar.

native mobile educational gamification app design

user flow - missions with friends

Since we know users need an interactive way to learn a language, we added in the feature of playing missions with friends.

In mission 1, you can see how to challenge a friend on that lesson. 

native mobile educational gamification app design

style guide

When we were creating our style guide, this hummingbird photo was our inspiration. The ‘nature’ of the game’ involved being outdoors and with wildlife. We felt this was ‘earthy’ and playful.

We wanted to keep the font styles familiar, simple, and easy to read. Again, we wanted to keep the color scheme earthy and soft. Easy for the eyes to keep the user engaged.

For our UI Pattern, we created a pattern library of commonly used items that we could pull from. The red dot is used throughout the game and indicates a newly acquired word and a new item in their inventory. We decided on the hummingbird logo because the game involves the use of animals as avatar symbols for each player.

native mobile educational gamification app design
VENN DIAGRAM TO CONCLUSE A/B TESTING CREATED ON MIRO

VENN DIAGRAM TO CONCLUSE A/B TESTING CREATED ON MIRO

a/b testing

During the process of creating our sketches, we realized there were many layers to the game as far as flow, so we all decided to take on different parts of the game to start designing. When we reviewed each other’s wireframes, we noticed a conflict in our screen orientation. We had screens in landscape and portrait mode. We didn’t want to go further in creating additional wireframes until we knew what direction we wanted to go. So, we made a quick decision to conduct AB Testing to figure out what users preferred for a mobile language game.

We had them go through a language mission and through the ‘my profile’ flow in both landscape and portrait mode then asked them how they felt about the map, chatting with friends, language lessons, and game play in portrait and landscape modes We also asked them how they felt about screen orientation switching throughout the game.

AB Testing concluded that users felt more engaged when learning a language through a mobile app on portrait mode and felt inconvenienced to have to switch screen orientation throughout the game.

We then continued to design further in portrait mode.

INTERACTIVE PROTOTYPE BELOW

PROTOTYPE - GO TO 'P5 PROJECT' TO VIEW IN FULL SCREEN