Mobile & Desktop App | 2021 | Product, UX/UI, Creative
Jovens Gênios is an education company that integrates gamification and artificial intelligence (Deep Learning) technology in a learning platform to engage and stimulate elementary school students throughout Brazil, both in public and private education.
The Project
Concept and Beta Phase
The Jovens Gênios Beta app was tested in regards to its viability and main functionality in pre-selected schools, with some classes of students. The app at this time was still in a very early phase, but the reception was overwhelmingly positive.
The concept was to mainly offer questions in a game format about the many school subjects, such as Geography and Portuguese. The students would then compete for the highest score.
Evolution of UX & UI
After the initial tests, the team and scope grew, and the app continued to be enhanced. As my first main contribution to the project, I drafted a so called "Boletim Genial", a report card for the students in the platform.
Jovens Gênios
Gamification 2.0
The gamification 2.0 initiative in Jovens Gênios consisted in reformulating interaction on the platform, and creating an environment in which students could feel immersed in narratives, in the context of them being space explorers navigating "knowledge planets".
For this whole undertaking, we as a team established key aspects we needed to work on and deliver:
-
A brand new, immersive interface and experience for students
-
A compreensive separate platform for teachers
-
User centric processes (Feedback meetings & touch points)
-
A susteinable Design System for all the products
Explorer's Platform
(Students)
In the Explorer's Platform, students first create their own avatars. Then, they are free to explore the so called "Knowledge Planets", in which the get to know important people from history. For example, in the "Technology Planet" they get to meet Ada Lovelace.
In those planets, they get through levels doing quizzes on subjects they learn from schools, such as Mathematics and Geography.
These quizzes have their difficulty and questions leveled by machine learning, which detects which topics the student has difficulty or ease. As they level up, they obtain customization items for their avatar and get to know more characters and planets.
Alternatively, students can also battle each other with quizzes. Who has the highest score wins!
Educator's Platform
(Teachers and Schools)
For the Educator's Platform, teachers and school coordinators were meant to easily observe the progress of the students. They could assign specific tasks to classes, and see overall perfomance in subjects.
This platform was not worked around gamification, but instead greater simplicity and assertivness giving the audience it had in mind.
Teachers and educators can also import their own tasks and subject questions to the class, and see overall performance of each student in each area. With all this knowledge, they can better understand how to enhance understanding of tricky topics.
User Centric Processes
(UX Culture)
Designing an educational app with gamification features involves a comprehensive User Experience (UX) process that caters to both students, teachers and parents. Some strategies we as a team practiced were:
-
User Personas
-
Competitive Analysis
-
User Interviews
-
Surveys
-
Usability Testing
-
Monitoring and Analytics
-
Navigation Design
Design System
(Atomic Components & Tokens)
An atomic design system is a structured approach to designing and building user interfaces, breaking down the UI into smaller, reusable components and design tokens for consistent and efficient design implementation. Here's how the team went about it:
-
Research and Planning: We started by researching the project's goals and audience.
-
Design Principles: We set clear design principles for consistency.
-
Atomic Design Methodology: We broke pre-existing UI into atoms, molecules, organisms, templates, and pages.
-
Design Tokens: We defined variables for colors, typography, spacing, etc.
-
Atomic Components: We created reusable UI elements like buttons and input fields.
-
Molecules and Organisms: We combined atoms for complex structures.
-
Component Library: We documented the system for collaboration.
-
Testing and Iteration: We gathered feedback for continuous improvement.
-
Collaboration with Developers: We worked closely with the Jovens Gênios devs for accurate implementation.
Finally, with this experience, I understood that design systems are not static. me and the team planned for ongoing maintenance and updates to the system as the project evolved or new design requirements emerged.
I believe that this comprehensive approach to creating an atomic design system ensured consistency, scalability, and efficiency in designing and developing the user interface for the project.
---
Credits and attributions:
!----------------------------------------------!
Team members who worked on this project with me:
Cadu - Design Lead
Luis Oliveira - Designer
Fawn Night - Illustrator
Many thanks to everyone involved!
!----------------------------------------------!