Desktop View: Full Page Banner 1
Instead of using one product for the page, I decided to use an image of their showroom to showcase the different collection and give idea to the customers on how their bathroom could look like.
A blurb is also included to give brief description of the collection. The view collection link goes to the product page of the collection presented in individual products along with their prices and information.
The user can use the mousewheel or click the orange dots on the right to move to the next or previous banner.
A circle stroke denotes the banner that the user is currently viewing while a dot denotes the next or previous banner to go to.
Desktop View: Full Page Banner 2
Desktop View: Full Page Banner 3
Desktop View: Homepage Content
Desktop View: Products Page
This page can be accessed by clicking the view collection link on the homepage banner. It can also be accessed by clicking on the Products link on the navigation and then looking for a specific category on the left menu.
For this example, this was accessed by clicking the "view collection" link on the Tonic Collection homepage banner.
Desktop View: Product Details Tab
A modal window will appear if the user clicks on the image or any of the button links. When the user clicks on the image, the default section is the product details. There are three tabs for the user to browse, Details, CAD Preview, and Supplier.
Desktop View: Product CAD Preview Tab
Desktop View: Product Supplier Tab
Mobile View: Homepage Above the Fold
For the landing page in the mobile version, I decdided to replace the large scrolling banners with a rotating carousel that scrolls horizontally. I did this to save space, bandwidth, and battery as larger images tends to load longer.
Mobile View: Homepage Below the Fold
Mobile View: Products Page Above the Fold
For the mobile view, the left menu from the desktop view becomes a drop down menu on top. The buttons on the products became two rows instead of side by side to make it easier for the user to tap.
Mobile View: Products Page Below the Fold
Mobile View: Product Details Page
To make it easier for the mobile users to browse the product page, I converted the tabs into accordion menus. This also maximizes the content area to extend to the width of the mobile device.
Mobile View: Product CAD Preview Page
Mobile View: Product Supplier Page
Mobile View: Menu
The main navigation now is accessed by tapping the mobile menu icon and swipes from the left. This type of mobile navigation is standard in many apps so the user will be familiar in accessing the navigation.
