Passionate UX Designer with keen eye on minimalism
Screenshot 2019-03-11 at 02.10.37.png

Gamifying learning through augmented reality

At Denmark’s largest hackathon for students, two developers and I created a team-oriented treasure-hunting game that combines augmented reality and LEGOs to challenge pupils in various disciplines. And we won!

 
 

The Background

Client
LEGO Education

Context
Hackathon

Date
Mid-2018

Duration
36 hours

My contributions
Concept development · mockups · prototype · brand design · facilitation · client pitch

Product
Concept and prototype for augmented reality game

 
 

Challenge

As Denmark's largest hackathon for students, AUHack invites students to complete cases from various IT companies. As one of the case contributors, LEGO Education’s case dealt with shaping the education of tomorrow. More specifically:

Create a fun and engaging learning experience combining LEGO products with other technologies or domains to explore new opportunities and innovate the world of education (source).

The video below summarizes AUHack 2018.

 
 

 
 

The Process

The process was based on traditional brainstorming session followed by a strong planning session because of our limited time.

 
 

Brainstorm

Given that we didn’t have more than the weekend and that we were only three people in the group, we realized we needed to come up with a realistic plan.

Our first step involved a traditional brainstorm session including five minutes of individual noting on post-its. After sharing these notes, we then decided to brainstorm the various concepts which led to a chaotic discussion with the whiteboard as a victim of our ideas. 😅

We took our ideas and turned categorized them intro three groups.

After heavy discussion, we decided that we wanted to create something that not only demonstrated a cool technology. We wanted it to be an entire game from start to finish that was well-thought out, and we wanted to use game rules and visual materials as a way to use storytelling of the game for the jury. After some time, we settled down on a treasure hunting game that would utilize our learnings from the augmented reality workshop in Unity.

 

Planning

Then, we defined key tasks and started working throughout the weekend (while still having fun! It’s a hackathon after all). While the others focused on the development of the prototype, my role was on the experience and the design of the game.

IMG_1622.jpeg
 

My role

My role included the following tasks:

Gather insights

  • Talk with the LEGO Education jury to juice out key insights about the target group

Game Design

  • Create game rules

  • Define challenges

  • Think the product into the schooling system

Visual Design

  • Decide on the brand and visual style for the game

  • Stickers for augmented reality scanning

  • User Interface

  • Banner for presentation

  • Challenges

Presentation

  • Prepare pitch

  • Print print material for when judges would come and check out prototype

 

 
 

The Product

Our product includes a game concept, visual materials, and a working augmented reality prototype.

 
 

Game Concept

The game is based on a combination of treasure hunting game, team-playing, technology, and educational material as challenges, and gamification. Use the step-wise explanation below to understand the basics of the game.

We wanted to incorporate principles from gamification so we added leaderboards, limited time, and thematization through LEGO characters to enforce playfulness and joy.

 

Scalability

In an effort to make the game scalable for multiple difficulty levels, we also incorporated some added elements to the concept. First of all, the game does not run by itself. It requires a teacher to spread these challenges on various physical locations and mark them on the map. In that way, regardless of physical location and depending on the desired physical activity, teachers can use location as a way to manipulate the game.

 

Logo & Banner

The banner was designed to be very simple, yet fun and inviting. To get a feeling of how people react to the banner, I would stop random people from the hackathon and ask them to tell me their initial thought after showing the banner. After they had agreed, I’d turn my laptop screen and show them the banner and logo, and almost all of them would say “I don’t know what this is, but I want to play it!”.

Screenshot%2B2019-03-11%2Bat%2B02.01.36.jpg
 

AR Stickers

Not knowing augmented reality technology, I first made these simple LEGO blocks that would be used to enable AR technology.

Artboard2.png

But for some reason, our Unity prototype could not recognize the blocks from each other. After a quick discussion with our AR expert, we learned that a hexagon was easier for the camera to read and that multiple high-contrast colors needed to be present. Thus these stickers were made instead.

Artboard.png
 

Challenges

Based on AR’s possibilities within Unity, we idea generated 9 different styles of challenges. Some include more challenging puzzles like building geometrically correct triangles and using match and LEGO to get through a maze whereas others are more easy and is about counting the amount of LEGO the children see.

These challenges appear as augmented reality when kids scan the AR stickers.

These challenges appear as augmented reality when kids scan the AR stickers.

Very interestingly, 1.5 months after AUHack 2018, Apple released ARKit 2.0 which pushes the possibilities with AR beyond the technology we used for our concept. In fact, LEGO Group showcased how they adopted AR to let kids engage with LEGO in new ways. Had we had this technology, we would be able to use LEGO block combinations instead of stickers as a way to enable AR interactions.

See Martin Sanders from LEGO Group showcase how they use ARKit 2.0.

 

Mockup of UI

The interface had to be super simple for kids and even more simple so that the jury who would have less than 5 minutes to evaluate the concept be able to understand how it would work. Furthermore, we did not have enough time to include all of these features in our prototype so therefore we just made a mock-up as a way to explain the concept.

The interface consists of an initial welcome screen, picking a team, and then the game-play screen with three tabs:

  1. The first tab allows access to the maps where kids can see where the challenges are located.

  2. The second tab takes them to the AR camera that is used to scan stickers.

  3. The last tab reveals leading teams.

  4. In our prototype, we wouldn’t be able to show that we intended the AR to show leaderboards and

Note, because the purpose of the mock-up was to showcase the concept, simplicity was preferred over usability. There’s a lot of things “wrong” with this interface, and if it was to be made into a real app, it would require heavy changes. However, for demonstrations purposes and following our storytelling, this mock-up was perfect.

I mean, a normal app would need some login, synchronization, settings, among other things.

 

Prototype

While I worked on the above, Nicolai and Mikkel had finished the prototype. See a demonstration of it on 2 out of the 4 challenges we managed to implement into the prototype.

 

 
 

The Reception

We won 1st place in LEGO Education’s Challenge, and 2nd place for the overall hackathon.

Receiving LEGO as gifts and being told we were invited to LEGO Education in Billund to visit LEGO House and demonstrate our concept for teams at LEGO Education.

Receiving LEGO as gifts and being told we were invited to LEGO Education in Billund to visit LEGO House and demonstrate our concept for teams at LEGO Education.

 
 

LEGO Education

In LEGO Education’s Challenge, we won 1st place. According to the jury from LEGO Education, we won because we created a full concept and not just a cool technology (which we also made). We were also complimented that we had incorporated insights about the US market and defining the game as a tool for teachers to use in schooling. In other words, we were complimented for thinking the entire user journey for both kids but also teachers.

 

AUHack Jury

For the entire hackathon, we won 2nd place. We were complimented on our design thinking aspects of the products and similar to LEGO’s comments, thinking about the entire user journey was also a plus. The jury for the entire hackathon consisted of university professors from various educations including Digital Design.

 

Visiting LEGO Education

Because we won the case, we were invited over to LEGO Education in Billund to showcase our concept and demonstrate the prototype. This picture was taken with the Front End Innovators team. It was received very well, and they thought it was very inspiring to see a combination of play, activity, education... and LEGO.

The feedback we received was very positive, but even more interesting, they complimented the concept of being so finished and ready for production.

Nicolai demonstrating our prototype to Vice-President for Front-End Innovation at LEGO Education, Henrik Nonnemann.

Nicolai demonstrating our prototype to Vice-President for Front-End Innovation at LEGO Education, Henrik Nonnemann.

 

 
 

The Conclusion

It was a great experience. Especially collaborating with people from other educations and together creating a product that not only wins the case but also brings smile and curiosity to the front-end team at LEGO Education. We had an amazing experience and we were all satisfied with the process and the result, but I’d love to get the game and the prototype out in a school and test the game and re-iterate based on learnings.