Modular & Block-Based Website Redesign

The problem

The previous website relied heavily on plugins and external developers, resulting in slow performance, frequent errors, and high maintenance costs. More critically, key user flows such as consultation requests and application forms frequently failed, directly impacting user trust and business performance.

The company’s initial plan was to migrate the existing website almost 1:1, rebuilding pages with a hard-coded structure to improve stability. While this approach could resolve immediate technical issues, it maintained the same page-based structure and did not address the fundamental problem: long-term dependency on external developers.

Design strategy

After several discussions with the CEO, the priorities became clear: relaunch quickly, reduce reliance on hourly external developers, improve performance, and let the internal team manage the site themselves.

Instead of rebuilding pages one by one, I proposed shifting from a page-based approach to a modular, block-based system. By designing reusable content blocks, such as 1- and 2-column layouts that flexibly hold images, titles, and tables, pages could be assembled without additional development.

This approach reframed the website from a collection of fixed pages into a system of reusable components, enabling internal teams to create and manage content independently.

Process

Instead of a linear redesign, I focused on restructuring the website into a scalable system.

1. Audit & simplify

   Reviewed all existing pages, identified recurring patterns, and grouped content into clear page types to reduce complexity.

2. Define the modular system

   Designed reusable blocks (hero sections, 2-column layouts, repeated content, and forms) to standardize page structures.

3. Template collaboration

   Worked with an external developer to build 2–3 sample templates that established the foundation of the system.

4. Internal assembly

   Redesigned all website pages and assembled roughly 80% of them independently using reusable blocks, significantly reducing developer involvement.

5. Ongoing expansion

   Launched the Korean and English sites, then extended the same system to additional languages, including Thai and Chinese.

Knowledge base enhancement

Challenges

Orientation and FAQ content lived in long, static PDFs, with information spread across multiple documents that staff had to locate and share manually. Updating anything meant editing and re-uploading a file.

Solution

I integrated a searchable knowledge base directly into the website, organizing content into clear categories with download and copy-link options. Staff can now update content directly, without touching a PDF, improving both client access and internal workflow.

Impact

Cost & efficiency. The developer quoted per page, so reducing developer-built pages from 30 to 10 brought content-page development cost down by the same proportion. Forms and list pages were handled separately, designed by me and built by the developer.

Faster delivery. While the developer focused on templates, backend, and form development, I assembled the remaining pages, allowing parallel work and faster overall delivery.

Operational independence. Internal staff can now build and manage most content pages on their own, publishing updates quickly through reusable blocks instead of waiting on a developer.

Improved UX & consistency. The modular system simplified the design and aligned it with a more professional, trustworthy brand. Standardized blocks keep layouts and interactions consistent across pages.

Reflection

This project pushed me to look past surface-level fixes and design at the system level, balancing real business constraints against user needs in a small team with limited resources. It reinforced that product design isn’t just about interfaces, but about creating scalable, maintainable systems that fit how a real team actually works.