Call Defender product landing page

Project type

Solo project of landing page design


2019 March - May


Cross-functional cooperation, executing design at all stage from concept to the end, working closely with front-end developer.

Tools used

Sketch, Zeplin, Protopie

Define problem, identify goal.

Call Defender is the main caller-ID identification application in Hong Kong. As the business goal of landing site is to present the product, not only for customers, but for business partners. 

Identify goal and content first

The request of this landing page was from market department. In order to best convey the idea through design, we frequently had meetings with them to confirm the content and goal of each section.

Trying different style

Finding some references websites through keywords like: hong kong, technology, innovation... Creating collection board to provide some style inspirations, after brainstorming and trying different style, I concluded three type of layout for team to choose.

Design consistency

After confirming the main style, there are totally seven pages for the website, keeping the style consistent is my challenge. Base on different content we provided, designing the page in the way that helps user to understand the page quickly and easily.

Define style guide

Setting up design guideline for developer, including the interaction of components.

Demonstrate animations

In order to demonstrate the animations that I planned for this landing page, I searched some pages that use the same animations, or even made high-fidelity prototype to demonstrate the animation for discussion with developer. (1).gif
Live demo

The websites had been released and are available now online.