Turning Sketches into Wireframes and Mockups
After sketching through various concepts, we started to finalize key design elements. One key decisions we made was to separate the visualization experience into two unique sections: building and visualizing. The purpose of this is to enable customers to focus on one thing at a time. Here's an explanation for both of them:
- In build mode, we wanted to give customers the flexibility to add and remove any piece they liked, as long as they were actual logical matches. For example we created business rules such as, two right arm chairs couldn't be placed next to each other.
- In visualize mode, we wanted to allow customers to see whatever they build come to life as a 3D rendered sofa. In addition, we wanted to allow customers to change the fabric and potentially see the sofa in a rendered room setting to help them see contextual imagery.
Wireframe of the Build Mode
Wireframe of the Visualize Mode
In addition to coming up with the visualization part of the experience, we had to consider how a customer might get to it. The tool will only be successful if we drive a high volume of appropriate traffic to it.
By examining the current flow for how a customer shops for a sectional sofa and speaking with customers, we decided the likely points of entry should be: the Sectional Sofa spill page, Sectional Sofa Collections page, and Sectional Sofa product pages.
Wireframe of the Sectional Sofas Spill Page, showing a Banner ad and the "Configure Your Own" button