Services
Design & Documentation
Tools & technologies
Figma, Midjourney & Notion
INDUSTRY
Online education
client
EDteam
Introduction
EDteam is a Spanish-language online learning platform that offers courses in programming, design, and technology. They focus on high-quality, practical education to help people develop digital skills for the job market.
The Problem
EDteam wanted to improve how students navigate their learning paths. While they offered numerous courses, it wasn’t always clear which ones to take—or in what order—to truly master a skill.
The idea was to create a place to categorize related courses and routes into a structured learning area where you had a clear path to "master" a certain technology or discipline.
Balancing structure and flexibility—some courses had fixed sequences, while others allowed multiple paths. The solution needed to guide students effectively while keeping their choices open. These solutions were called schools and routes.
Schools
This was the first part of the project, the idea of the design was very simple.
Routes
This was the most complex part of the entire Schools project. Each route is a carefully curated playlist of courses, designed to guide students step by step toward mastering a specific skill—like Frontend Development with JavaScript.
To achieve the goal, I designed a visual flow using numbers and connecting lines to guide students through each course in the recommended order—making the path to mastery easy to follow.
But designing this wasn’t as straightforward as it sounds. There was a key challenge...
Single Course
Each course in the route is displayed as a card, designed for clarity and quick scanning. Every card includes:
The course cover, for easy visual recognition
Its position in the route, clearly numbered to show the learning sequence
A progress bar, so students can instantly see how far they've come.
The single course is the most straightforward variant in the route, it emphasizes a linear learning path—students must complete each course before moving to the next, ensuring they build the right foundation for what’s coming next.
“Or” Courses
This is one of the most interesting scenarios. Here, the route offers multiple paths forward—students must choose one course to continue, but don’t need to take them all. Each course holds the same importance and shares the same entry and exit point in the learning path.
This setup reflects the flexibility in how a skill or technology can be learned. To make this clear, I placed the options side by side with an “or” tag—a nod to the programming operator—signaling that any path is valid. A tooltip provides extra clarity for anyone unsure about the choice.
“and” Courses
The final scenario in the route is the “and” type, which, like its “or” counterpart, offers multiple courses—but with one key difference: students must complete all of them to move forward.
There’s no required order, giving students the freedom to choose which to take first. Visually, they’re displayed side by side with an “and” tag, a nod to the logical operator in programming—reinforcing EDteam’s tech-driven identity while keeping the flow intuitive and clear.
Documentation
As part of the handoff, EDteam requested detailed developer documentation, organized and delivered in Notion for easy access and collaboration.
The documentation was structured by individual pages of the project, plus a global style guide to ensure consistency across the platform. Each section covered the essentials developers needed to implement the designs smoothly.
segmentation
Every page was broken down into key categories:
Colors
Typography
Shadows
Grid
Components
Scenarios
This approach made the documentation not only thorough, but also easy to navigate and update as needed.
