Swisscard cashback campaign-landingpage with revamped credit card application-process

The overall goal for the campaign-driven landingpage was to get people to sign up for the newly launched cashback-cards. To achieve this, we analyzed and fundamentally reworked the existing credit card application process. The recognizability of the campaign was given with the adaption of the strong imagery, the vigorous colors and the distinctive slants.

Rework of the card application process

The seamlessly integrated credit-card application process is the centerpiece of the landing page. It is accessible from anywhere within one click through the sticky cards-teaser. The process was completely restructured to improve the user experience and such reduce drop-off rates. It was divided into 5 meaningful steps, ever present for the user.

The form elements were optimized touch-first, using e.g. segmented controls instead of drop-downs. We further use masked-inputs whenever possible.

All data is stored, so the user can come back anytime and resume where he left off.

 

Design pattern

The design pattern builds on a homogeneous form field look. The colors range from white (active) to pastel blue (hover state) and grey (inactive state). The scheme provides a a good overview for the users, without distracting too much. CTAs are clearly lifted off in bright turquoise and blue.

An overview of cards with their terms and conditions

All of the relevant card information one needs to choose from a card duo is listed in a clear interactive table, which adjusts to every breakpoint and device.

2019
Campaign Site

Concept, UX Design, Art Direction, FRONTEND & Backend
/w SiR MaRY

SEE application proceSs

 

You might also like: