eGlobal Landing Page

Overview

The Landing Page system is designed to help marketing and sales teams quickly create, publish, and track campaign pages without relying heavily on developers. Each page can be customized with layouts, content blocks, booking forms, and feedback collection, while also supporting traffic analytics.

Starting from a text-heavy SDD, I translated the written requirements into a clear step-by-step flow that worked for both users and admins.

The result is a tool that enables non-technical users to generate professional landing pages, monitor performance, and iterate based on real-time data, all within one centralized platform.

My Role

Requirement Translation

Converted text-heavy SDD documentation into actionable flows and clear user journeys, especially clarifying and structuring the requirements around content management.

UI/UX Design

Designed frontend pages to ensure consistency across templates
Designed the admin panel for CRUD operations
Defined component styles (grid, list, carousel, button, etc.)
Specified adjustable properties (color, padding, spacing, etc.)
Created a system UI panel to align component data structures with the backend developer

Frontend Development

Built the entire frontend using React and Tailwind Css, implementing responsive layouts and modular components.
Used Next.js server-side rendering to generate dynamic meta tags for each lanidng page info, ensuring proper SEO indexing and accurate previews on social platforms.
Define reusable components and a system UI panel to manage diverse content needs—from simple text and media to complex modules—while aligning component data structures with the backend through an interface-based workflow.

Collaboration

Worked with the backend developer to align data structures and storage approaches
Proposed new requirements as more content sections were added over time
Led discussions to resolve differences and balance implementation constraints
Ensured smooth integration between the admin panel, frontend pages, and backend APIs

UI Highlights

Landing Page Builder

Create landing pages by combining flexible blocks—such as text, images, videos, files, and modules like blogs, events, or courses—with real-time previews across desktop and mobile.

Admin panel interface of landing page list

Detailed editing view of contents

Preview the different devices of the frontend

Content Components & Customization

Each landing page can include flexible components such as text, images, videos, carousels, buttons, and even modules from blogs, events, and courses. Components come with adjustable styles like color, padding, and layout, giving non-technical users design flexibility.

List of all components

Adjust styles like color, padding, and text for the component

Inline editing of content with live preview, allowing users to adjust visuals directly on the page

Frontend Preview

Real view of the published landing page as seen on the live URL

View of the live landing page

System UI Panel

A centralized system admin interface for defining reusable components and configuring styles, ensuring consistent design and smooth collaboration with backend data structures.

System panel interface to list components

System panel interface for defining components

System panel interface to list attributes and attribute items

System panel interface to editing components of landing page module

Technical Highlights

Dynamic Content Components

Component Level

Defined reusable blocks such as grids, carousels, buttons, and forms, each serving as a building unit for landing pages.

Attribute Level

For every component, attributes (e.g., alignment, max height, padding, background color) were introduced to control layout and style.

Attribute Items

Each attribute supports selectable or configurable values (e.g., left/center/right for alignment, S/M/L for size), ensuring consistency across templates.

Customizability

Allowed both default and custom values, enabling quick template setup while giving flexibility for unique campaign requirements.

Extensibility

New UI capabilities can be introduced by simply adding attributes or items, without modifying the base component logic.

System UI Integration

Built an admin interface for defining and managing these components, so designers and backend engineers could collaborate directly via UI rather than hardcoded structures.

Dynamic Rendering & Performance Optimization

Implemented a rendering pipeline where landing pages are dynamically assembled from stored component data, while optimizing performance and UX.

Lazy Loading

Loaded components only when they entered the viewport, reducing initial API calls and improving first paint speed.

Skeleton Loaders

Used animate-pulse utilities to provide smooth skeleton states, giving users instant visual feedback while content was fetched.

Responsive Rendering

Ensured layouts adapt consistently across devices by reusing component structures with flexible attributes.

Modular Templates

Maintained scalability by keeping components independent, allowing new layouts or sections to be introduced without rewriting the rendering logic.

Real-time Preview & Consistency

Instant Preview in Admin Panel

Added a live preview function in the admin panel, allowing users to see changes applied in real time across desktop and mobile views. This reduced iteration cycles and gave non-technical users more confidence before publishing.
Cross-frontend Consistency

Ensured component styles stayed consistent between the admin panel preview and the actual frontend rendering. Any style updates were synchronized, minimizing discrepancies and maintaining a reliable WYSIWYG experience.

Next.js Server Rendering

Used Next.js server-side rendering to dynamically generate metadata for each landing page based on admin panel settings.

Fields like meta_title, meta_description, and Open Graph properties (site name, title, description) are applied directly from the landing page configuration, ensuring accurate previews on social platforms and improved SEO.

Additionally, source parameters defined in the admin panel (e.g., Facebook, Instagram, YouTube) are applied to URLs, making it easier to track and attribute traffic across different channels.

API Collaboration

Defined and refined API contracts with the backend engineer to support evolving content modules.
Proposed schema changes as new components (e.g., forms, bookings) were introduced, balancing frontend flexibility with backend feasibility.
Worked closely in one-on-one discussions to align on data structures, ensuring smooth integration and quick iteration.

Challenges & Solutions

Defining Data Structures

The system needed to support a wide variety of components (text, media, carousels, booking forms, etc.), each with customizable styles and attributes.

Solution

Collaborated with the backend engineer to define a scalable data schema for components → attributes → attribute items. This made it possible to store configurations in a consistent way and render them correctly on the frontend.

Designing Components from Scratch

Unlike projects with pre-defined templates, all landing page layouts and content modules had to be defined from zero.

Solution

Designed reusable components with defined attributes (layout, style, behavior), and created multiple templates for customers to select. This allowed flexible content composition while giving non-technical users ready-made starting points.

Performance with Configurable Pages

A landing page could contain many components and heavy media.

Solution

Implemented lazy loading on the frontend with skeleton loaders, improving perceived performance and keeping API calls efficient.

Potential Improvements

Saving Strategy & Draft Layer

The current design uses a single API to save all sections at once. I'd redesign it to save per section to reduce payloads and server load, enable autosave, and minimize merge conflicts. For published pages, edits should go into a stash/draft layer with preview and compare before promoting changes to live, backed by basic versioning (page/section version, timestamps) and optimistic concurrency.

Advanced Component Customization

Currently, components support only a fixed set of attributes such as layout, color, and spacing. In the future, customization could be expanded to give users more design freedom, for example:

Button – allow custom icons in addition to text.
Block – support background color and border-radius options.
General Components – enable animation effects (e.g., fade-in, slide-up) for more engaging user experiences.

This would balance ease of use with creative flexibility, making landing pages feel less rigid while still maintaining consistency across templates.

Impact

By translating a text-heavy SDD into clear flows and reusable components, I delivered a landing page system that enabled marketing and sales teams to create and manage campaign pages without relying on developers. The step-by-step builder, real-time preview, and template options lowered the learning curve, while flexible components and traffic tracking gave non-technical users the tools to publish and iterate quickly.

This project demonstrates my ability to:
Convert raw requirements into structured UI/UX flows and working applications.
Design modular systems that scale with new templates and components.
Improve performance and user experience with techniques like lazy loading, skeleton loaders, and live previews.
Collaborate effectively with a single backend engineer to align data structures and APIs.

Get in Touch

I'm open to new opportunities and collaborations. Whether you're looking for a frontend developer or a product-minded engineer, feel free to reach out.

Reach Out Today More Works