July - Present
Kreavoks E-learning & Agency Website
Comprehensive digital ecosystem combining e-learning platform, mentorship marketplace, and digital agency services.
ReactLaravelTailwindCSSTypescriptMySQL
Overview
Background & Problem Context
Kreavoks was envisioned as a unified digital ecosystem that integrates education, mentorship, and professional services into a scalable platform. Designed to serve students seeking structured learning, experts building their personal brand, and businesses requiring tailored solutions, the platform bridges these journeys so that learning outcomes naturally evolve into professional and commercial opportunities.
From a technical standpoint, I implemented a multi-role authentication system to ensure secure access across user types, a structured Learning Management System (LMS) for course delivery and progress tracking, and a mentorship booking engine that directly connects learners with experts. Supported by dynamic content management, these features provide flexibility and scalability without disrupting the core system. Together, they establish a cohesive, efficient, and user-centric experience that empowers all stakeholders.
Role
Fullstack Web Developer & UI/UX Designer Specialist
Timeline
July - Present
Tools
React, Laravel, TailwindCSS, Typescript
Key Responsibilities
- Entire website development from concept to implementation
- Frontend and backend architecture design
- LMS, booking, and multi-role feature implementation
- Performance optimization and system scalability
Impact & Results
- Strengthened mentor–student ecosystem by ensuring all mentors onboarded smoothly
- Improved efficiency and clarity in user journeys, building trust in the platform
- Enhanced credibility of Kreavoks as a unified edutech and digital agency solution
Challenges
The Challenge
The main challenge was combining three distinct goals branding, education, and service sales into a single, coherent user experience without overwhelming users or blurring their intent. Before Kreavoks, mentor onboarding, course enrollment, and custom project requests were handled through separate pages, external forms, and disconnected workflows. This fragmentation made the platform difficult to navigate, hard to scale, and inefficient to manage.
As the platform grew, content maintenance also became a bottleneck. Course materials, service offerings, and branding assets were updated manually, increasing the risk of inconsistencies and errors. Additionally, the absence of a clear conversion funnel made it difficult to guide users from their first visit to meaningful actions such as enrolling in a course, booking a mentorship session, or submitting a project request. These limitations highlighted the need for a more modular, structured, and performance-focused solution.
Problem
In the fast moving digital era, both individuals and businesses struggle to adapt. Students and job seekers often lack industry‑relevant, project‑based education that can be showcased as portfolios to strengthen their career prospects. At the same time, SMEs, institutions, and enterprises face challenges in accessing affordable, customized software solutions to support their digital transformation. These fragmented journeys make it difficult for users to move seamlessly from learning to professional growth, and for organizations to scale their technology efficiently.
Fragmented user journey
Students, mentors, and clients had to jump between multiple pages and external forms just to complete a single task.
Lack of industry‑relevant education
Learners struggled to access courses that translate into practical, portfolio‑ready experience aligned with real job demands.
Limited career readiness
Job seekers lacked project‑based learning opportunities that could be showcased to employers.
Slow digital adoption for businesses
SMEs, institutions, and enterprises lacked affordable, customized software solutions to modernize operations.
Scalability challenges
Existing platforms often failed to support diverse user roles and growing service demands.
Solution
Kreavoks was designed as a unified digital ecosystem that seamlessly integrates personal branding, e‑learning, and custom software services. By applying an atomic design approach and consistent grid layout, the platform ensures a cohesive experience while addressing the distinct needs of students, mentors, and businesses. This structure not only simplifies fragmented user journeys but also empowers individuals to build career ready portfolios and organizations to accelerate digital transformation.
Unified Ecosystem
One platform combining education, mentorship, and digital agency services.
Project‑Based LMS
Courses designed to produce portfolio ready outputs aligned with industry demands.
Mentorship Booking Engine
Direct connections between learners and experts for personalized guidance.
Multi‑Role Authentication
Secure access tailored for students, mentors, and business clients.
Custom Software Services (B2B)
Scalable solutions for SMEs, institutions, and enterprises to modernize operations.
Dynamic Content Management
Flexible system that evolves with user needs without disrupting the core architecture.
Process
The Journey
Discovery & Market Insights
We began by exploring the digital education and agency landscape, identifying gaps where existing platforms failed to connect learning with career opportunities or provide scalable solutions for businesses. Through market research and persona development, we clarified the needs of students seeking project‑based learning, mentors aiming to build personal brands, and organizations requiring tailored software services. This foundation gave us a clear direction for Kreavoks as a unified ecosystem.
User & Market Research
We began by conducting a comprehensive market analysis to understand the state of e‑learning and digital agency platforms. This involved competitor benchmarking, identifying industry trends, and mapping gaps where existing solutions failed to connect education with career readiness or provide scalable digital services for businesses. The research highlighted recurring pain points such as fragmented user journeys, limited project‑based learning opportunities, and lack of accessible B2B technology solutions.
Persona Development
From these insights, we defined three core personas to guide the design and development process:
Students and job seekers who need industry‑relevant, project‑based courses that can be showcased as portfolios.
Mentors and experts who want to build personal brands, monetize their knowledge, and connect directly with learners.
Businesses and organizations (SMEs, institutions, enterprises) that require tailored software solutions to accelerate digital transformation. Each persona was detailed with goals, frustrations, and expectations, ensuring the platform addressed real needs rather than assumptions.
Value Proposition Mapping
The research and personas were synthesized into clear value propositions. For students, Kreavoks offers structured learning paths that translate into career opportunities. For mentors, it provides a marketplace to grow and monetize expertise. For businesses, it delivers scalable digital services to modernize operations. Together, these propositions positioned Kreavoks as a unified ecosystem bridging education, mentorship, and professional services.
Experience Design & Creative Strategy
Developed a cohesive design system in Figma, establishing typography, color palettes, and component libraries to ensure consistency across the platform. Created high-fidelity mockups for key user flows, including course enrollment, mentorship booking, and service inquiries, focusing on intuitive navigation and accessibility.
Empathize & Define
Through interviews, surveys, and empathy maps, we captured the motivations and frustrations of each user group. These insights were distilled into user journeys and problem statements, highlighting friction points in course enrollment, mentorship booking, and service inquiries.
Ideate & Prototype
Brainstorming sessions and low‑fidelity wireframes explored multiple design directions. Once validated, we developed high‑fidelity mockups in Figma, supported by an atomic design system with consistent typography, color tokens, and reusable components.
Test & Refine
Interactive prototypes were tested with representative users, gathering feedback on navigation, clarity, and accessibility. Iterations refined the flows, ensuring the platform delivered an intuitive and confidence‑building experience.
Platform Engineering & Feature Development
The frontend was built with React.js, leveraging modular components and responsive layouts for scalability. The backend, powered by Laravel, implemented a custom LMS, mentorship booking engine, and multi‑role authentication system. Secure payments, calendar scheduling, and real‑time notifications were integrated to complete the ecosystem.
Database Design & Management
A relational database schema was structured to handle diverse user roles, course progress tracking, and booking transactions. Indexing and normalization strategies were applied to improve query performance and maintain data integrity.
Payment Gateway (Midtrans Integration)
For transaction handling, we integrated Midtrans as the payment gateway. This included secure API communication, webhook handling for payment status updates, and error management to ensure reliable transaction flows. The integration supported multiple payment methods, enhancing accessibility for users and businesses.
Optimization & Trust Building
Performance was optimized through code splitting, lazy loading, and database indexing. Security measures such as CSRF protection, input validation, and secure session management safeguarded user data. Rigorous functional and black‑box testing validated stability under concurrent loads, reinforcing trust in the platform.
Launch & Growth Enablement
The platform was deployed to scalable cloud infrastructure using CI/CD pipelines for automated testing and delivery. Targeted digital marketing campaigns drove initial adoption, while analytics‑driven feedback loops enabled continuous improvement and sustainable growth.