
Octolearn
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.
Benchmarking
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:

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

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

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

5. Semi-structured user interviews
To understand experiences in-depth and raise discussions about our hypotheses and doubts.

3. User profiling
To set the main characteristics of our potential users.

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.


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.
-


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.

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:
![]() | ![]() | ![]() | ![]() |
---|---|---|---|
![]() |

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.