top of page
Group 172.png


This project involves many aspects of UX, from research and strategy to constructing a UI. The goal was to prototype an online teaching platform for medium and long-term courses - implementing gamification mechanisms and techniques to attract, engage and reward students in their learning journey.

Problem statement and context

According to the EAD Brazil Census carried out in 2020, educational institutions had a dropout rate of almost 30%, for several reasons, including non-compliance with expectations, lack of support and institutional interaction, difficulty with platforms and financial difficulties .

One of the ways to avoid the growth in the evasion rate in distance learning is the application of active methodologies such as Gamification, which consists of applying game strategies and techniques in day-to-day activities that go beyond entertainment, with the aim of increasing the engagement and autonomy of the participants and promoting continuous learning.


We searched and analyzed what is already offered by companies in the market for Medium/long-term teaching institutions and Gamified Platforms.

After analyzing 10 different platforms,  we got some insights:

  • Most institutions do not use gamification techniques and tools;

  • Although rewards for academic performance are an important motivating factor cited by students in quantitative and qualitative research (carried out subsequently) it is still rarely used by institutions;

  • Some institutions offer only the mobile version for students to attend classes.

UX Research

To gather essential information for the solution and understand our users' needs, we structured the research process in 6 steps:

Image by Kelly Sikkema

1. CSD Matrix

To gather data of what is already known, hypotheses, what is still unknown and needs to be investigated.

Image by Austin Distel

4. Quantitative research

A survey answered by 100 potential users, with various questions to gather general insights and data.

Image by Towfiqu barbhuiya

2. Research questions and hypotheses

To understand what are the main questions and what we want to investigate.

Image by charlesdeluvio

5. Semi-structured user interviews

To understand experiences in-depth and raise discussions about our hypotheses and doubts.

Image by Priscilla Du Preez

3. User profiling

To set the main characteristics of our potential users.

Image by Myriam Jessier

6. Data analysis and report

To analyse all the information we gathered in the previous steps and acknowledge needs and desires.

Research insights

  • The computer is the main device used by students.

  • Up to 2 hours are dedicated to studying daily.

  • The main difficulties in following an online course were: lack of interaction with other students, followed by lessons always presented in the same way.

  • It was reported that the main reason for dropping out of an online course was “The lack of personal organization in relation to the routine and study journey”.

  • Some of the interviewees had difficulty navigating their courses platform.

  • It was noted that most students prefer a gamified platform based on positive motivators.

User persona

Based on the results obtained from the research, it was possible to define our Personas. We created 2 user profiles, according to two different types of motivation: professional/personal growth and need/obligation.

persona 3.png
persona 2.png

UX Writing

We applied the Content First strategy, which consists of prioritizing the use of words, for effective communication, before creating the visual interface. Through the association of word clouds, personas and in-depth interviews, it was possible to define the tone and voice of OctoLearn, along with the purpose of the brand.

  • Purpose - Educate, Motivate, Transform and Expand knowledge;

  • Voice - Motivating, Didactic, Innovative, Authentic;

    • Motivating, because we believe we can help you achieve your goal;

    • Innovative, because there are better teaching methods than just the traditional one;

    • Didactics, we are always looking for ways to facilitate your study journey;

    • Authentic, we are transparent and truthful in our communication.

image (1).png

Wireframes &
User flow

After creating the user flow for classes, configuration and prizes, we designed the wireframes and their components.

The goal of the wireframes was to run the first usability test and check the information architecture.

Image by John Schnobrich

Usability testing

We applied two unmoderated usability tests on Maze. The first one was performed by 20 users and included 3 tasks:

1) Attend the Design Thinking class of the Innovation module.

2) Schedule a mentorship.

3) Trade points for rewards.

The second one included two tasks. The 15 users needed to:

1) Access a scheduled mentorship.

2) Post a question or comment in the community page.

Test insights

  • All users completed the class attendance task, most users (17) used the homepage to find the path, while 3 used the navigation bar and clicked on "My Classes". 

  • When accessing the schedule mentorship form, some users showed certain difficulties when choosing the date on the calendar.

  • In the task to exchange points for rewards, all users completed the mission by going directly to the store card.

  • On the task to access the mentorship, some users clicked on the calendar to access the mentorship, but did not realize that they should click below on the name of the "event - scheduled mentorship".

  • In the mission to post a question in the community, most users followed the path of the navigation bar, while only one used the question icon from the header.

High fidelity prototype

Parallel to the user testing, we created the visual identity and the styleguide of the app.

The main colors are #673AB7 and #009688.  The OctoLearn logo features a geometric octopus, carefully crafted to represent the essence of the online class platform's gamified approach, known as Octalysis. 

After finishing the two tests, reviewing the writing of some screens and making some minor changes to the wireframes, the development of the high-fidelity prototype began.

The following are some of the main screens of the application:

Meus módulos
Group 171.png

Octolearn: Unleashing the Fun in Online Education!

In conclusion, this case has provided a overview of the design process behind Octolearn. By incorporating gamification elements, Octolearn aims to revolutionize online education and create an immersive and enjoyable learning experience for students. Overall, this platform wants to make a significant impact in the education industry, bridging the gap between traditional teaching methods and modern online learning platforms.

bottom of page