Lightweight Learning Platform Design
BACKGROUND
What is the lightweight learning Platform?
Accessing internal employee training can feel like navigating a maze of complicated logins and security measures. From Single Sign-On (SSO) to VPN requirements, the barriers are plentiful, particularly impacting teams like sales or marketing, who are often away from their desks. Recognizing this challenge, I took the initiative to develop a web-based version of an e-learning template, simplifying access and fostering a more accessible learning environment.
PROBLEM IDENTIFICATION
What are the current issues with the e-learning platform?
Reduced retention time of learning
Users struggle to retain information effectively over time.
Difficulty of access
The platform has complicated login processes and VPN requirements, making it hard to use.
Challenges with updating content
The platform makes occasional updates difficult, leading to outdated learning materials.
CRAFTING A PROBLEM-SOLVING QUESTION
How can I help audiences learn quickly and effectively with high-quality content and engaging interactions on mobile or any device?
TASK OPTIMIZATION AND PROBLEM RESOLUTION
I discovered the tool and established the guide.
Tool
I provide easy access to core learning content with visuals and interactivity through a responsive internal web-based (HTML/CSS) interactive learning site.
Approach
I conducted comprehensive research to gather feedback and input from stakeholders and SMEs to understand their expectations and requirements for this new learning platform.
RESEARCH
Exploring Capabilities and Limitations on HTML/CSS Platforms
I collaborated with a web developer to research our current e-learning content authoring tool, exploring ways to ensure compatibility with a solely HTML/CSS development environment. We examined each component meticulously, identifying strategies to optimize them for seamless integration into web-based platforms.
Stakeholder and SME Insights and Requirements
To ensure the platform met all user needs and expectations, I conducted comprehensive research, gathering feedback from stakeholders and SMEs through structured interviews, surveys, and workshops. Key insights emphasized the need for intuitive navigation and clear, globally accessible content.
Intuitive Navigation: Ensure the platform offers straightforward, user-friendly navigation to facilitate easy access to training materials.
Clear and Understandable Content: Develop content that is clear, concise, and accessible, catering to a global audience with diverse needs.
Positive Learning Atmosphere: Create an engaging and motivating environment to enhance the overall learning experience.
Minimize Distractions: Design the platform to keep the focus on the core learning content, avoiding unnecessary distractions.
User-Friendly Interface: Focus on a seamless, intuitive interface that supports users' learning journeys without causing confusion.
MY DESIGN CONCLUSION POST-RESEARCH
The new platform should include interactive content with a user-centered design, be responsive on any device, and ensure easy access to core content.
DESIGN PHASE : DESIGN SYSTEM
Logo Creation
The logo I created for the Lightweight Learning Platform captures the dynamic learning environment, symbolizing key elements like images, text, search functions, and web features. It embodies fluidity and agility, reflecting our commitment to quick, efficient learning experiences. With dynamic visuals, the logo conveys speed, innovation, and progress, perfectly aligning with the core values of the LightLearning platform.
Typography
Noto Sans was selected for the Lightweight learning platform due to its modern appearance, readability, and extensive character support. Its versatility in typography, wide range of weights and styles, and compatibility with various devices ensure a consistent and accessible user experience. As a Google font, it also offers reliable rendering across different browsers and platforms, contributing to the platform's professional look and user-friendly interface.
Color Palette
Distraction-Minimized Text and Background Colors
Text and background colors are essential elements in minimizing distractions, as discussed earlier. Therefore, I have chosen a muted blue-gray spectrum for the text color to maintain readability while reducing visual noise.
Primary Color
Engaging Illustration Colors
In contrast to the text and background color scheme, vibrant colors are crucial for illustrations to maintain engagement and deliver a motivating vibe to the audience, keeping them engaged with the learning content.
Vision Accessibility – WCAG Compliance
Illustrations and Icons Style
During a brand revamp project, feedback revealed that excessive colors in e-learning template illustrations were distracting users. I refined the styles to be subtle yet clear, using Meta's global illustration color palette. This adjustment resulted in increased learner engagement and retention rates, validating my problem-solving skills.
Interactive Component Style
In the design phase, it's imperative to establish comprehensive styling guidelines for interactive components to ensure a seamless and engaging user experience. This includes defining the visual appearance and behavior of various elements such as side panels/navigation menus, card designs on the main page, collapsible tabs, and flip cards, all of which are essential features in an HTML/CSS environment.
Side Panel / Navigation
Collapsible Tab
Course Card
Flip Card
Buttons
Mockups for UI Components
A landing page on both desktop and mobile browsers
Interactive Tabs on both desktop and mobile browsers
Graphic with Single Choice Question on both desktop and mobile browsers
CONCLUSION
Empowering Learning Anywhere, Anytime
The team achieved momentum with the launch of the first mobile-first learning platform, initially for sales and marketing but now supporting various lightweight learning applications. By creating a web-based e-learning platform, I enhanced accessibility, improved efficiency, and supported professional development, driving organizational growth through a more skilled workforce.