DIRI: Premium eLearning Platform Website Built in Webflow
Victor Adebayo
DIRI — eLearning Platform Website
Web Design · UX/UI Design · Webflow Development · EdTech
Project Type: EdTech / eLearning / Professional Development
Primary Objective: Make course discovery easier, communicate the value of cinematic learning, and convert individuals and businesses into learners
Platform: Webflow
Role: Web Designer & Webflow Developer
Deliverables: UX/UI Design · Responsive Website Design · Webflow Development · Course Discovery · CMS Structure · Pricing Experience · Business Landing Pages · Lead Generation · SEO & Performance Optimization
1. Project Overview
DIRI is a Malaysian eLearning platform created to help people develop new skills and learn directly from respected local leaders, professionals, entrepreneurs, creatives, and personalities.
The platform combines self-paced learning with high-production educational content, supplementary course materials, bilingual subtitles, and a learning approach centered around what DIRI calls Resonance Learning. Its audience includes individual learners, businesses looking to develop employees, and professionals interested in becoming mentors.
The goal of the website was to create a digital experience that felt more like a premium learning platform than a traditional training website.
I focused on building a clear journey that helped visitors quickly understand what DIRI offers, discover relevant courses, learn about mentors, compare learning options, and move naturally toward creating an account or purchasing a course.
The overall journey became:
Discover → Explore → Connect With a Mentor → Understand the Value → Choose a Plan → Start Learning
2. The Challenge
DIRI needed to communicate several different ideas within one experience.
It is not only a course marketplace.
The platform also serves:
Individual learners
Corporate teams
HR and learning departments
Industry mentors
Professionals developing new skills
People looking for career and personal-development content
The course catalog also spans different categories, including business, communication, mindset, wellness, design, lifestyle, science, entertainment, and more.
Without the right hierarchy, the website could quickly become overwhelming.
The key UX challenges were:
Explaining DIRI's concept immediately
Making course discovery simple
Giving individual mentors enough visibility
Communicating the quality of the course production
Separating individual and business learning journeys
Making pricing easier to understand
Explaining Resonance Learning without becoming too academic
Supporting free previews and paid courses
Creating a clear path into the external learning platform
Making bilingual and supplementary learning benefits visible
Supporting mentor applications
Keeping the experience strong across desktop, tablet, and mobile
The challenge was ultimately about turning a broad learning ecosystem into a simple, inviting, and conversion-focused digital journey.
3. Design Strategy
I structured the website around four priorities:
Inspiration → Discovery → Trust → Learning
Lead With Possibility
The homepage opens with a strong idea:
Learn from Malaysia's best and discover your undiscovered potential.
Instead of starting with technical information about the platform, the website begins with aspiration.
This helps visitors connect with the outcome first: becoming better at something they care about.
Make the Mentors Part of the Product
DIRI's strongest differentiator is not simply the number of courses available.
It is who people are learning from.
The experience therefore gives mentors and their stories strong visual importance.
Rather than presenting courses as anonymous training modules, I structured the content around recognizable individuals, their experience, and the knowledge they bring.
This creates a stronger emotional reason to click into a course.
Separate Different Audiences
DIRI serves three major audiences:
Learners
People looking to develop skills or explore new subjects.
Employers
Businesses looking to train, upskill, and develop employees.
Mentors
Professionals who want to contribute their experience and build their influence.
I separated these pathways early so each user can quickly understand what the platform offers them.
Keep Learning Accessible
The website reinforces several practical benefits:
Self-paced learning
Desktop and mobile browser access
High-quality video
Supplementary learning materials
English and Bahasa Melayu subtitles
Free lesson previews
Multiple purchase options
These details reduce the barriers around starting.
4. UX/UI Design
Hero Section
The hero was designed around a simple message of personal growth.
Rather than introducing the entire product ecosystem immediately, I focused on:
What can I achieve here?
Primary CTAs such as:
Explore Courses
and
Try It Now
support two different types of visitors.
One may want to browse first, while another is already ready to experience the platform.
This gives the opening section a clear conversion purpose without making it feel overly sales-focused.
Visual Direction
DIRI produces cinematic-level educational content, so the website needed to visually reflect that quality.
I used a design direction centered around:
Large mentor imagery
Strong video content
Editorial typography
Clean spacing
High-contrast CTAs
Course-focused cards
Subtle motion
Strong photography
The website avoids looking like a typical corporate training portal.
Instead, it feels closer to a premium streaming or editorial platform built around learning.
Typography System
The typography system was designed to balance personality with clarity.
Styles were created for:
Hero statements
Course names
Mentor names
Section headings
Learning outcomes
Pricing
Lesson information
FAQs
Calls-to-action
Strong headlines create visual impact, while supporting copy stays easy to scan.
This is particularly important because individual course pages can contain substantial educational information.
Course Discovery
The course catalog was organized around recognizable categories including:
Arts & Entertainment
Business
Communication
Design & Style
Home & Lifestyle
Mindset
Science & Tech
Sports & Gaming
Wellness
This gives users more control over discovery instead of forcing them to scroll through one large collection.
Course cards are structured consistently so visitors can quickly identify the mentor, course topic, and area of learning.
Course Detail Pages
Individual course pages needed to answer a very different set of questions from the homepage.
Visitors need to know:
What will I learn?
Who is teaching me?
How long is the course?
What is included?
What does it cost?
Can I preview it first?
The course pages therefore bring together:
Course introduction
Overview
Learning outcomes
Lesson structure
Mentor profile
Course duration
Category
Language
Subtitles
Pricing
Free preview
Purchase CTA
Subscription options
For example, DIRI course pages display structured lesson plans alongside mentor information and practical learning outcomes, making the product easier to evaluate before purchase.
Mentor Presentation
The mentor is treated as one of the strongest conversion elements.
Instead of simply displaying a small instructor photo, mentor sections provide context around:
Professional background
Experience
Achievements
Perspective
Why they are qualified to teach the topic
This helps visitors understand why learning from that specific person is valuable.
The website then connects the mentor's expertise directly to the course content.
Pricing Experience
DIRI offers multiple levels of commitment, so the pricing experience needed to make the differences easy to understand.
The current structure includes:
Free Preview
Allows users to experience a lesson without payment.
Individual Course
Provides access to a selected course.
DIRI All Access
Provides broader access to the course library.
DIRI for Business
Offers customized learning options for companies.
I structured the pricing interface around benefits rather than price alone.
That makes it easier for visitors to compare what they receive at each level and decide based on their learning goals.
Free Preview Journey
One of the strongest conversion tools is the ability to experience a lesson before purchasing.
The free-preview option reduces the risk of paying for a course without knowing what the teaching style or production quality feels like.
From a UX perspective, this gives new users an easier first step:
Browse → Preview → Build Confidence → Purchase
DIRI for Business
Corporate learning required a separate journey.
Businesses are not simply buying the same product as an individual learner.
They may be looking for:
Employee development
Leadership training
New-hire onboarding
Workforce upskilling
Team learning
Progress monitoring
HRDC-claimable learning
DIRI for Business also communicates its learning library and corporate options separately from the consumer experience.
I gave this audience a dedicated landing experience so business decision-makers can understand the organizational value without moving through consumer pricing first.
Learners, Employers & Mentors
One of the more important information-architecture decisions was making the platform's three audiences clear.
The homepage introduces:
For Learners
Access courses taught by industry leaders.
For Employers
Give teams access to learning and development.
For Mentors
Share experience and inspire future talent.
This makes DIRI feel like an ecosystem rather than simply a video-course library.
FAQ Experience
Because DIRI introduces several concepts—subscriptions, self-paced courses, corporate training, HRDC eligibility, mentors, and Resonance Learning—the FAQ is important.
I used an expandable FAQ structure so users could explore information around:
How DIRI works
Course timing
Mobile access
Becoming a mentor
Corporate learning
HRDC
Subscription options
This keeps the main marketing content concise while still supporting people who need deeper information.
Responsive Experience
The platform needed to work particularly well on mobile because DIRI itself promotes browser-based learning across desktop and smartphone devices.
I optimized:
Course cards
Mentor imagery
Navigation
Pricing cards
Lesson lists
Video sections
CTA buttons
FAQ interactions
Business content
Forms
Typography
On smaller screens, the experience becomes more linear without losing the cinematic quality of the visual design.
5. Website Architecture
The website architecture was designed to support people at different stages of their learning journey.
Homepage
Introduces the platform, value proposition, audiences, current courses, team, business offering, mentor pathway, and FAQs.
Courses
The course library acts as the main discovery experience.
Users can browse content across multiple categories and select courses based on their interests or development goals.
Course Detail Pages
Each course receives a dedicated page for:
Overview
Learning outcomes
Lesson plan
Mentor
Duration
Language
Pricing
Free preview
Purchase options
This gives individual courses enough space to communicate their value without overwhelming the main catalog.
Pricing
The pricing page compares free previews, individual course purchases, all-access learning, and corporate plans.
DIRI for Business
Provides a dedicated experience for HR teams, businesses, SMEs, and organizations looking to develop employees.
About
Communicates DIRI's mission, vision, educational philosophy, and focus on creating high-quality Malaysian learning experiences.
Become a Mentor
Provides a pathway for experienced professionals interested in teaching and contributing their knowledge to the platform.
Blog / Newsroom
Provides a scalable content environment for:
Learning insights
Mentor stories
Course announcements
Career development
Platform updates
Educational thought leadership
This also creates opportunities for organic search visibility.
Contact
Provides a general enquiry experience for learners, companies, mentors, and partners.
Learning Platform Integration
The marketing website connects visitors to the separate learning experience where users can sign in and consume purchased content.
This separation allows the Webflow marketing website to focus on discovery and conversion while the learning platform focuses on course delivery and progress.
6. Webflow Development
After establishing the UX and visual system, I translated the marketing website into a responsive Webflow build.
The development focused on creating a flexible structure capable of supporting a growing course library.
Key development areas included:
Responsive Webflow development
Reusable sections
Webflow CMS architecture
CMS-powered course pages
Mentor CMS structure
Course category filtering
Reusable course cards
Pricing components
Business landing pages
Mentor application forms
Contact forms
Newsletter signup
FAQ interactions
Video embeds
Responsive navigation
Login and learning-platform links
Custom hover states
Scroll interactions
Responsive imagery
Clean class structure
SEO-friendly headings
Meta titles and descriptions
Accessibility-conscious interactions
Performance optimization
Cross-browser testing
Cross-device testing
The CMS structure makes it easier to add new courses and mentors without rebuilding the website each time.
7. Design & Development Process
Research → UX Structure → Wireframes → UI Design → Design System → Webflow Development → CMS Setup → Responsive Optimization → Testing → Launch
Research
I started by understanding the different audiences, course formats, mentor model, business-learning offering, pricing structure, and how the learning platform works.
The main question was:
How do we make learning feel inspiring before someone has watched the first lesson?
UX Structure
I organized the experience around the user's decision journey:
What is DIRI? → What can I learn? → Who will teach me? → What will I get from the course? → How much does it cost? → Can I try it? → How do I start?
This created a clear foundation for the website.
Wireframes
The wireframes focused on:
Hero messaging
Audience segmentation
Course discovery
Course-detail hierarchy
Mentor profiles
Pricing
Business learning
Testimonials
FAQs
Conversion CTAs
The priority was creating an intuitive learning journey before introducing the full visual identity.
UI Design
The wireframes were transformed into a polished, cinematic interface.
Large mentor imagery and video content give the experience personality, while cleaner supporting sections ensure course details remain easy to understand.
The goal was to balance inspiration with usability.
Design System
Reusable rules were created for:
Typography
Buttons
Colors
Course cards
Mentor cards
Category labels
Pricing cards
Lesson lists
Forms
FAQs
Navigation
Section spacing
Responsive behavior
This keeps a growing content platform visually consistent.
Webflow Development
The approved interface was translated into reusable Webflow components.
The marketing website was built as a flexible front end that could evolve alongside the course library.
CMS Setup
Webflow CMS was structured around content that needs to grow over time.
This includes:
Courses
Mentors
Categories
Articles
News
Supporting educational content
This reduces the need to manually build new layouts whenever DIRI launches additional courses.
Responsive Optimization
Every major section was reviewed individually across desktop, tablet, and mobile.
Special attention was given to:
Course cards
Video content
Lesson plans
Pricing
Mentor sections
Navigation
Forms
Business content
This keeps the experience usable while preserving its premium visual direction.
Testing
Before launch, I reviewed:
Course navigation
Category links
Free previews
Purchase CTAs
Login links
Pricing pathways
Forms
Newsletter signup
FAQ interactions
Mobile navigation
CMS pages
Responsive layouts
Browser consistency
Launch
The final stage focused on performance, accessibility, responsive consistency, SEO foundations, conversion pathways, and the connection between the Webflow marketing site and the learning platform.
8. Key Features
Custom Webflow eLearning website
Premium course-discovery experience
CMS-powered course catalog
Course category filtering
Individual course landing pages
Mentor profile sections
Lesson-plan presentation
Learning-outcome sections
Video and sample-lesson content
Free course previews
Individual course purchases
All-access subscription pathway
Corporate learning experience
DIRI for Business
HRDC-related business information
Mentor recruitment pathway
Responsive pricing components
Newsletter lead generation
Interactive FAQs
Contact forms
External learning-platform integration
Mobile-optimized learning discovery
Reusable Webflow components
SEO-conscious architecture
Accessibility considerations
Performance optimization
9. Final Result
The final DIRI website turns a broad learning platform into a clear, inspiring, and easy-to-explore digital experience.
Visitors can immediately understand what makes DIRI different, browse courses based on their interests, connect with recognizable local mentors, preview learning content, compare pricing options, and move naturally into the learning platform.
The website also creates clear journeys for very different audiences.
Individual learners can focus on courses and personal development, businesses can explore workforce-learning solutions, and experienced professionals can discover opportunities to become mentors.
The combination of cinematic visuals, strong mentor storytelling, structured course information, clear pricing, free previews, and responsive design helps the platform feel premium without making the learning process feel intimidating.
The Webflow CMS structure also creates room for the platform to continue growing as new courses, mentors, categories, and educational content are introduced.
The result is a modern EdTech website that combines premium storytelling with practical course discovery, giving DIRI a stronger digital platform for helping people discover new skills, learn from respected voices, and take the next step in their personal or professional growth.
Like this project
Posted Oct 8, 2026
A cinematic, mentor-led website for DIRI, a Malaysian eLearning platform. I designed and developed the Webflow experience to make course discovery intuitive, explain the Resonance Learning approach, and guide visitors from browsing to a free preview or purchase.
Likes
5
Views
7
