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.
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.
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.
This interactive prototype shows the error messaging that users would see when adding a product with variances to the cart.
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.
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.
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.
- 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.