Cross-Platform Online Training SaaS

The project involved user research, ideation, and crafting responsive Figma prototypes (LFDs and HFDs) guided by a flexible design system. A key focus was designing a role-based information architecture that ensured a smooth, intuitive experience across web and mobile for admins, trainers, and learners alike.

Business Objective

The Online Training SaaS Platform is a comprehensive solution designed to facilitate both online and offline training sessions.

To build a seamless, mobile-first Online Training SaaS Platform that simplifies student onboarding, motivates learners to achieve their goals, and provides easy access to courses and sessions anytime, anywhere. The platform empowers trainers to efficiently manage and deliver training sessions, publish content, and track learner progress with minimal effort. Admins benefit from powerful analytical and operational dashboards for real-time insights and decision-making. With an intuitive UI/UX, the platform reduces redundant tasks, ensures smooth data synchronization, and delivers timely reminders—creating a frictionless experience for all user roles.

User Empathy

UX Goals

• Seamless Onboarding:Design a guided, friction-free onboarding experience tailored for students, trainers, and admins.

• Mobile-First Accessibility:Ensure key features are optimized for mobile devices, enabling learning and training on the go.

• Role-Based Information Architecture:Create a clear, intuitive navigation structure that serves different user roles with focused task flows.

• Ease of Course Access & Consumption:Enable learners to quickly find, access, and resume courses with minimal clicks and contextual progress indicators.

• Motivational UX Patterns:Integrate gamification elements like progress trackers, goal reminders, and motivational micro-interactions.

• Efficient Trainer Tools:Provide trainers with streamlined workflows to publish, manage, and monitor training sessions effortlessly.

• Operational Efficiency for Admins:Design dashboards and control panels that give admins clear visibility into user activities, training progress, and system health.

• Data Visualization & Insights:Deliver clean, actionable analytics through visual dashboards to support quick decision-making.

• Reminders & Notifications:Implement timely reminders and smart notifications for all users to stay engaged and on track.

• Minimal Cognitive Load:Use clean layouts, consistent UI patterns, and soft visuals to keep the interface pleasant and user-friendly.

• Consistency with Scalable Design System:Apply a unified design system that ensures brand consistency and speeds up development and future scaling.

• Smooth Data Sync & Cross-Device Continuity:Ensure seamless synchronization so users can switch between devices without losing context.

• Accessibility & Inclusivity:Follow accessibility best practices (e.g., WCAG guidelines) to support diverse user needs.

Key takeaways for Ideation

Admin Dashboard

Courses Page

Training Calendar

Smart Training Calendar – Plan, Track, and Stay on Schedule

The Training Calendar module offers a visually intuitive and adaptive interface for both web and mobile users, enabling effortless scheduling and tracking of sessions. Users can seamlessly switch between weekly and monthly views to plan ahead or focus on near-term tasks. With easy customization options and built-in reminder settings, trainers and learners can stay informed and aligned—anytime, anywhere. The responsive design ensures a consistent and efficient experience across all devices, supporting training continuity on the go.

Scalable Design system made in Figma

The UI was designed to be clean, modern, and easy on the eyes, reflecting the platform's focus on user comfort and efficiency.