Driving Public Education Forward with AI:
Larrisa Salustino
how Experience and Interface Design can support teachers
By: Larrisa Salustino - Producter Designer at AprendiZAP
Pollyana Azevedo - Producter Designer at AprendiZAP
When we think about education, it is fair to say that we believe education is a basic human right. Through education, we can shape individuals, communities and, consequently, the future. With technology, we understand that its impact on education is significant: more people have access to digital devices and tools, and the classroom is no different. However, we cannot fail to point out that, despite easier access, there are still people with little or no knowledge of technology. This reality becomes even more serious when we talk about education and technology for public education: in research conducted by our team with teachers who use AprendiZAP, we found that 43.7% of teachers do not have internet access, or stable access, in the classroom.
How, then, can we bring technology to an audience that is not digitally native, while taking into account the social, economic and structural context of these public-sector professionals?
Talking about artificial intelligence (AI), in itself, opens the door to in-depth discussions about the impact of its use. This ranges from people's apprehension about using it to the fear that this technology could replace these educators.
Therefore, discussing AI requires sensitivity to the subject in our work with our audience.
In light of this, the AprendiZAP team faced—and continues to face—the challenge of making it possible to use this technology to make teachers' lives easier. Through a research process, we discovered that one of our teachers' greatest pain points is a lack of time. This is compounded by an overloaded routine and a lack of resources to support these educators in their daily lives. We therefore decided to combine our knowledge of technology and artificial intelligence with the individual and collective intelligence of a pedagogical team coordinated by our team, in order to develop 8,000 active-learning activities that were only feasible through the use of AI.
We discuss this in more detail in the following articles:
How AI enabled the development of 8,000 educational resources in just 3 months
Transforming education with Artificial Intelligence: we created 8,000 activities for public schools
Technology and education: 30 teachers working with Artificial Intelligence
Design challenges
Designing a user-friendly solution for people who are not accustomed to technology is a major challenge. This challenge is part of the dream of making AprendiZAP the most practical and easy-to-use pedagogical support platform for teachers.
Thus, based on a sample of 12 different types of active-learning methodologies developed and adapted for 80 selected Portuguese classes in AprendiZAP's lower secondary education offering, we were able to validate the hypothesis that teachers want to innovate in the classroom and promote student agency. To establish this, we added the methodology content in PDF format to lesson pages that originally could contain no more than two types of activities: a multiple-choice exercise and/or an open-ended activity proposal.
Next, after analyzing the fact that these new activity proposals were indeed being used by teachers, we moved on to the larger project: bringing active-learning methodologies to more classes in the final years of elementary education. This was only possible thanks to generative AI technology, through which our team structured ways to develop the methodologies according to criteria established after the first experiment and managed to generate 8,568 educational materials. After being reviewed by specialized teachers, these materials were sent to the design team.
The design proposal took two main questions into account: how to standardize and style the content so that it would be easy to read and understand how it could be applied; and how to incorporate so much innovative content into a lesson page while enabling a good user experience.
Design and implementation
Deliverable
With the mission of adding a greater focus on active-learning methodologies to lesson content, the design project's guiding principle was to devise a practical, simple and intuitive navigation flow, as well as a way to display more activities by highlighting and distinguishing each section and enabling users to download the generated content. Based on the AprendiZAP persona, the stage involving the application of inclusive design and accessibility resources was conceived to increasingly bring the product's ease of use and efficiency closer together and refine them. After all, according to Don Norman, a pioneer in user-experience studies, one of the pillars for achieving a satisfactory user experience is to conduct an in-depth investigation into whom we are communicating with. In the case of this design project, the goal was to provide pleasant experiences for teachers who, for the most part, do not naturally navigate the world of digital hypermedia.
Grid and layout
Choosing a fixed grid with an even number of columns, both in the mobile and desktop versions, made it possible for components with the same functions to be retained and/or adjusted as the layout changed—according to the minimum (320x569px) and maximum (2560x1080px) interface dimensions. This was done to preserve the ergonomic, functional and experiential qualities of the interface. In other words, the flexibility to adjust the layout for large-scale changes entails a sustainable design decision.
As with any incremental implementation of a digital product, we need to take the digital product deliverable's premises into account. In this regard, the application's visual identity was maintained through its respective colors, shapes, typography and components.
A simple and intuitive format was established for the layout, using space as a resource to help the eye move through and recognize information grouped into sections, separated by headings and variations in color. Among the improvements and adjustments, the layout was reorganized to: 1. accommodate new interface components; and 2. direct users to lesson content, in PDF format and in video support material (images 1 and 2, respectively).
[1] [2]
Source: AprendiZAP - Images 1 and 2: former AprendiZAP lesson page with 2 activities and new lesson page with 8 activities, respectively
Visual composition
With regard to the visual composition, two main changes should be highlighted:
activities: slight contrast within the same color spectrum (#E31586);
content generated with artificial intelligence: greater saturation (#6F1CA8).
The artificial-intelligence content generation section (image 3) is new and has a generative function for users. That is, according to the topic and the BNCC, it is possible to create different content and activities that support users in developing and/or complementing their lesson plans. In this regard, this section has the function of explaining, in a succinct and simple way, the action users need to take to obtain the expected content.
[3]
Source: AprendiZAP. Artificial intelligence section.
Shapes
The human eye is naturally attracted to curves. Since the layout was composed on an orthogonal grid, including rectangular elements with rounded corners gave the shapes a certain roundness, highlighting the components and making them easier to find and read. As a benefit, when this kind of Prägnanz—which, according to Gestalt theory, is defined by the stability of human visual perception—is present, the user's cognitive load is reduced. This design was applied to all rectangular interface components (image 4).
[4]
Source: AprendiZAP. Buttons and cards: action elements with clear and descriptive labels. Colors: 1. primary - purple (#6F1CA8), highlighting call to actions (CTAs), attracting attention and marking the information hierarchy. 2. secondary: pink (#E31586) for support, a more vibrant color range.
Icons
For the icons, we sought to relate the semantics of the accompanying word to the verbal language focused on the function performed by each one. We know that, although cultural, social and personal aspects of the people who use the interface and digital product directly influence the construction and implementation of these elements, seeking a standardized and consistent language was very important in choosing and allocating each illustration. Using Material Design 3created by Google as a reference, we brought the necessary brevity and consistency. The main construction characteristics are solid-color fills, items with a drastic reduction in detail, and flat, literal forms chosen to compose the visual communication.
Text
A single font family is used: Montserrat sans serif (image 5). This style is widely recommended for digital media because it works well in smaller text. It is also easily distinguished by people with visual impairments because of its simple form and legibility, even in settings with lower pixel density, while also conveying the atmosphere of technology, modernity and subtlety that the product seeks to communicate. Using various weights in a modular way adds contrast and emphasis to the information that should be prioritized in the interface.
For content design, the reading experience and substance of the texts were developed by the design team and reviewed by the content team, along with adjustments and additions made based on research and interviews conducted with the stakeholders involved in the project.
[5]
Source: Pinterest
Interactions
Regarding interactions, there is a change in the screen state in response to a user action, with the aim of reducing complexity on mobile and desktop screens. The behavioral visual feedback for larger interface dimensions is represented by the opening of a dialogue bubble with a continuous line, creating an analogy to the visual representation of speech in the world of graphic design (image 6).
To highlight functions, the touch areas were expanded to cards. Thus, two styles were used for each section: outlined for the activities area, and filled for the artificial intelligence section. The text placed on the cards clearly indicated the information hierarchy and served as entry points to deeper levels of navigation.
[6.] [6.1]
Source: AprendiZAP.
Final considerations
AprendiZAP is a powerful tool with the potential to transform education. At present, we are in a stage of perceiving and analyzing data from user activity. Our goal is to continually collect feedback on the usability and effectiveness of the interface. This stage is crucial for understanding the user experience from different perspectives and, consequently, improving our digital product.
During this construction process, some insights emerged that we would like to share:
Insight #1: constant alignment of information is essential. All team members must have a clear and consistent understanding of the project's objectives and strategies.
Insight #2: collaboration is the key to good design. We believe that the exchange of ideas and cooperation among team members are fundamental to innovation and problem-solving.
Insight #3: design is not a linear process, but a continuous cycle of learning, testing and refinement.
Insight #4: AprendiZAP operates not only as a toolbox for teachers, but also has the ability to democratize content generation using artificial intelligence. In addition, from an experience and interface design perspective, there is great potential to explore additional resources that incorporate interaction with the other human senses.
As a team, we are committed to continuously improving our product based on user feedback and our design insights. We believe that, by doing so, we can help teachers enrich their lessons and, ultimately, improve the learning experience for students.
