The Digital Lab - Improving Course Landing Page UX

The Digital Lab - Improving Course Landing Page UX

The Digital Lab - Improving Course Landing Page UX

The Digital Lab

Web app, landing page

2025

The Digital Lab is a Vietnamese EdTech platform offering professional courses in data, marketing, and communications through an LMS, in collaboration with UEH.

I was brought in as a freelance UI/UX Designer to improve the existing course landing page layout. Instead of redesigning from scratch, the goal was to refine key UI/UX issues and create a reusable template that could be applied across multiple programs such as DA, BA, and IMC.

Context & Problem

Context

The Digital Lab offers multiple courses such as Data Analytics (DA), Business Analytics (BA), and IMC. Each course had its own landing page, but they were designed independently without a shared system.

As a result, the overall experience felt inconsistent and difficult to navigate, especially for new users trying to evaluate a course.

Problem Statement

The existing landing pages had the right content, but the experience felt heavy, inconsistent, and hard to scan. The main issue was not only visual polish, the page structure did not guide prospective learners through a clear decision-making journey.

1. Weak visual hierarchy

  • Text sizes, weights, colors, and spacing were not used consistently

  • Too many elements competed for attention at the same time

  • Users did not have a clear reading path through the page

2. Content flow did not match user intent

  • The page introduced forms and dense curriculum details too early

  • Prospective learners first need to understand:

    • Is this course for me?

    • What will I learn?

    • Can I trust this program?

    • How do I enroll?

  • The old structure did not answer these questions in a natural order

3. Weak CTA structure

  • CTAs appeared in different styles, sizes, and positions

  • Repeated buttons reduced the sense of priority

  • There was no clear conversion moment or guided enrollment path

Design Goals

  • Improve scanability so users can quickly understand the course

  • Create a consistent layout system across all pages

  • Align content flow with how users make decisions

  • Make CTAs clearer and more intentional

  • Build a reusable template for future courses

Given Solutions

1. Structured layout system

  • Standardized spacing, alignment, and section rhythm

  • Created a consistent container and layout grid

  • Made the page feel more organized and predictable

2. Stronger visual hierarchy

  • Reduced long text blocks

  • Introduced clearer headings and grouping

  • Highlighted key content:

    • Benefits

    • Outcomes

    • Important information

3. Reorganized content flow

  • Restructured sections to match user decision flow:

    • Introduction → value → details → trust → CTA

  • Delayed heavy content until after the core value is clear

4. Clearer CTA structure

  • Reduced visual noise from repeated buttons

  • Defined primary vs secondary CTAs

  • Placed CTAs at more intentional moments

5. Cleaner and more consistent UI

  • Simplified card layouts and section design

  • Standardized icons, colors, and typography

  • Removed unnecessary decoration

6. Reusable landing page template

  • Built a flexible layout for multiple programs

  • Applied across DA, BA, and IMC, etc…

  • Made future pages easier to scale and maintain

The Design

Ready to build something amazing?

Let's work together