Histopia
Summary
During my minor Interface & User Experience Design my team, Red Panda was given the opportunity by our client YipYip to focus on creating a mobile application that formed the solution to bridge the gap between printed books and mobile devices.
We created Histopia as a solution to bring history to life in an interactive, educational and playful way with puzzles, quizzes, quests and interaction with each time's residents, the player moves through time to learn all about nature, racism, politics, diplomacy, and economics.
It was my responsibility to make sure the concept was made into a real product as far as possible. I developed the style for team Red Panda together with my team and did most of the 3D work. I also edited most of the videos because I had a little more experience with video editing than the rest of my team.
I couldn't be more proud of my team and what we accomplished during this minor. It was definitely worth the blood, sweat, and tears!
Assignment
"Bridging the gap between physical learning tools and a digital app with the aim to motivate high school students and to let them learn more efficient."
We needed to choose a target audience and establish a foundation so we could start thinking in concepts rather than simple ideas. To figure out 'who' and 'what' we first needed to some research. So the first weeks of our project we did extensive research by reading large reports and articles, interviews and a large-scale survey.
We came up with 3 different concepts. Each concept emphasized one aspect which came forth from our research. We chose history as our subject because most applications that are available today have something to do with math or grammar, but there is no application for history which lets students interact with different worlds in different times.
Concept 1: Gamification
A mobile game tied to the content of the history textbook that takes the user on a journey through different eras.
The user has to move through the world and talk to NPCs to gather information so they can answer questions correctly. By doing so, they progress through the game and can collect era related items.
"It's more fun than just reading and making assignments, it's better to do it playfully."
Concept 2: Augmented-Reality
Learning the curriculum of history books through augmented-reality and 360º videos.
The user can use the application to make history come alive by viewing important buildings and places through time, create and participate in trivia quizzes with classmates & augmented-reality and 360º videos.
"I would rather use it when it's a fun subject than when it's a boring subject."
Concept 3: Learning/Planner Buddy
A buddy who helps with planning and learning material from history books.
A character from the era of the textbook helps the student with planning, flashcards, practice tests & helps to study by answering questions. However, the most important function of the buddy is that he will help summarize chapters. The student reads the text and reads parts aloud which need to be included in the summary, and the buddy will save it in the app for much faster summarizing of chapters.
"It will always be better than just reading a book, but it shouldn't always be the same as this will quickly become boring."
Planning
Our final concept was a cleaned up and was a more realistic and achievable version of Concept 1: Gamification. A
Since we were going to make a game in approximately 8 weeks, we needed a tight schedule. Not only because it was included in the role of the concepter, but also because of my experience from my previous study, I made the schedule that in theory could save our whole minor from hanging in the balance between failure and utter failure. Should we be able to not die from a cardiac arrest because of the stress and sleepless nights, we might actually be able to pull it off.
We needed a story, wireframes, models, textures, rigging, lighting, animations, renderings, engine prototypes & to do a lot of testing. And so we began with the mindset to succeed or die trying.
The Team
Rianne Epping
As Interaction Designer, Rianne was responsible for the story, wireframes and of course the interaction between objects and persons.
Ivan Mašić
As Interaction & Visual Designer, Ivan was responsible for the story and wireframes together with Rianne, but besides that, he helped with the visualization of the wireframes.
Bryan Simonis
As Visual Designer, Bryan was mainly responsible for the visuals, but also did his part when we needed photos and videos.
Barry de Wit
As Prototyper, Barry was responsible for the prototypes and to make sure they were appropriately tested.
Christiaan van Leeuwen
As Concepter, Christiaan was responsible for securing the concept so it wouldn't alter too much in the process of creating the product, as well as to make a schedule and guide his teammates.
Process
We started out as just a few students put together, but soon after we would be known as team Red Panda.
The first weeks of the project we were still acclimatizing to each other. But when we finished our research and started doing the thing that each of us were responsible for, we found our way and just worked and worked as hard as we could. Because we had to use a space to work in with no sunlight or fresh air, we really needed to get out often, or we would die a slow death. By doing so, we hang out together a lot during the breaks. We'd buy some food and talked about projects and other things which often resulted in us finding new ways to solve a problem or to adjust a situation to our benefit.
Since I was the Concepter, I had to make a schedule and needed to guide my teammates. We were going to make a 3D game in Unity. I wasn't too familiar with Unity, but since I studied 'International Game Architecture & Design' I new a thing or two about the design process and the overall pipeline of games. That's why I created a tight schedule to make sure we would make the most of the time we had. Because of my previous study, I knew a lot about 3D modeling, texturing, etc., but my other teammates did not. So I had to give them a quick course so I wouldn't be the only one doing the 3D work. Luckily everyone needed to give a workshop during the minor. This gave me the opportunity to teach my teammates everything they needed to know during the minor.
Besides the planning and the apparent conceptualizing, I did a whole lot of other stuff. I gave a lot of input for the main menu and visualized it too. The overall style of the interaction visuals was also mostly created by me because it had to match the main menu. This was due to me having the most experience when it comes to Photoshop and the Photoshop layer styles. Because truth be told, the layer styles make up for 80% of this futuristic style we wanted to give to the buttons. This is because it matches the story. (I explain the story below in the walkthrough of the demo).
I was also responsible for almost all video editing. I created a whole particle animation which represents the earth (the particles behind the logo and on the loading screen). I edited the promotional video (the one at the top), and the main menu is also a video.
Gameplay
The video above shows a walkthrough of the demo. I will explain what happens in the following paragraphs.
The futuristic style is because the player, you, is actually a character from the future. For his graduation assignment, he has to go back in time to learn about history to prevent the society of the future from creating the same mistakes. The future character comes from a future utopia and has to learn how this utopia came to be and what humanity endured through history and all the horrible things they did to themselves and others.
When you open the app, you'll see a splash screen of the Histopia logo followed by the main menu. There you can choose to jump straight back into the game to the point where you were last time. You can also scan a code from your history book to unlock a new chapter and enter a new world. Your progress and settings can also be found here.
When you scan a new chapter or when you finish a level, you'll be brought to the chapter select screen, and from there you can choose a level to start. Each level can be completed in 3 different ways, ranking your completion from one to three stars.
Once you enter a level, you can interact with the world by just tapping where you want to go & tapping on characters and objects. The story of this level revolves around a family's farm. The father has to go into the army and has to leave his family vulnerable because they can't keep the farm running on their own.
Some characters ask you questions(with the '?' above their heads), when answered correctly these characters will give you reward like coins or other valuta. Other characters (with the 'i' above their heads) will give you information. This information can help to save the puzzles given to you by other story characters (with the '!' above their heads).
The level in the video requires the player to answer questions to gain coins & solve puzzles to gain artifacts (parts) which can be sold/swapped for coins later. When you have enough coins you can go to the bank and try to save the farmer family which you saw in the beginning.