<h2><img role="img" alt="&#x1f6a7;" src="https://s.w.org/images/core/emoji/17.0.2/svg/1f6a7.svg"> Prototype</h2>					<h2>Feel free to try out the prototype via the figma link below!</h2>															<img width="800" height="475" src="https://portoadib.my.id/wp-content/uploads/2025/12/ezgif-1-bb919d9c67.gif" alt="" />																					<a href="#">
									Prototype
					</a>
									<h2>&#x1f6a7; The Challenge</h2>					<h2>detikcom needed an internal learning platform that could solve several key challenges:</h2>					<h2>&#x1f4c2; Learning materials were scattered across different tools and formats</h2>					<h2>&#x1f4c9; There was no standardized way to measure learning outcomes</h2>					<h2>&#x1f615; Existing solutions felt rigid, overwhelming, or uninspiring</h2>					<h2>&#x1f3a8; The platform needed to reflect detikcom’s modern, fast-paced digital culture</h2>					<h2>The main challenge was designing an LMS that felt <b>simple, enjoyable, and purposeful</b>, without sacrificing functionality or long-term scalability.</h2>					<h2>&#x1f3af; Goals &amp; Objectives</h2>					<h2>The key goals of detikLearning were to:</h2>					<h2>&#x2728; Create a minimal yet engaging learning experience</h2>					<h2>&#x1f4ca; Enable employees to clearly track their learning progress</h2>					<h2>&#x1f4dd; Provide measurable outcomes through pretests and posttests</h2>					<h2>&#x1f504; Maintain flexibility for future feature expansion and commercialization</h2>					<h2>&#x1f3a8; Ensure visual consistency with detikcom’s brand identity</h2>					<h2>&#x1f50d; Research &amp; Discovery</h2>					<h2>&#x1f91d; Stakeholder Interviews</h2>					<h2>The process began with discussions involving HR representatives and project stakeholders to understand both business goals and user expectations. These sessions clarified that the platform should prioritize clarity, focus, and ease of use over feature overload.</h2>					<h2>&#x1f4a1; Key Insights</h2>		<ul><li>Users prefer structured learning paths over free-form navigation</li><li>Evaluation features increase perceived learning value</li><li>Clean interfaces help users stay focused on content</li><li>Limiting unnecessary controls improves learning discipline</li></ul>			<h2>&#x1f9ea; Competitive Analysis</h2>					<h2>I analyzed several e-learning platforms to identify usability patterns and gaps. Many platforms offered rich features but suffered from poor information hierarchy and cognitive overload, reinforcing the need for a focused and distraction-free learning flow.</h2>					<h2>&#x1f3a8; Design Approach</h2>					<h2>The design process followed a user-centered and iterative approach.</h2>					<h2>1&#xfe0f;&#x20e3; Understanding User Needs</h2>					<h2>Employees needed a platform that felt easy to adopt, even for those unfamiliar with digital learning tools. HR teams needed clear visibility into progress and performance.</h2>					<h2>2&#xfe0f;&#x20e3; Wireframing &amp; Ideation</h2>					<h2>Early wireframes focused on:</h2>		<ul><li>Clear content hierarchy</li><li>Simple navigation patterns</li><li>Reduced visual noise</li></ul>			<h2>These wireframes were used as discussion tools during stakeholder reviews.</h2>					<h2>3&#xfe0f;&#x20e3; Feedback &amp; Iteration</h2>					<h2>Based on feedback:</h2>		<ul><li>Colors and typography were aligned with detikcom’s style guide</li><li>Learning flows were simplified</li><li>Feature placement was refined for better usability</li></ul>			<h2>4&#xfe0f;&#x20e3; Prototyping</h2>					<h2>High-fidelity prototypes were created in Figma to visualize key flows and interactions before development.</h2>