Digital Learning Platform Design

Designing for different roles within a single ecosystem

Through a series of user interviews, I identified the platform's main user groups — students, administrators, and professors — in order to better understand their needs, goals, and pain points. These insights helped reveal how each group interacts with the platform and where friction occurs. Based on this research, I mapped the overall experience using a journey map, which allowed us to visualize key moments, user motivations, and opportunities for improvement across the different stages of platform use.

• Students — focused on learning, collaboration, and task completion
• Instructors — responsible for mentoring, guiding, and tracking progress
• Administrators — managing programs, content, and users

User personas were created to represent each user type, highlighting their key goals and pain points.

Journey maps were developed for each user group to visualize their experience and identify opportunities for improvement.

Using wireframes to explore and validate decisions quickly

Before moving into high-fidelity design, I focused on creating wireframes as a fast and flexible way to test layout ideas, navigation patterns, and content hierarchy across both mobile and web platforms.

• Quickly explore multiple layout options without visual constraints
• Validate core flows and navigation early in the process
• Identify structural issues before investing in detailed UI design
• Align interface decisions across platforms from the start

Shaping the look and feel of the product

At this stage, the focus shifted toward visual design and interface exploration. I explored different UI approaches to define the visual direction before formalizing it into a system.

• A clean, modern aesthetic aligned with educational and collaborative environments
• Strong visual hierarchy to guide users through complex content
• Consistent interaction patterns adaptable to both mobile and desktop

Building a scalable and reusable visual system

The design system served as the foundation for the interface work in this project. Rather than focusing only on visual styles, the system was built through a componentization process where patterns were identified, standardized, and documented to ensure scalability and consistency across the product. This included style guidelines such as color palettes, typography, and grid systems, as well as a library of reusable components like buttons, inputs, cards, navigation elements, and feedback states. By documenting these patterns and components, the team was able to design and iterate faster while maintaining consistency across screens and features.

Applying the system across platforms

Using the design system, I designed key screens for both mobile and web platforms. Despite platform differences, both experiences shared a unified visual language.

• Mobile — simplicity and prioritization of essential actions with lightweight navigation and clear content flow
• Web — more complex layouts and information density to support administrative workflows and advanced controls