Amerock Public Concepts for Review

Detailed Mockups

Following the initial set of wireframes, we move toward full detail mockups of sections and critical pages of the site. The mockups and concepts are presented in the list at the top of the page and approved and more completed mockups are added to the site outline below. Older mockups and concepts are moved to the Previous Rounds/Research section at the bottom of the page.

6/14/2016 - From Client Mockups

• Final Versions
  Category Page
  Customer Support Page
  Home Page V4
  Product Collection Page
  Static Page
  View Products by Style
  
  

6/14/2016 - What's New Kitchen Images (Magento)

• What's New Kitchen Images
  Esquire
  Oberon
  Wells
  Sea Grass
  What's New Wells
  What's New Sea Grass
  What's New Oberon
  What's new Esquire
  
  

3/8/2016 -  Finalized Category and Collection Pages

After working with Laura's designs...(etc.)

• Category Page
  Category View Rollover View
  Description


• Collection Page
  Collection View
  Description

3/1/2016 -  Product Detail Mockups

Working with Laura's mockups as outline for the majority of the layout and design direction for the page, we made a few minor font, size and placement adjustments to the mockups as well as including them within the site theme/style for header, footer, etc. We'll want to review the mockups further to discuss elements and placement of items to further organize and preserve design open space. Additionally, we'll want to discuss the incorporation of the received color sets that might be used to color code departments or sections.

• Product Detail Page
  Default View (Color Set blue / gray / teal )
  These image mockups take the proposed layout and suggest a few elements that we can discuss as options. Note the change from border drop-shadows or glow, horizontal image scroll vs introducting a vertical, less prominant breadcrumbs, etc. for discussion.
  
  Additional Arrangement B
  Much of the intended direction for the site design regaring sections or elements is for them to have large margin, gutter and open space. Some of the Home Page through Category Section designs help set the style for this space... to help rearrange and work with the two-column elements on the Product Detail page we have mocked up an alternate arrangement to consider as well. This contains the same page elements and continues the discussion from the first set. Let's discuss the elements within the layout and determine whether additional rounds of refinement are worth exploring on the product detail page.

2/29/2016 -  Laura's Product Detail Mockups

To help aid the discussions and speed the rounds of revisions and further discussions internally regarding the product detail page, Laura has worked to produce mockups that include elements of size/position, accordion expand/collapse sections, and other elements from the competitor and inspiration sites that we've all been discussing. The following are the mockups that were shared on Monday.

In addition to text content and additional resources, some of the implied sections/elements (for example, the the new element of text "other items / sizes in collection,") will need to be discussed and added to development tasks.

• Product Detail Page
  Default View
  Specifications Expanded
  Installation Expanded
  Other Products In Collection Expanded
  Warranty Expanded

2/16/2016 -  Collection / Category Mockups

While the home page and main product detail pages have been outlined and discussed, some of the other sections are now receiving attention and design concepts. The following mockups include modified design directions that began with the KBIZ amerock.com Magento site updates and direction changes that have been discussed.

• Category Page
  Category Page (mouseover a / b )
  Category Page - Horizontal Scroll (mouseover a )
  The collection page design includes a large area for lifestyle images and collection images at the top / main section of the page. Each approach presents the list of collections with a large image and title/information for each collection to drill in to. Each concept shows the ability to mouse-over the collection image for further details.
  
  The first concept presents a vertical page that allows for white-space around each collection on the page. The horizontal-scroll concept presents the same information yet in a style that allows for the page to show all collections in one space without page scrolling. On a tablet or touch-device, the horizontal scroll would be intuitive and on a desktop we would enforce "scroll-wheel horizontal scroll"
•  Collection Detail
  The collection detail presents a large lifestyle image area at the top of the page and ability to drill-down / select groups of product type, size and finish within the page. Each filter step would adjust the view of elements in the body of the page. Within the body, items would be grouped as best as possible by type.
•  Product Detail Update
  This updated mockup for the Product Detail includes notes and revisions after the KBIZ related designs, updates from the round-one concept and notes provided by Laura for next mockups.