EdTech
2025
Redesigning Akal Landing Pages
Overview
Redesigned Akal’s course landing pages to help organizers showcase their services and products more effectively. The new design enhances engagement, improves clarity, and guide users toward course enrollment more effectively.
Live site
Scope
Product Designer — defining visual style, redesigning pages, and ensuring cross-device consistency.
Tools
Figma
New design
Old design
The problem
Content overload
Organizers often upload unpredictable and extensive content, resulting in cluttered layouts and inconsistent experiences.
Clarity
Multiple course offerings made it hard for users to identify the most relevant one for their needs.
Diverse type of users
The landing pages attract a wide range of users, from beginners to tech-savvy learners. Each with different levels of digital literacy.
Benchmarked EdTech & payment-driven platforms
Most users expect websites to work the same way they’re used to.
So, I analyzed how other platforms operate to uncover best practices.
By applying these best practices, we aimed to reduce user drop-offs during course enrollments.
Key insight:
Clear visual hierarchy improves engagement.
Simpler navigation support faster decision-making process.
CTA placement above the fold enables clear and immediate action.
Seamless payment flow with transparent information builds trust.
Design explorations:
landing page variants
Three layout options were explored to evaluate how pricing, content, and testimonials are presented, while ensuring the layout remains flexible and easy to navigate as Akal organizers manage dynamic content.
Option 1: Clean & Linear
Clean and easy to read
Works well for simple, static content
Pricing loses visibility as more modules are added
Low price awareness
Text-only testimonials feel less trustworthy
Limited flexibility as content grows
Option 2: Improved Hierarchy
Clearer structure than Option 1
More scannable layout
Pricing still easy to miss
Linear flow becomes long with dynamic content
Weak trust signals from testimonials
Option 3: Side-by-Side with Sticky Pricing (Final)
Pricing stays visible, improving awareness
Side-by-side layout is easier to scan and compare
Screenshot testimonials build stronger trust
Scales better as dynamic content increases
Denser layout that requires careful spacing
Optimized layout for clarity & conversion
The new layout enhances readability and focus, making it easier for users to engage with course content and helping organizers drive higher course enrollments and conversions.
Accessible accross devices
A responsive, mobile-friendly design ensures customers can explore and course enrollments anytime and anywhere, helping organizers capture more leads and increase conversions.
UI Color decision: flexible color tokens
To support different Akal organizers, the UI uses a flexible color token system instead of fixed themes.
This approach keeps the layout consistent while allowing each organizer’s brand identity to be reflected. Text colors adapt automatically to maintain readability.
The idea of color customization was discussed collaboratively and translated into a scalable UI system.
The outcome
Positive first impressions from organizer
The positive feedback highlighted the redesign as a significant improvement in clarity and user experience
Desain Lebih Ringkas & Nyaman Tampilan bersih, font lebih besar, dan harga selalu terlihat tanpa scroll. Bisa ganti tema (terang/gelap) untuk header.
Akal stakeholder
Posted on LinkedIn
