Strategize

The primary purpose of the platform is to provide a portal to lure deal seekers and incite desired user behavior, ie., repeated purchase through the card. Hence, the key priority of the redesign is to facilitate deal discoverability by showcasing deals and offers upfront. 

For this, two main flows were created. To entice the new user, the main homepage and other category homepages show generic deals and discounts that are available to HDFC Credit Card and Debit Card users, emphasizing on the number, amount, and variety of offers that HDFC offers its customers. For the logged-in user, the homepage displays personalized offers and discounts of exclusive/ limited validity curated specifically for them. 

Another critical functionality is the infusion of the real-time deal comparison mechanism on the platform. Smartbuy allows users to compare different options for anything available for purchase on the platform, including, but not limited to flights, buses, hotels, cabs, clothing, electronics, personal accessories, and so on to find the best deal across platforms, services, and retailers. Hence, the key elements in the header navigation are labeled “Compare and shop”, “Compare and fly”, “Rewards”, and “Deals and Offers”, to give the user quick access to key user flows within the site. Smartbuy auto-selects the best option based on the cheapest price.

To amplify the user experience for value shoppers, the “deals and offers” page aggregates all deals by category. For example, users searching for food and beverage discounts can view an exhaustive list of restaurants nearby with active discounts, along with terms and conditions (T&C) applicable for the same. These T&C include criteria for eligibility, ceilings on discounts, benefits of buying bundled cross products, restrictions on clubbing offers, and other similar prerequisites for purchase. The final payment screens show the user the exact sum they stand to save by securing a deal through HDFC’s Smartbuy platform and by using an HDFC Credit/Debit Card to pay for it as compared to the next best offer through another website.

The entire design was built using the brand colors of HDFC. We followed the 60-30-10 rule; 60% of the design is white, 30% of the screen is dedicated to black text or images, and 10% of the design is either blue or red. This contrast highlights the offers and imagery which add to the vibrancy of the page.

Other elements of the website and app are largely minimal. We’ve used relatively smaller font sizes and sufficient whitespace between elements to tone down the content density and make information visually accessible and easy to scan. The design also heavily accentuates HDFC’s blue across rectangular sections, buttons, input fields, and other such components to convey a sense of trust and reliability. We also designed a component library for the Smartbuy team, which helped the design be more consistent both across the web experience and mobile app, as well as within the website/app itself.