Preschool

Why is it great?

The Preschool welcome page has been designed to provide a visually engaging and friendly experience for young users.

When logging in as a preschool user, the platform will redirect to a personalized Welcome screen where the user can identify their name, avatar, and the <Enter> option to access the available content.

What does it consist of?

The main side menu allows quick and easy access to the main available sections of the platform.

Its design is intuitive and visually engaging to facilitate navigation throughout the platform, making it easy and attractive to locate content, activities, and resources.

Each menu option has been adapted to meet the needs of younger users.

To provide a simple and user-friendly navigation experience, the main menu includes only the following options:

• My Backpack: Where users will find the available resources and content.
• My Tasks: Where users will find assignments created by teachers.
• iRead: Where users will have access to the virtual books available for reading.
• Notifications: Where users will view messages sent by teachers.
• My Profile: Where users will find their personal information and available avatars for customization.

The My Backpack section is the equivalent of My Class Materials used in more advanced levels (Primary / Secondary / Young Adults), where available learning content is organized and easily accessible.

This space has been specially designed to provide quick access to learning materials through a dynamic experience tailored to younger users, using large and visually engaging icons that make navigation easier and more attractive.

Studio Preschool incorporates improved display and navigation features to properly adapt to different tablet screen sizes.

Thanks to this update, content, menus, and interactive resources now adjust more efficiently to each device’s dimensions, providing a more comfortable, clear, and seamless experience for users accessing the platform from tablets.

What does this improve?

• Optimizes content display on tablet screens.
• Automatically adjusts interface elements according to screen size.
• Improves the layout of menus, buttons, and interactive resources.
• Provides a more comfortable and accessible navigation experience.

Why is this important?

• Enhances the user experience on mobile devices and tablets.
• Reduces display issues and element misalignment.
• Facilitates access to educational content from different devices.
• Ensures a more stable and adaptable experience for users.

The display and organization of content within Series improve navigation by making it easier to access available resources according to their type.

How does it work?

When opening a Series, a new page will display with two main buttons at the top: Activities and Resources. By default, the Activities section will open automatically and display all courses within the Series, except those marked as Additional Resources.

When a course has been configured as an Additional Resource from Author, the Resources button will automatically become available, displaying only those complementary contents.

What does this improvement include?

• New access page when opening a Series.
• Addition of the Activities and Resources buttons.
• Automatic display of main activities in the Activities section.
• Separation of complementary content through the Resources section.

Why is this important?

• Improves content organization and classification.
• Facilitates access to complementary resources.
• Provides clearer and more intuitive navigation for users.
• Allows differentiation between main activities and additional materials.
• Optimizes the learning experience within the platform.

The structure and navigation of the Activities page optimize content organization and facilitate access to the units and resources within each course.

How does it work?

When entering a course from the Activities section, the platform will automatically load the first available unit (usually identified as Unit 1), immediately displaying all the contents included within that unit.

In addition, a new unit selector has been incorporated at the top of the screen, allowing users to easily navigate between the different units of the course. When selecting any content, it will open together with a tree-style side menu located on the left side, making it easier to visualize the complete course structure and quickly access related content.

What does it include?

• Automatic loading of the first unit when entering a course.
• Immediate display of all content within the selected unit.
• New unit selector to facilitate navigation.
• Incorporation of a tree-style side menu for content exploration.
• Faster and more organized access to activities and resources.

This improvement ensures that the application is used only on supported screen sizes, providing an appropriate visual experience and optimal functionality across the platform.

When a device does not meet the minimum supported dimensions or display conditions, the platform will inform the user and prevent access to the application until it is opened from a compatible resolution.

What does it include?

• Automatic validation of supported screen sizes.
• Access restriction on unsupported devices or resolutions.
• Informational messages to guide users.
• Protection of the platform’s visual and functional experience.

The Activities page now supports content structures with multiple levels of nesting, allowing more flexible and organized navigation within courses and activities.

With this update, the interface can recursively represent complex content structures, supporting any number of hierarchical levels within a course, for example:

Course → folder → folder → content, in addition to simpler structures such as Course → folder → content.

What does it include?

• Support for multiple levels of folders and subfolders.
• Improved visual organization within the Activities page.
• Compatibility with courses containing deep content structures.
• Clearer and more organized visualization of educational resources.

The platform introduces new visual components to manage query states more clearly and user-friendly within the Series and Activities pages in the Preschool experience.

With this improvement, the pages / my-backpack and / my-backpack / [serieID] / activities will display specific messages and interfaces depending on the state of the requested information, providing a more understandable and consistent navigation experience for users.

Now, while information is loading, a progress indicator will be displayed; if an issue occurs during the query, an error message will appear; and when no content is available, an informative empty state will be shown.

Additionally, these components were designed to be reusable in other areas of the Preschool interface where loading, error, or empty states are needed.

What does this improvement include?

• Visual loading indicators while data is being retrieved.
• Clear error messages when a query fails.
• Informative empty states when no content is available.
• Reusable components for different sections of the platform.
• Improved visual and navigation experience within the Preschool interface.

This section is designed to centralize and facilitate access to tasks assigned to users.

This new view allows users to visualize pending tasks and assigned activities in a clearer and more organized way, improving the academic tracking and management experience within the platform.

What does it include?

• New main screen dedicated to tasks.
• Centralized visualization of assigned content.
• Quick access to pending activities.
• Better organization and tracking of academic tasks.
• Clearer and more intuitive navigation.

A task status filter has been added, allowing users to organize and visualize their activities according to their progress: started, not started, or completed. This improvement facilitates academic tracking, optimizes pending task management, and provides a clearer and more personalized navigation experience within the platform.

Task page and side navigation bar

Studio incorporates task visualization and navigation through a new Task Screen and an optimized side navigation bar, facilitating access to and tracking of activities within the platform.

This update allows users to view tasks in a more organized way, quickly access related content, and navigate between activities through a clearer and more intuitive structure.

What does it include?

• New screen dedicated to task visualization.
• Optimized side navigation bar for quick access.
• Better organization of activities and related content.
• More intuitive access to resources and tasks.
• Clearer navigation throughout the platform.

Task Learning Objectives are also included, allowing users to more clearly identify the goals and competencies associated with each activity. This update facilitates understanding of the educational purpose of tasks, improves learning tracking, and provides a more structured experience focused on academic objectives.

A new functionality has been incorporated into the Activities page through differentiated tabs for Activities and Additional Resources, facilitating better organization and access to content within the Series.

This update allows users to easily switch between main activities and additional resources, displaying each type of content in a separate section to provide clearer and more intuitive navigation.

What does it include?

• New tab to display Additional Resources.
• Separation between Activities and complementary resources.
• Consistent navigation between activities and resources.
• Improved visual organization of educational content.

This option allows students to submit their assignments clearly, quickly, and securely within the platform.

This option will be available in each assigned activity and will allow students to confirm the submission of their work before the established deadline. Once the task is submitted, it will be recorded in the system.

How does it work?

1. The student accesses the assigned activity and completes it.
2. They select the  button.
3. The score and content status are updated immediately after submitting the LO.

Activity status

In the side menu, detailed information about the progress of each activity (completed or unfinished) is displayed.

Benefits:

• Simplifies the assignment submission process.
• Provides clarity to students about the status of their submission.
• Allows teachers to keep organized track of submissions.
• Reduces errors or uncertainty about whether a task has been successfully submitted.

This component will be specifically designed to align with the Preschool look & feel, respecting its visual style, colors, typography, and behavior, ensuring a more friendly and consistent experience for users within this environment.

The implementation will aim, as much as possible, to reuse the existing logic from current alert components, adapting only the visual layer and certain specific behaviors required for the Preschool experience.

This section is designed with a user-friendly, visual, and accessible interface, aligned with a style tailored for preschool students, making navigation easy and intuitive.

What does it include?

1. Class overview
Displays the classes available to the student.

2. Quick access to content
By clicking , the student can access the available content and resources.

3. Simplified navigation

• Design focused on usability for preschool students
• Use of icons, colors, and clear visual elements

This section is designed to promote reading in a playful, progressive, and personalized way, aligned with the preschool educational approach.

It supports the development of reading comprehension, vocabulary, and language proficiency through digital content tailored to each student’s level.

What does it include?

• Visual, engaging, and easy-to-explore content.
• Illustrated digital books.
• Guided reading activities.
• Multimedia content (when available).
• Simple and user-friendly interface.
• Intuitive navigation for preschool users.
• Use of colors, icons, and clear visual elements.

Why is it important?

• Encourages reading habits from an early age.
• Provides content adapted to the student’s level.
• Facilitates tracking of language development.
• Enhances the learning experience with interactive digital resources.

Clicking on each book cover displays its information, and from this view the book can be opened to begin reading.

Each book includes detailed progress information.

The Notifications page in Studio Preschool is designed to keep students informed in a clear, visual, and non-intrusive way, following a friendly style adapted for preschool users.

This section centralizes all relevant alerts within the platform, allowing students to easily identify important events, progress updates, or pending actions.

Its purpose is to provide timely information about activities, progress, and messages within the platform, making it easier to track the learning process.

What does it include?

• A chronologically organized notifications list.
• Alerts such as:
  • New messages
  • New assignments
• Students can click on a notification to go directly to the related content.
• Notifications are automatically marked as read after interaction.
• Use of friendly colors, icons, and visual elements.

Why is it great?

• Keeps students informed.
• Makes activity tracking easier.
• Strengthens communication within the platform.

Users have the option to delete notifications individually or in bulk using the trash bin icon.

Through the <Filters> option, specific notifications can be located by:

• Date
• Subject

The <My Profile> section is the student’s personal space where they can view their basic information and identity elements within the platform in a simple, visual, and friendly environment.

It is specially designed for preschool users, featuring a clear, colorful, and easy-to-understand interface. It allows students to identify themselves within the platform and view their information in a simple and organized way. Students also have the option to choose and customize an avatar.

What does it include?

• Username
• Student’s name
• Profile avatar
• Institution
• Personalized visual elements
• Representative avatar
• Colors and visual identity aligned with the Preschool environment

What is it for?

• Reinforces the student’s identity within Studio.
• Provides an attractive visual experience suitable for preschool-age users.
• Maintains simple and easy navigation without complexity.

It is a playful space within Studio Preschool where students can view and collect rewards earned throughout their progress on the platform.

It encourages student participation, effort, and consistency through a system of visual rewards.

What does it include?

• Display of all earned stickers
• Colorful and attractive graphic elements
• Clear and easy-to-understand organization
• Indicators for unlocked stickers
• Visualization of progress and incomplete collections

Stickers are awarded for:

• Completing activities

Why is it important?

• Reinforces student motivation
• Encourages active participation
• Creates a fun and meaningful experience
• Promotes continuity in learning

The Course Navigator is a component that allows students to explore the courses in the current series and clearly visualize their progress.

This element works as a carousel where each course is presented as a card, making it easier to navigate through current courses while reinforcing student motivation by displaying sticker progress.

Why is it great?

• Displays all courses corresponding to the current series.

Sticker Progress

• Each card includes a progress bar.
• Reflects the number of stickers earned versus those available.
• Allows students to easily identify their progress in each course.

Intuitive Navigation

• Carousel / horizontal scroll interaction.
• Touch-friendly design for preschool users.

What does it provide?

• Improves understanding of student progress.
• Encourages motivation through immediate visual feedback.
• Reinforces the connection between learning and rewards (stickers).
• Enriches the playful learning experience.

With the goal of improving exploration and progress visualization within <My Stickers>, a set of components has been implemented to allow students to navigate clearly and intuitively through the stickers for each unit.

These components follow a modular approach, making them reusable and aligned with the Preschool visual design.

What does it include?

1. Unit Navigation

Allows users to move between the different course units.

Features:

• Horizontal navigation (carousel style).
• Visual indicator of the active unit.
• Overall progress by unit.
• Simple interaction.

Benefit:
Makes switching between units quick and easy.

2. Sticker Card

Represents an individual sticker within a unit.

Features:

• Sticker image.
• Visual status:
  • Unlocked (shown in color).
  • Locked (shown in gray).

Benefit:
Displays the status and design of each sticker in an attractive way.

3. Sticker Card List

Organizes and displays the stickers from the selected unit.

Features:

• Progress indicators.

Benefit:
Groups stickers together and makes them easier to view within each unit.

What does it provide?

• Improves navigation and understanding of student progress.
• Reinforces motivation.
• Provides a more organized experience.
• Adapts to touch devices and preschool users.

Recognizes students’ effort when completing activities within each unit. This element works as a visual reward mechanism, where stickers are awarded according to the number of completed activities, reinforcing motivation and a sense of achievement.

Why is it great?

Reward System:
Each student receives stickers based on the number of activities in their unit, whether there are fewer than 6, exactly 6, or more than 6 activities.

Clear Scenarios:

• Fewer than 6 activities → 1 sticker per activity.
• Exactly 6 activities → 1 sticker per activity.
• More than 6 activities → the total is divided into 6 and stickers are distributed proportionally.

Visual Motivation:
Students can see their progress and how many stickers they have earned, turning every achievement into a positive encouragement.

What does it provide?

• Progress clarity: Students easily understand how stickers are awarded.
• Emotional reinforcement: Each sticker represents a completed step, strengthening self-esteem and motivation.
• Playful experience: Learning becomes a more fun and rewarding process.
• Learning-reward connection: Academic effort is linked to tangible recognition.

This update improves the student experience within the Activities page by providing a clearer and more motivating way to visualize achievements.

What changes?

• Removal of the progress bar:
  Each course will no longer display the traditional progress bar.
• New “Stickers” tab:
  A dedicated tab has been added so students can view the stickers they have earned.
• Direct access to “My Stickers”:
  From this tab, students can easily navigate to the <My Stickers> page, where their complete progress is displayed.

Why is it great?

• Clear visualization: Students can easily see how many stickers they have earned.
• Reinforced motivation: Progress becomes a tangible and fun incentive.
• Intuitive navigation: The tab provides direct access without additional steps.

What does it provide?

• Improves understanding of activity progress.
• Reinforces motivation through immediate visual feedback.
• Connects learning with playful and meaningful rewards.