A redesigned shopping experience with React-based tools for browsing, interacting, and learning about our client's products.
View the demo slides here
Features
- Renders general information about the product
- Styles displayed as thumbnails, user can toggle between them
- Dropdowns for size and quantity selection
- Photo gallery shows product images specific to selected style.
- Gallery updates with new style, allows zooming and browsing
Image Gallery detail
- Default image gallery view: main image with thumbnail list on the side.
- Expanded image gallery overlays item detail page, similar functionality as default view.
- Clicking image opens expanded view, clicking main image zooms 2.5 times in expanded view.
- User can scroll forward/backward through thumbnail images.
Style Selector detail
- User can toggle between product styles displayed as thumbnails.
- Current selection indicated by checkmark overlay on corresponding thumbnail.
Cart detail
- First dropdown lists available sizes for selected style.
- Second dropdown selects quantity of selected style/size.
Product Information detail
- General information about the product will be displayed at the top of the Overview
- Link for "Read all [#] reviews" next to star rating, clicking scrolls to Ratings & Reviews.
- Buttons allow sharing on Facebook, Twitter, and Pinterest.
Features
- Renders information about each product related to current item in product overview
- Navigation via carousel buttons
- Clicking a product card sets it as new overview
- Compare current item with individual product card
- Store personal favorites in “My Outfit Menagerie”
Navigation detail
- Arrow buttons navigate through product cards
- Currently-selected product card is highlighted with thematic color
- When at far-left or far-right edges of container, click will loop user back to beginning/end of carousel
Comparison View and Card Select detail
- Product card’s action button opens a modal populated with all review data,
comparing current product card and current product overview item - Clicking a product card will:
- load it to the product overview
- repopulate carousel with items related to said product
- focus user attention on newly rendered overview
Outfit management detail
- Product displayed in product overview is added to My Outfit Menagerie upon clicking "Add current product"
- Same item cannot be added repeatedly, but differing styles of same item can be added
- Items can be deleted on click of action button
- Items in "My Outfit" are stored in local browser storage for user-specific rendering
Allows users to additively filter reviews by star rating & sort them by relevance, helpfulness, and by newest
Summary
- Loads questions and answers related to the current product.
- Able to search questions.
- Ask any questions related to current product.
- Answer to any questions.
- Upload images with your answer.
Adding Questions Modal
- With the click of the ask question button the modal will appear.
- Able to fill the form and clicking the submit button will send the data to the server.
- You may also add up to 5 images.
Searching Questions
- By filling out the search bar you can filter questions.
- With 3 more characters it will automatically filter at every change you make on your input.
- The list will stay in sorted order even after filtering happens.
Interaction Buttons
- The helpful button will increase the number of helpfulness.
- On click of the button it will send request to the server to increment the value
- The report button will allow user to report the answer for internal review.
- If the item is reported it will not be rendered anymore.
- There are options to see more questions and answers.
- This gives better user experience to see data.