Sam’s Club Mobile Site Product Details

As part of the overhaul of Sam’s Club Mobile site I had the opportunity to work in the redesign and implementation of their product page. This was an interesting and challenging project given the dimension of their stock, the amount of suppliers they work with, and the amount of locations they serve. This meant that many scenarios needed to be served as this variables where combined, in order to accommodate product attributes and pricing policies.

sample_samsclub_01

sample_samsclub_02

This is a example of the multiple “variances” products could have, ranging from colors, sizes, and value amounts, to specific attributes, such as the number of stems for flowers, or boxspring sizes for mattresses.

sample_samsclub_03

In order to communicate the display of options according to the different use cases, I created multiple interactive prototypes like this to illustrate the requirements needed for implementation.

sample_samsclub_04
Error Validation
This interactive prototype shows the error messaging that users would see when adding a product with variances to the cart.
sample_samsclub_05
Product Bundles
Product bundles presented an interesting challenge as the user had multiple options to select from a group of items that where sold together. This interactive prototype illustrates the wizard approach that was used.
sample_samsclub_06
Adding a Product to a List
This interactive prototype shows the use case of adding a product to a list for a user that already had some, so the user could select an existing one or create a new one as part of the flow.

sample_samsclub_08

Product Page Anatomy

Part of my role during this project besides UX and UI design, was to implement the markup and CSS. This page was dividend into different components, and each of those components had embedded smaller components, making the implementation focused on a part of the page, that later was integrated into the application. Creating a design system and using objected oriented CSS (OOCSS) was key to be able to reuse styles and prevent CSS bloat.

 

Project Info

  • My role was to design the UI, and the UX. I was also in charge of coding the HTML and CSS.
  • Designed while working at Bitovi.