Microsoft AI Design Team (Web UI Kit)
The Challenge
I had the responsibility of creating a new offer card template while revising the current SD card for the Web UI Kit. The purpose of the offer card template was to be easily distinguishable from the current SD card, where SD stands for Structured Data card. The SD card aggregates information, provides quick actions, and serves as a launch point for first-party content.
An offer card recommends products or services to the user. This is different from an SD card, which primarily aims to provide information such as weather, sports, and traffic. An offer card can be an ad, like a Cashback card, or a non-ad experience, such as Shopping.
The current design of the offer card templates shows a number of style inconsistencies and lacks variety if more images are needed. My goal is to address these issues by introducing a more cohesive and visually engaging design. One specific area of concern is the color background, which doesn't align well with the current framework and needs to be removed.
The canvas below serves as the platform for showcasing the offer card templates. The current framework eliminates the solid color background and instead incorporates a semi-translucent background for the cards.
The Solutions
Based on the use cases, I created a wide range of solutions to accommodate the different quantities of images needed for the offer card.
A/B Testing
I integrated A/B testing into the design system workflow to ensure that the components are user-centric, effective, and contribute to a positive overall user experience.
Usage Guidance
Here are a few examples of usage guidelines for SD cards.
