Homestyler plans home improvements with a simple, browser-based experience.
October 2007 - March 2008
As Autodesk's first foray into web-based, consumer software, Homestyler was a sea change requiring external, expert advice to start on the right path.
I was brought in as an external principle designer to help facilitate getting the project up and running. I collaborated closely with an in-house senior designer and the project/product manager assigned. In a matter of a few weeks, we designed a novel approach to web-based, consumer CAD/BIM software.
Results
Provided baseline research to support product decisions and future lines of inquiry.
Detailed designs for a browser-based solution with minimal client processing requirements.
Designed integration with powerful, proprietary back-end tools to support real-time 3D rendering on a browser interface.
Created multiple opportunities for new revenue streams and solutions with partners in the home-improvement sector.
Established a series of best practices and design paradigms that could, and continue to, support the product through multiple iterations.
Conclusions
Code-name Dragonfly began beta testing in 2008. By 2009, it had been officially rebranded Homestyler, and opened to the public. There have been many releases and improvements since originally released, but the core design concepts and principles haven't changed much since the original design.
Key design paradigms that remain principally unchanged more than a decade later include:
Progressive introduction to features and information when getting started.
Contextually aware UX/UI to only present relevant options in appropriate contexts.
Clear and simple information architecture to ensure both new and experienced users know how to accomplish their objectives.
Engaging imagery and details to facilitate both the exploration of competing alternatives, and clarify the project outcome before picking up a hammer.
Convoluted learning curves and too much information discouraged exploration.
An example from the project
Research
We spent the first 6-8 weeks of the project researching the consumer CAD space to establish a baseline of both requirements and common approaches in the market. In addition to the obvious professional and consumer CAD software on the market (inclusive of other Autodesk offerings), we looked at a variety of 3D modeling software, home renovation tools, and DIY home remodeling literature.
I also ran several guerrilla usability studies to validate key UX decisions during the design process. Rigorous interviews (typically lasting an hour or two) with home owners both before and after renovation or remodeling projects helped establish context for the usability tests, which generally leaned on simple paper mockups. This prioritized rapid turn-around after new learnings while affording freedom of exploration beyond questions known before an interview started.
Principle skills
Heuristic analysis
SSNiF identification
Persona definition
Customer interviews
Usability testing
Wireframes
Low-fidelity mockups
Critical path user stories
Key learnings
Too much information, and too many features compete for attention.
Information overload was a key problem identified during heuristic analysis of existing CAD (computer aided design) and BIM (building information model) products. Due to the complex nature of a remodel or renovation (especially kitchens and bathrooms), even consumer-grade products advertise dozens or hundreds features. Typical interface designs simply create large toolbars, which negatively impacts the overall experience by dramatically increasing the learning curve and cognitive friction. This is particularly frustrating, because many features are irrelevant in most contexts.
Representational accuracy substantially improved confidence in the expected results.
Research provided several examples in which costly mistakes could have been avoided with higher fidelity modeling earlier in the process. For example, using a generic stove rather than the specific model a homeowner planned to purchase required replacing additional countertops and cabinets. If the design process in CAD had used an accurate model, this likely could have been avoided before work began. At minimum, the homeowner would have understood the full impact of selecting that particular stove.
Project management often becomes a major hurdle.
Even DIY consumers are rarely effective project managers. Simply managing what options are available for a given remodeling can be quite overwhelming. Coupled with research in areas most consumers have limited to no prior experiences (e.g., necessary building codes, inspections, permits, material options, etc.) many people simply don’t know where to begin.
Research and design exploration often required duplicated work between different systems.
Often, while planning a project homeowners will shift their objectives or methods substantially. Unfortunately the tools available don’t lend themselves to this type of flexibility. For example, you may start planning to DIY the project, then realize it’s much larger than originally expected. So, all or part of the project will need to be contracted out. None of the existing products do anything to facilitate this dynamic, real-world experience.
Designs
Contextually relevant progressive disclosure
To avoid toolbar overload, Brent Pennock and I designed a solution that brings pertinent information to the user as needed. Hovering over an object will give basic dimensions. Selecting an object reveals a little more information and offers several options. Drilling deeper into the object offers options, more information and even purchase options.
Objects only display relevant options. Simpler objects have fewer options.
Prioritized representational accuracy
A huge library of specific makes and models of appliances, furniture, windows, flooring, and other materials allow for a much more accurate experience when designing a remodel or renovation.
Real-time Rendering Examples
Project results
Homestyler is free and available at Homestyler. The product has improved over the last few years; however, it has not deviated much from the original designs from this project. This project illustrates the need for progressive introduction to features and information to keep designs clean and understandable. Solid information architecture was a critical foundation to the success of this product.
Homestyler has been live since 2008/2009, when it was announced with a public beta (called Dragonfly at the time). Since many improvements have been made; however, the core design principles laid out in the original project haven't changed much.