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, I identified the key priorities for this project:

• Save time — quickly stabilize and relaunch the website.
• Reduce cost — minimize reliance on hourly-based external developers.
• Improve performance — fix errors and optimize speed.
• Enable internal management — reduce dependency on external support.

Instead of rebuilding pages individually, I proposed shifting from a page-based approach to a modular, block-based system. By designing reusable content blocks — such as 1-column and 2-column layouts that can flexibly incorporate 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.

This shift fundamentally changed the scope of the project from a simple redesign to a sustainable system:

• Reduced developer dependency — internal staff could assemble pages without relying on external developers.
• Faster content updates — new pages and updates could be published quickly without development cycles.
• Lower long-term costs — instead of rebuilding ~20 pages individually, only a few modular templates were developed and scaled internally.
• Fit for a small team — the solution aligned with the company’s reality: no dedicated IT team.

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 categorized 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 versions, and extended the same modular system to additional languages, including Thai and Chinese.

Knowledge base enhancement

Challenges

• Long, hard-to-navigate PDFs.
• Information spread across multiple documents.
• A manual process to locate and share files.
• Content updates required editing and re-uploading PDFs.

Solution

• Integrated a mini knowledge base into the website.
• Organized content into clear categories and topics.
• Added “Download” and “Copy Link” features.
• Enabled direct content updates without relying on PDFs.

→  Improved both client access and internal workflow efficiency.

Impact

Cost reduction. The initial quote covered 22 individually built pages. By grouping similar pages and introducing a modular system, developer-built pages were reduced to 12, significantly lowering costs.

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 create and manage ~80% of pages without developer support, with faster updates enabled by reusable blocks.

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

Reflection

Through this project, I learned to:

• Identify root problems beyond surface-level issues, including operational dependency.
• Think in system-level solutions rather than isolated page improvements.
• Balance business constraints with user needs in a resource-limited environment.

This experience reinforced that product design is not just about interfaces, but about creating scalable, maintainable systems aligned with real business needs.