Completed

Heungkuk Fire & Marine Insurance - Main Website Search Renewal

Back to Projects
Java
JSP
JSTL
JavaScript
AJAX
Oracle
SVN
Linux
Live search
6
Result categories
2022 — still live
Shipped
Full-stack
Layer

Figures

Where this delivery sits. The search engine is the same one behind my other Konan deliveries; what was mine here was everything in front of it — the JSP/JSTL page, the AJAX layer that requests each category, the incremental rendering, and the log-derived popular terms and completion candidates that populate the empty state.
Where this delivery sits. The search engine is the same one behind my other Konan deliveries; what was mine here was everything in front of it — the JSP/JSTL page, the AJAX layer that requests each category, the incremental rendering, and the log-derived popular terms and completion candidates that populate the empty state.
The page still running today, on a query for 보험 (insurance): popular-term chips above, recent searches, then 468 results split by category with a count on each tab. The chips are worth a second look — they read 제지급 · 철회 · 배서 · 금리인하 · 모바일 here, and a different five when I checked earlier the same day. They are derived from the search logs and rotate with them, which is the whole point of not hard-coding an empty state. The menu results underneath show what Korean morphological indexing buys you: 보험 is highlighted inside 장기보험증권, 자동차보험금지급확인서 and 휴면보험금신청 — mid-word, in compounds the user never typed. Substring matching would find some of these by accident and miss the rest.Open full size
The page still running today, on a query for 보험 (insurance): popular-term chips above, recent searches, then 468 results split by category with a count on each tab. The chips are worth a second look — they read 제지급 · 철회 · 배서 · 금리인하 · 모바일 here, and a different five when I checked earlier the same day. They are derived from the search logs and rotate with them, which is the whole point of not hard-coding an empty state. The menu results underneath show what Korean morphological indexing buys you: 보험 is highlighted inside 장기보험증권, 자동차보험금지급확인서 and 휴면보험금신청 — mid-word, in compounds the user never typed. Substring matching would find some of these by accident and miss the rest.
Two of the six categories have shapes the others do not. Forms are PDFs, indexed by their extracted text and returned as downloads rather than pages. Glossary entries (104 of them for this query) expand inline, so a user who searched a term they did not understand gets the definition without leaving the results — with the query highlighted through the definition body as well. Each of these needed its own template and its own rendering path in the page.Open full size
Two of the six categories have shapes the others do not. Forms are PDFs, indexed by their extracted text and returned as downloads rather than pages. Glossary entries (104 of them for this query) expand inline, so a user who searched a term they did not understand gets the definition without leaving the results — with the query highlighted through the definition body as well. Each of these needed its own template and its own rendering path in the page.

Overview

Heungkuk Fire & Marine is a Korean insurer. This delivery was the search on their main site — and unlike my other Konan projects, the engine was not the hard part. Everything the user touches was: the page, the AJAX layer, the result rendering, and the empty state. It was my first full-stack delivery, and the project where I found out that the parts of engineering I was weakest at were the parts users actually touch. It shipped in 2022 and the search is still running.

What was actually mine

The search platform already existed — I had worked on it for other clients. What did not exist was this site's search experience. I built the JSP/JSTL pages, the JavaScript that talks to the search API, and the rendering of six differently-shaped result categories: site menus, insurance products, FAQ entries, downloadable PDF forms, the insurance glossary, and everything else. Each category has its own count, and the counts are shown even when they are zero. That sounds trivial and is not: it tells the user the shape of the result set before they open anything, so nobody taps through three empty tabs to find out their query only matched notices.

Continuous scrolling instead of paging

The requirement was that results keep loading as the user scrolls, rather than replacing the page with the next set. So paging moved into AJAX: the current page stays where it is and the next block of results is appended below. What made it harder than it sounds is that scroll position, request state and rendered output all have to stay consistent with each other while the user keeps scrolling — and the same path is exercised again when they switch category or search again. Auto-completion has the same shape of problem on a shorter timescale. This is where most of the JavaScript work on this project went, and almost none of it is visible when it is right.

The empty state

A search box with nothing in it is a dead end, especially on an insurance site where users often do not know the term for the thing they want. So the empty state shows popular search terms as tappable chips. They come from the search logs rather than an editor's guess, and they still rotate: checking the live site twice on the same day returned 보험금청구 · 자동이체 · 약관 · 주행거리 · 해지 once and 제지급 · 철회 · 배서 · 금리인하 · 모바일 the next time. That is the same principle as the recommended terms at Millie's Library and the related terms in the Supreme Court system — three different domains, one idea: the logs already know what people are looking for.

What I noted at the time

Two things, written down when the project closed: clean code, and script execution order. Both were front-end problems I had not had to reason about before this delivery.