Now that our company has our own custom-built website-building platform, we have the huge undertaking of converting our old sites & retrofitting them with our new technologies. This also gives the company an opportunity to refresh the look. The redesign of Dentalcompare.com required a big team & project management to build it. As with many of these types of projects, the build usually starts at my desk. I was to create, develop the new brand identity, then flesh out the architecture of the site based on the agreed new style & color scheme. First, the logo…

Many dental shoppers are already quite familiar with the Dentalcompare brand, so we made sure not to deviate too far from its existing look so as to prevent any confusion in the migration. In our old logo, our dental experts intentionally settled on teal & orange: teal because it’s a dental office color (think about those bibs you wear while on the dentist chairs) & orange because it’s an actionable color. They didn’t want any imagery in the logo, so we stuck with the ‘DC’ logotype, which proved to be very useful when adapting the logo for small spaces like favicons & Twitter profiles. After many sketches, mood boarding, and mockups, the logo transformed from a generic geometric Helvetica logo to a friendlier, rounded—but still geometric—typeface called Brandon Grotesque for the final version. Huzzah!

In our wireframing sessions, we sat down with the Dentalcompare team & came up with a list of essentials for each page, then ordered them by importance. Brian, our design lead, made some simple Balsamiq wireframes to be approved by the higher-ups before fleshed out the design in Photoshop.

A new ‘hero’ carousel module will take center stage on the homepage to showcase featured products, and the rest are laid out in a modular, two-column form. Solid-colored section headers helps delineate the beginning of a module, while a container’s thin borders helps attain an airy feel. Ad placements were key, but we made sure they didn’t overpower the main aesthetic of the site (users will naturally tune them out through banner blindness anyway). With that, we made sure that users can readily differentiate the difference with the main content and the ads, even if this meant that we had to establish some thumbnail preparation guidelines for our vendors so they don’t look too ad-like.

I worked closely with our in-house development team to get my mockups realized & to fine-tune the design through some strenuous QA sessions. On May 2, 2011, the site had its long-awaited release. We were quite pleased that it performed beautifully.

Our backend tools are constantly being developed and updated, so this site—as cliché as this may sound—will never attain completion. We’re super happy with our result, though!