Quelle Histoire Aventures

Designing a gaming application based on augmented reality and geolocation, to teach History to kids through digital adventures.

Team

Baptiste Bérenger, Mélanie Defrance, Marion Mouchet, Rémy Sclippa, Marion Caron (me)

Role

Product management, UX, UI

Year

2018

Context and summary

Quelle Histoire Aventure was a project I took on with 4 other students while studying at Gobelins, Paris. Our client was Quelle Histoire, a French publishing company of books and applications teaching History to children.

We were to think of a digital solution using augmented reality that would playfully teach History to kids while driving their attention towards their real world surroundings.

After extensive user research that included online research, families interviews and shadowing in museums, we defined, designed and tested a concept: location based adventures where kids and their families are guided, challenged and rewarded by famous historical characters.

Using the Minimum Viable Product (MVP) that we produced, Quelle Histoire was capable of developing mobile applications for various locations such as the Louvre-Lens Museum, Paris and its surroundings, the Hérault department and the city of Rueil Malmaison.

I know case studies can be long to read so feel free to jump on a particular section of your interest with the following hashtags:

Research

Since we didn't have comprehensive knowledge about the learning and play preferences of kids, we chose to allocate a significant amount of time to investigate the subject. We identified five key areas to dig into, using both primary and secondary research methods to do so.

Kids and museums

Identifying and understanding families' behaviors during visits in museums.

-> online research / shadowing — we went to 4 museums and analyzed the families behaviors on site

Families' habits

Getting to know about families' habits when it comes to entertaining, playing and learning.

-> interviews — we interviewed 5 kids and their parents (1h30 / family)

Gamification

Identifying game mechanics that make an educational game attractive.

-> online research

Kids and screens

Understanding kids habits, parents rules and experts recommendations about screen use.

-> online research

Learning process

Determining suitable methods to enhance education for ages 8 to 12.

-> online research

The interviewed conducted with various families have enabled us to build two familial personas encapsulating our discoveries.

the catry family persona composed of 2 adults and 2 children
the catry family persona composed of 2 adults and 2 children
the catry family persona composed of 2 adults and 2 children
the biot family persona made of he father and his daughter
the biot family persona made of he father and his daughter
the biot family persona made of he father and his daughter

Design principles

Based on our discoveries, we established design principles that would guide us throughout the conception and when taking decisions all along the duration of the project.

Real world first

Players should not always be staring at their phone but observe their surroundings.

Real world first

Players should not always be staring at their phone but observe their surroundings.

Real world first

Players should not always be staring at their phone but observe their surroundings.

Contextualized & framed

An adventure should be related to its geographical environment and have a defined duration.

Collaborative

There has to be something in it for every member of the family.

Collaborative

There has to be something in it for every member of the family.

Collaborative

There has to be something in it for every member of the family.

Concept definition

Following the completion and presentation of our research phase to our clients, we started deliberating on the solution to be developed. In order to accomplish this, we engaged in numerous workshops to generate ideas.
Here are a few sketches I created during our "6 to 1" session.

6 screens drawn during the 6 to 1 workshop
6 screens drawn during the 6 to 1 workshop

We then converged and agreed upon the concept:
Quelle Histoire Aventures, offers adventures for families to be completed with their smartphones allowing them to (re)discover a city and learn History in a fun way.
The application is based on augmented reality and geolocation.

Each adventure is based on a main historical character and is set in a location intimately connected to them. An adventure has a defined journey and duration and is made of 6 to 10 quests.
Each quest presents a challenge that, if completed successfully, allows the collection of a character.

an adventure is made of 6 to 10 quests and each quest presents a challenge
an adventure is made of 6 to 10 quests and each quest presents a challenge

This is a glimpse into the usual user journey.

the user flow from the family deciding to go out with the kids to completing the Quelle Histoire adventure
the user flow from the family deciding to go out with the kids to completing the Quelle Histoire adventure

Concept validation

In order to validate our idea, we crafted an adventure about Charlemagne (150+ screens!), the famous French king recognized as the school inventor. Why him? Because in Paris, in the St Paul neighborhood, there are a lot of places related to him that allowed us to contextualize the experience.

the characters to be found in the St Paul neighborhood and their localization

Creating the prototype

We began sketching out low fidelity screens for the experience before jumping on the final UI.

low fidelity screens of the beginning of an adventure
low fidelity screens of the beginning of an adventure
low fidelity screens of the beginning of an adventure
low fidelity screens of a quest
low fidelity screens of a quest
low fidelity screens of a quest

We then created a prototype using Sketch and Invision —remember, it was 2018!— that families would use on our phones.
Below is a snapshot of a few screens.

adventure screen of question one with Charles Martel
adventure screen of question one with Charles Martel
adventure screen of question one with Charles Martel
adventure screen of question one with Roland de Ronceveaux
adventure screen of question one with Roland de Ronceveaux
adventure screen of question one with Roland de Ronceveaux
adventure screen of question one with Pépin Le Bref
adventure screen of question one with Pépin Le Bref
adventure screen of question one with Pépin Le Bref
adventure screen of question one with Childéric III
adventure screen of question one with Childéric III
adventure screen of question one with Childéric III
adventure screen of question one with Léon III
adventure screen of question one with Léon III
adventure screen of question one with Léon III
adventure screen of question one with Charlemagne
adventure screen of question one with Charlemagne
adventure screen of question one with Charlemagne

Testing it

Once the prototype ready to be tested, we handed it over to five recruited families (8 kids and 6 adults) for an hour-long test session in St Paul, Paris. They were to meet up with six characters during the adventure — four default characters, a bonus one and Charlemagne himself.

Throughout the test, we would follow the family, make observations and take notes. The participants' screen activity, facial expressions, and voices were recorded through the Lookback app installed on the phones we provided for the testing.

2 kids and their mum trying to solve a challenge to unlock Charlemagne
2 kids and their mum trying to solve a challenge to unlock Charlemagne
2 kids testing our prototype with their 2 mums following them
2 kids testing our prototype with their 2 mums following them
a child reading the phone's screen with her mum
a child reading the phone's screen with her mum
A mum and her daughter walking towards their next challenge
A mum and her daughter walking towards their next challenge

Learnings

The global appreciation of the concept was very positive — both kids and parents enjoyed the concept!

We still identified 2 main elements that could be improved:

Add 2 to 3 quests — the adventure was described as too short by most participants.

Adjust difficulty levels according to player's age (e.g., provide additional clues for younger participants)

Usability testing

We then tested our screens with five users in an ergo lab, to ensure everything was clear and usable (spoiler alert—it wasn't).
During the test we recorded the screen, the sound and the face of the participants. We also used an eye tracker device to follow where and what they were looking at in real time.

the phone used during the test displaying the onboarding screen
the phone used during the test displaying the onboarding screen
a user gong through the usability test
a user gong through the usability test
the eye tracking device used during the testing session
the eye tracking device used during the testing session

Learnings

We managed to identified a few areas requiring attention. Here are a few examples:

We redesigned the home page with a specific focus on the search bar, which the testers found confusing.

We changed the icon representing the length of an adventure (in kilometers) as some testers thought it represented the distance between their current location and the starting point of the adventure.

We revamped the layout of the trophies page where we used padlocks to represent achievements to be completed. Our testers perceived them as a bit "brutal" so we went on with a friendlier design.

Wanna play?

This is a sample quest we crafted for the Charlemagne adventure, in which the player has the opportunity to collect Charles Martel, the grandfather of Charlemagne...

Characters welcoming the player to the Charlemagne's adventure
Characters welcoming the player to the Charlemagne's adventure
Characters explaining how to start the adventure and where to go
Characters explaining how to start the adventure and where to go
Characters indicating the user that someone is around and will help them get to Charlemagne
Characters indicating the user that someone is around and will help them get to Charlemagne
A picture of the character to find is displayed on the screen
A picture of the character to find is displayed on the screen
Charles Martel pops up and introduces himself
Charles Martel pops up and introduces himself
Charles Martel gives out information about his life
Charles Martel gives out information about his life
Charles Martel gives users their first challenge
Charles Martel gives users their first challenge
What is the name of Charlemagne's father ?
What is the name of Charlemagne's father ?
the answer pepin is validated
the answer pepin is validated
Charles Martel congratulates the player
Charles Martel congratulates the player
Charles Martel is added to the player's collection
Charles Martel is added to the player's collection

Takeaways

Participating in this project was a truly enriching experience — our team was fantastic and the client put a great amount of trust in us.

I believe three key aspects contributed to this project's success:
First, we took time to plan our research phase, which allowed us to collect strong insights on multiple topics quickly.
Then, we conducted real-time testing of the concept early in the process which allowed us to validate our concept and thereby strengthen our client's trust.
And last but not least, however cliché and cheesy it may sound…we had fun while working on it!

Using the prototype that we produced, Quelle Histoire was capable of finding partners and funds to develop mobile applications for various locations such as the Louvre-Lens Museum, Paris and its surroundings, the Hérault department and the city of Rueil Malmaison.

Here is a picture of us in Montmartre, testing the application for Paris and it's surroundings.

us flashing a house to complete a challenge during the adventure tested
us flashing a house to complete a challenge during the adventure tested

'The whole team is extremely satisfied of this collaboration with the Gobelins students. The recommendation produced by the team will be used to find the first partners of Quelle Histoire Aventures.'

'The whole team is extremely satisfied of this collaboration with the Gobelins students. The recommendation produced by the team will be used to find the first partners of Quelle Histoire Aventures.'

Sébastien Lucas

Communication director — Quelle Histoire

This website has been designed and coded by Marion Caron

Copyright © Marion Caron, 2024