Sectional Builder is a core product in Outward's application suite that allows users to build and customize sectional configurations from an overhead view.
Using 3D-imaging technology, the tool visualizes the sectional's exact shape, color, and size. We guide and give users feedback via smart design logic, telling the user how pieces can be added and where, and the sectional automatically scales or rotates for optimal usability. Upon add to cart, the tool wraps all of the selections into one simple order.
Responsive Web App
UX & Product Design, Design Direction, UX Consultation
July 2017 — Present
Have you ever tried to purchase a sectional sofa online? In my experience, retailers often don't make things easy. Some brands provide galleries of static sectional images from which you pick and choose; other brands provide lists of sectional components and make you customize piece by piece. It's difficult to get a sense of scale beyond the lifestyle imagery, and ordering swatches is the only recourse to gain confidence about the color.
In an era where we can customize almost anything from sports cars to face serums, there has to be a better way to shop for a sectional to fit your home... Enter Outward's Sectional Builder.
I’ve designed and/or directed design for multiple Sectional Builders throughout my tenure for different clients, for different reasons. In each instance, there is careful attention to client-specific needs, like the existence of brand style guides or integration constraints, which are then balanced against our design templates, product data needs, and timelines to launch.
Sectional Builder is a responsive application, so ensuring that it looks and behaves consistently across multiple devices and screen sizes is critical. The development relies on a tight partnership between Outward and the client, and I’ve always joined program managers, account managers, and creative coordinators in client kickoff meetings to ensure that design considerations are included from the get go.
There are many, many ways to design a Sectional Builder, with all of them sharing the same architectural foundation: a rectangular iFrame housing a canvas for the configuration and a drawer for components. This is a fixed engineering constraint to allow for streamlined page integration.
Although I cannot alter the application's base structure, the door is wide open to think critically about task flows and explore microinteractions, such as:
• How to size the drawer pieces to allow users to see individual details clearly while still presenting enough pieces in view to relay a sense of variety;
• Where to place and how to style the dimensions element so that it remains visible without interfering with building the configuration;
• How to include and position piece-specific and overall pricing so that we can inform users as they make selections without cluttering the workspace;
• How to present options for preset configurations to give the user a sense of product offerings, without rendering the act of self-customization moot;
• How to display other options representing visual and non-visual sectional attributes to make sure users don't omit important selections but without creating decision paralysis.
A few weeks after joining Outward, I had the opportunity to brainstorm a Sectional Builder experience for mobile web. Home retailers were keen to capitalize on the increasing percentage of high-value purchases being made on portable devices. One of our clients was exploring an experience where users could build a sectional in top-down view, see the result in perspective view, and customize the room environment, all on a mobile phone.
After reviewing the client's preliminary design and noting the areas for usability improvements, I spent two weeks creating my own wireframes and crafted a presentation for stakeholders with an outline of my design approach, key differences with design rationale, and suggestions for post-MVP features.
In the design review, I was challenged to persuade stakeholders on certain design decisions that had to be made due to technical limitations. For example, brand creatives originally wanted users to start building a sectional from scratch, but my revised design required users to start with one piece at minimum. This was because our architecture was based on connection points, and without any pieces, no connection points existed to build upon. Separately, although I took care to use existing brand symbols and iconography, the client was hesitant to consider minor layout changes because they weren't sure how it would translate to their other tools as well.
This mobile Sectional Builder project was ultimately put on hold so that we could focus our efforts in developing an augmented reality mobile app. Nevertheless, this brief experience exposed me to the intricacies of brand ecosystems and strategies, which I've kept in mind as part of every subsequent Sectional Builder project where I've had the privilege of being entrusted to design for and represent the client's brand.
Take a look at an early whiteboard sketch and my presentation notes ⇲
I make sure to task each member of my design team with a Sectional Builder project to give them the opportunity to interface with customers, to build their expertise in our product suite, and to expand on their design fluency and flexibility.
If you’ve ever done IDEO’s 30 Circles Exercise, then you’ll know that, when you’re given a piece of paper with 30 blank circles and tasked with turning as many of them as possible into recognizable objects in 3 minutes, it’s very easy to draw derivative objects — circular types of food, circular types of balls — and it’s more difficult to draw things that are distinct — say, a wheel, a pie, a rock. This reflects my mindset when I challenge my designers to try to design a builder that we haven’t yet seen before. It’s always the same rectangular iFrame with two panels, but the creativity that can be exercised is, in my mind, boundless.
Above is the Sectional Builder for Klaussner Comfort Design, launched in May 2020. This was designed by a member of my team, and I supervised as design manager.
Try Klaussner's Sectional Builder ↗
Giving consumers the ability to visualize a custom configuration drastically reduces the rate of return for a brand’s sectional products due to incorrect sizing or misfitting pieces. While overhead planning is only one step towards more effective product visualization, our continued advances in visual merchandising ensure that tools like Sectional Builder are here to stay in today’s digital commerce landscape.