Gensun Casual Living
Custom Responsive E-Commerce System with Visual Product Customizer

The new Gensun Casual Living website features a mobile-friendly UI/UX with the primary focus on their beautiful products via several layers of zoom for up to 4K resolution images. The site also features a cutting edge product customizer capable of coloring their frames with their two-tone frame finishes and 3D draping any of their 100+ fabrics over 2D cushions maintaining all the shadows and other details needed to produce a convincing product rendering.

  1. Home Page: The Gensun homepage features an open, airy design with the main focus being on a large slider of their most popular collections.  Other main links are shown prominently along the right side and the bottom features a row of images depicting the pages within their online design center.  The layout compacts down nicely for mobile viewing as shown by the mobile view displayed inset at bottom-left.
  2. Collection Page: Clicking on the main slider takes you directly to the associated furniture collection where the user can see another image slider of high-quality images that can be hovered over for an in-place 2x zoom. Clicking on the image opens an even larger lightbox image, which in turns allows the user to click again for the full 4K quality resolution image.  Other features of this page are the “Previous Collection” + “Next Collection” links, Favoriting, and then Product Filtering performed via a fast, client-side javascript function.
  3. Product Customizer: Working with the script-based graphics processing API from LiquidPixels, we’ve developed graphics scripts that can be called by manipulating the image tag’s src attribute.  The LiquidPixels scripts were set up to accept a product SKU, FinishCode, & FabricCode, and then use NoSQL data tables containing detailed information about each image asset so that relative scales can be matched through DPI difference calculations. 3D “grid files” are produced in Photoshop using their proprietary plugin so that 3D curves can be defined to give depth and realism to flat image files. The fabric swatches can then be tiled and “draped” over the cushions according to these grid files to produce very realistic customized product renderings on demand.