Step-by-step design of the ShowOff website

Bobbie Ayers, owner and creator of ShowOff, an online visualizer for homeowners, had been working on the website for her company for several years. Bobbie wanted ShowOff to expand into ShowOffPro, a lead-generation tool for contractors, manufacturers, and realtors, so homeowners could not only see the changes they could make to their homes online, but also learn about the products they wanted to have installed and receive estimates from contractors to have the work done. Realtors could offer the visualizer on their own sites along-side their listings so house-hunters could envision how a home would look with updating or new landscaping.

We begin every website project with the same goal: to make the site a cohesive part of the brand and to simplify and optimize the user interface. To do this successfully, we design with both the client and consumer in mind: the entire site has the look and feel of the brand’s “personality”; pages are made to be fast-loading, intuitive, and easy to navigate; visitors are quickly directed to the information they seek and/or to lead-generating contact forms; content is valid and valued by both visitors and search engines for optimization.

We created the ShowOff and ShowOffPro brand identities to reflect the feeling of accomplishment of the online user experience with a “ta-da!” ShowOff Man standing on a “stage” framed by curtains to represent a home, a swatch, and the visualizer interface. The website would be a much bigger challenge, as not only were we to re-design the initial consumer site and the visualizer, we also needed to design a companion site for the professional version of ShowOff and ensure they would appear to be in the same brand family. Because of the multiple-levels of architecture required for a front-end consumer lead-generation site with a back-end provider site, the existing structure was overly complicated, confusing, and redundant. We began by looking at how the sites should work from the users point-of-view: from the homeowner working with the visualizer tool and seeking product information, to the contractor looking for leads and uploading their qualifications and experience. We worked with the client throughout the design process, keeping her involved in our progress at every step of the way. As the project began to come together, we were quickly discovering more and more ways to simplify the design. Often, we would send revisions of pages we just submitted for her review before she had a chance to see them. We continually asked ourselves questions on content and layout with each page and level of user experience: what needs to be communicated? what is the hierarchy of information? where should it be located? what icons and images will be more informative than words? what can we remove that is not absolutely necessary? Bit by bit, we rebuilt the site with a simple, logical structure. We brought the ShowOff brand personality into the site with its vivid color palette and the use of elements from the identity such as the curtain and the ShowOff “ta-da” Man; we kept the photos and graphics to a minimum to ensure the pages would load quickly but without sacrificing necessary information; the navigation bars were simplified with pull-downs to store information without cluttering the page; the “how to” process of using the site was made more intuitive by creating small images and directional graphics rather than wordy explanations; paths to the lead generation forms were streamlined to direct the user quickly and easily; the look and feel of the visualizer tool was simplified and re-designed including all of the login screens and popup menus.

“This work is amazing. I never expected this level of simplicity of use. You took what I have been working on for many years and made it easier to understand and use. Thank you SO much!”

PC Magazine named the Visualizer Design Tool one of the top free software offerings.

AWARDS
• 3 American Advertising Federation ADDY Awards