iMagine Design Center
iMagine Design Center is a product visualization tools that creates realistic rendering of Hunter Douglas products. It serves over 40 different window coverings and more than 4,500 material, fabrics, and colors in detail or room setting mode. Each product and swatch uniquely transforms lighting in a room. iMagine also reflects that true lighting nature in its rendering.
I worked with iMagine from 2008 to 2014. When it first launched, there were 2 views: detail view and sample rooms view, which were rendered by Scene7 developed in ActionScript 1. Since then, it has gone through many iterations.
The first round involved simplifying the interface and updating the code behind from ActionScript 2 to ActionScript 3. The second round was a major milestone as Upload Your Own Photos was introduced. Many new user interfaces were developed to support this feature including a custom rendering engine. The third round, dependency on Scene7 was removed. The sample rooms were integrated into Upload Your Own Photos while detail view remained intact but was served by a brand new in-house rendering engine, which renders more quickly and is easier to maintain.
- iMagine allows a customer to upload a room photo, create an outline around the window, mask an object that may obstruct it and see Hunter Douglas products in that environment.
- It provides detail view (a close-up structure shot) of the selected product and swatch.
- For a quick-start option a customer can explore the application with sample rooms.
- Properties such as opacity and size can be adjusted easily for comparison.
- Faceted Search and Advanced Search Filters use complex algorithms to help narrow down a selection by product type, shape, material, energy efficiency, etc.
- Each swatch comes with in-depth details of its properties including SKU, fabric name, color, special features and videos of the product and lifting system.
- Any configuration can be saved to Workbook to revisit later, share on Facebook with friends or email in a PDF format.
- Every step of the way there is a help feature tailored for each screen to assist and prevent a customer from getting lost.
- iMagine user interface is controlled by XMLs which facilitates maintenance.
- Assisted with user flow and interaction design
- Worked with a graphic designer to attain necessary assets
- Collaborated with a backend engineer requesting necessary Web services for iMagine
- Provided feature request and feedback to a third-party library developer
- Implemented iMagine in ActionScript 1, ActionScript 2 and ActionScript 3
- Involved in monthly maintenance such as adding and removing products, swatches and promotional campaigns
Video by Enhance Your View