IPhone X shows Gamification UI

Web

18.04.2024

Gamification of the Learning-Fair App: Strengthening User Engagement through Innovative Game Mechanics

Lern Fair Logo

Since October 2021, typedigital GmbH has been accompanying the non-profit organization Lern-Fair on the exciting mission of realizing a digital learning platform that provides disadvantaged students with free access to valuable learning support.

Scoping Workshop
Research & UX

Services

<p>In order to enrich the existing Lern-Fair web application with the gamification approach, interdisciplinary expert knowledge and close collaboration are required. The collaboration included the following aspects:</p> <ul> <li>Gamification strategy workshop</li> <li>Research &amp; UX</li> <li>Agile project management</li> <li>Illustration of successes and rewards</li> <li>Interface design</li> <li>Web development</li> </ul>
The picture shows a workshop with Lern-Fair.
<h2>The challenge</h2> <p>To ensure that users experience a positive and exciting user experience in the long term and thus make significant progress, providers of digital platforms face a challenge.&nbsp;</p> <p>In the case of Lern-Fair, this challenge can be formulated even more concretely: To promote the reliability and motivation of students and helpers by making their progress visible and thus reinforcing their positive behavior.</p> <p>The solution approach that was pursued here is the implementation of gamification and storytelling. These were not to be developed as stand-alone features, but rather integrated seamlessly and intelligently into the existing system.</p> <p><img src="https://typedig.uber.space/assets/052a647a-7cea-4210-8978-0de02bb66bd2?width=5604&amp;height=3552" alt="Gamification Lern-Fair Tablet MockUp"></p> <h2>What is gamification?</h2> <p>The exciting concept of gamification introduces playful elements into non-game contexts. The aim of gamification is to influence the motivation and behavior of users and create an engaging experience.</p> <p>Gamification can be a real asset in the digital education sector in particular. It not only makes learning or teaching more exciting for users, but also offers incentives for long-term use and thus minimizes the user churn rate of the respective platform.</p> <h2>What advantages does gamification offer for learning platforms such as Lern-Fair?</h2> <p>The integration of playful elements such as records and rewards increases the motivation of learners to actively participate in the learning process and consciously pursue goals. This not only makes learning more interactive and entertaining, but also promotes long-term use of the platform. In addition, the individualization of the learning experience enables users to consciously track their personal progress and thus perceive successes more clearly.</p> <p>Receiving rewards and setting individual records not only increases the self-confidence of learners and teachers, but also contributes to a positive learning and teaching experience - an experience that wants to be experienced again and thus naturally contributes to the long-term use of the learning platform.</p> <p><img style="font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';" src="https://typedig.uber.space/assets/69b1a955-2103-4a8e-a9af-2bace2bdd84c?width=3036&amp;height=2120" alt="Gamification SmartPhones Belohnungen"></p> <div class="gatsby-image-wrapper gatsby-image-wrapper-constrained components__EmbeddedImage-sc-oakuy6-7 jusTSn" data-gatsby-image-wrapper="">&nbsp;</div>

1

Strategy workshop

<p>In a two-day workshop, the foundation for a successful project progress was laid by defining the underlying problem and project requirements. Additionally, initial solutions for an engaging storytelling of the gamification approach were developed and discussed in a co-creation session.</p> <p>On the second day of the workshop, usage scenarios were elaborated. Based on this foundation, discussions were held regarding where the goal and feedback system could be enhanced through rewards. Additionally, risks were analyzed, and possible countermeasures were documented.</p>

2

Research and UX

<p>At the outset, in close collaboration between Lern-Fair and typedigital, it was determined which fundamental user behaviors are considered positive and deserving of rewards.</p> <p>By analyzing the existing user flows of the learning platform, it was identified where incentives should be created. These incentives, known as nudges, promote certain behaviors such as punctuality in appointments or the creation of new learning offerings.</p> <p>It is important that users are not only rewarded for specific behavior but that the path to further achievements is clearly communicated. Thus, it is not just a reward system but a goal and feedback system that must be easily understandable for all users.</p> <p>Based on these findings, a conceptual framework was developed, serving as the foundation for technical and design considerations.</p>
UX Designer Johnny shows Marketing Manager Kalle something on the PC.

3

Development

<p>The technical concept of the gamification system was developed jointly with developers from Lern-Fair. It is based on an event-driven architecture and evaluates whether users have achieved successes based on specific events.</p> <p>Technologies used:</p> <ul> <li> <p>React Native for Web</p> </li> <li> <p>Node.js</p> </li> <li> <p>TypeScript</p> </li> <li> <p>GraphQL</p> </li> <li> <p>Prisma</p> </li> </ul>

4

Agile project management

<p>For project management, Scrum with two-week sprints was applied. This allowed insights gained during the project to be flexibly incorporated.</p> <p>Offering and invoicing were also sprint-based using the "Agile Fixed Price" model. This provided Lern-Fair with the security of a fixed-price offer combined with the flexibility to agilely change project goals or priorities.</p>

5

Illustrating rewards

<p>Based on a developed storytelling concept, visualizations were generated using artificial intelligence, providing an efficient foundation. These approaches were then manually expanded and supplemented, for example, with illustrations of the Lern-Fair mascot "Loki".</p>
<h2>Narrative and rewards</h2> <p>The achievements that can be collected on the learning platform are based on a user-friendly narrative.&nbsp;</p> <p>The protagonist Loki is an owl who accompanies learners and teachers in their learning progress. Loki goes on a journey around the world and for every success the users achieve, a Polaroid or - for a stage reached - a finished puzzle is unlocked.</p> <div class="gatsby-image-wrapper gatsby-image-wrapper-constrained components__EmbeddedImage-sc-oakuy6-7 jusTSn" data-gatsby-image-wrapper=""><img src="https://typedig.uber.space/assets/2d2e5ecc-20ec-43e1-975e-c2c85c9065d0?width=1944&amp;height=778" alt="Gamification Typedigital Belohnungen 1"></div> <div class="gatsby-image-wrapper gatsby-image-wrapper-constrained components__EmbeddedImage-sc-oakuy6-7 jusTSn" data-gatsby-image-wrapper=""> <p>In contrast to other learning platforms, learning on the Lern-Fair platform does not take place alone, but always together (e.g. as part of 1:1 learning support or group courses). This means that the rewards also promote collaboration between learners and helpers, which means that fundamental Lern-Fair values such as "community" are now also increasingly represented within the platform.&nbsp;</p> <div class="gatsby-image-wrapper gatsby-image-wrapper-constrained components__EmbeddedImage-sc-oakuy6-7 jusTSn" data-gatsby-image-wrapper=""><img src="https://typedig.uber.space/assets/c6ee63e5-e164-4a3d-baa4-e4cd188d09a3?width=2520&amp;height=1545" alt="Modal Neue Lernunterstuetzung der Gamification-UI"></div> <div class="gatsby-image-wrapper gatsby-image-wrapper-constrained components__EmbeddedImage-sc-oakuy6-7 jusTSn" data-gatsby-image-wrapper="">In addition to the collectable achievements, records can be set in the form of streaks. Punctuality, attendance, regular learning and participation in the community are tracked. This allows you to view your own peak values and incentivize positive habits.</div> <div class="gatsby-image-wrapper gatsby-image-wrapper-constrained components__EmbeddedImage-sc-oakuy6-7 jusTSn" data-gatsby-image-wrapper=""><img src="https://typedig.uber.space/assets/93a8b1e2-64c1-4d34-b224-5e15b48b6c29?width=2568&amp;height=1284" alt="Streaks der Gamification-UI von Lern-Fair"></div> </div>

Conclusions

<p>The integration of gamification into the existing Lern-Fair learning platform is a successful measure to promote user engagement and thus maximize the duration of use and learning success. Teachers and learners now use the offerings more reliably and with greater motivation, as their progress is made visible to them and they are encouraged in their positive behavior.</p> <p>The developed user interface consciously encourages behaviors that are in line with the core values and community spirit of Lern-Fair. The success visualizations and their story also convey target group-oriented values and fit seamlessly into the existing branding of the learning platform.</p>
The new gamification user interface of the learning platform displayed on a desktop computer and smartphone.

Testimonial

Lern-Fair's testimony about us

<p>The collaboration with typedigital throughout the entire gamification project was highly collaborative and characterized by a strong structure and efficiency - starting from a superbly prepared workshop, through regular sprint reviews, to the final retrospective with all project participants. This approach allowed us to make continuous progress while critically reflecting on the entire project trajectory. typedigital not only contributed to realizing our vision but also opened up new perspectives for future projects.</p>
A Quotation mark
Profilpicture of the Lern-Fair CEO Christopher Reiners

Christopher Reiners

Co-Founder & CEO Lern-Fair

Do you also have a project in mind that you would like to tell us about?

That´s how we support your business

Our services

Icon Usability Analysis

Strategy consulting

The right strategy is the foundation of a sustainable success of your digital product. Benefit from our experience to remain innovative and competitive in the long term.

Icon App Development

Software development

Whether apps, software or web applications: We are experts for digital product development and specialise in developing efficient software solutions for your company. With our support, you can create your digital product and digitise business processes.

Icon MVP Definition

Unique user experiences

Does your solution focus on the user? The success of your project stands and falls with user-friendliness and the ability to fulfil real user needs and expectations. Together, we put your target group centre stage.

Casestudy

Other projects that we have realized with our customers

Profile picture of Andreas Kottre