SFRA Components

About the Project

Now that SFRA is live, some of the frequently-used pre-SFRA components should be incorporated into the SFRA site. These components would all be managed through Interaction Studio (IAS).3 particular components have performed well (financially).

However, given that the PDPs have changed so much, it isn't obvious where these components would be incorporated into the PDPs.

Social Trend

Information Priority
The new version of the promo message is right beside the price tag rather than on top of that. Users would not be distracted by how many remaining items are and then noticed the price is beyond their expectations.

Color Choice
Although a couple of e-commerce websites urge users to purchase with a discount or left stock messages and colored them bright red, we did not follow this strategy in this case. Bright red indicates users make some errors in our design system, so they will confuse about the effectiveness of the message. With only three choices left, we picked up muted magenta due to the low readability of the color yellow.


Product Carts Add On

I replaced the small size "Add to Cart" button with the checkbox to avoid a repetitive check out process. The label with "Save &250" is more recognizable than the wordy descriptions as displayed on the left hand.

Promo Message

Keep the same styling with product carts add-on component for being consistent. In terms of the mobile version, long description is changed to one line title and the image is fully displayed.

Alternative Products

Without reinventing the proper template for related products to fit in, I utilized the existing layout in our design system and it fits quite well for other product items.

Reflection

Next Step

Long reading will cause low conversion rate. Our team has to further discuss whether we would implant all of the old components into existing iRobot PDPs.

Wanna browse more projects?