Owl Carousel
Project Overview
KTC x SwatchPAY! is an informational page introducing contactless payments through Swatch watches. It allows users to explore the service benefits, learn how to activate SwatchPAY! through the mobile application, review compatible watch models, and find answers to frequently asked questions—all in one place.
I was responsible for the front-end development of the original KTC website version. Working from designs provided by the design team, I transformed the visual concepts into a functional, responsive webpage optimized for various screen sizes and devices.
Scope of Work
I developed the page structure and user interface using HTML, CSS, and JavaScript. The implementation included the hero banner, feature cards, SwatchPAY! activation instructions, contactless payment section, compatible watch listings, an accordion-based FAQ section, and a call-to-action section for KTC credit card applications.
I also optimized the page for desktop, tablet, and mobile devices, ensuring that the layout, spacing, typography, imagery, and interactive components accurately reflected the provided designs before launch.
Challenges
One of the main challenges was translating a visually distinctive design featuring dark backgrounds, neon lighting, lifestyle photography, and product imagery into a responsive webpage. The implementation needed to preserve the intended brand atmosphere while maintaining legible content and a clear visual hierarchy across multiple screen sizes.
The page also contained sections with several different layout patterns, including feature-card grids, activation instructions, two-column image and content arrangements, compatible watch listings, and an interactive FAQ accordion. This required a flexible front-end structure that could adapt effectively at each responsive breakpoint.
Results
The completed page brought together all essential information about SwatchPAY! within a single responsive experience. Its structured content and interactive components made it easier for users to understand the service, explore compatible watches, and follow the activation process across different devices.
KTC subsequently migrated its website to a new CMS and rebuilt the page. Therefore, the current implementation does not use the same codebase presented in this case study.
