Step-by-Step Through a Website Makeover

If it ain't broke, don't fix it. For years, this summed up how decision-makers at Round Pond Estate winery and olive mill in Rutherford, Calif., felt about their website. Yes, the gang knew the site needed a face-lift; they'd been throwing around the idea of a redesign for about a year. But with production demands for wine, olive oil and a host of other high-end foods, the heavy lifting to engineer necessary improvements simply never got done.

August 2011 was the breaking point. Some customers deemed the site "hard to navigate." Others said they couldn't figure out how to buy the wine. So in an effort to give customers an easier shopping experience and to grow the business, Carrie Baker, Round Pond's marketing and production coordinator, decided to undertake a makeover. Instead of opting for a traditional web design firm, Baker hired Firefly Creative Company, an advertising and marketing communications outfit based in nearby Healdsburg, Calif. Jim Shoop, Firefly's technology lead, and Christine Martin, the company's founder, took things from there, building a new site that launched in February.

Homepage: Before
Few would deny the beauty of the sepia-tone Olaf Beckmann photograph of the winery's signature pond. The problems? The image is too small, and the rounded, faded edges are old-fashioned and dull. "These elements feel very dated," Shoop says. "It's one thing to strive for old-school; it's another to look old." Another issue: marginalia. According to Martin, the page had lots of text, but, in contrast to the white background, none of it stood out. "Nothing about this page really catches your eye," she notes. "Without clear space to provide a sense of visual priority, visitors have no idea where to look first."

Homepage: After
On the new site, the Beckmann image gives web users the same jaw-dropping perspective they'd get from visiting the winery in person. The image scales to fit a user's browser, stretching to the margins of each screen. Color bands at the top of the page are designed to help users navigate various components within the site; the colors (and the bands themselves) correspond to "capsule" toppers on all Round Pond products--thereby extending the physical branding into the virtual space.

At the bottom of the page, copy boxes provide digestible snippets on what's new; Baker can update images and copy through Firefly's proprietary content management system.

While the old site sequestered videos on one page, the new one has video thumbnails from Round Pond's YouTube channel integrated throughout. "It's all part of telling a richer, deeper story," Martin says. The videos are distinguished from still images with a muted white arrow in the center; when visitors click on a video, a larger window pops up.

Interior page: Before
With multiple images and lengthy columns of text, interior pages on the old Round Pond site were overwhelming, to say the least. Martin describes the text as "intimidating" and notes that "few, if any" visitors would read all the copy before clicking elsewhere. Navigation options were confusing, too, with one set of subheads running atop the page and another set stacked above the copy. Shoop says it's no wonder consumers were losing patience. "It's not clear how to get around," he says. "Think about street signs when you travel; you want directions to be helpful and make sense."

Interior page: After
Simplicity was the goal for interior pages on the new site. One large image is designed to draw readers into the page, while text blocks are short and sweet to keep them manageable. In certain instances, visitors can click to secondary pages to access additional menus and more text. The addition of pull-quotes is an entirely new element; Martin says they "help personalize the brand and let site visitors establish connections." Still, she adds, it's critical to keep them short.

Interior pages boast the same tricolor band from the homepage, and pop up over a browser-scaled version of the main Beckmann image, providing continuity throughout the site.

Social media slider
Most web design firms incorporate social media into clients' sites by sprinkling icons at the bottom of every page. Firefly has taken a different approach, corralling the four most important icons--Facebook, Twitter, Yelp and YouTube--into a rectangular "Social Slider" that hangs along the right-hand margin of every page. Visitors click the feature to interact; it then opens like a drawer.

"We love this because it allows people to use social media without leaving the site," Shoop says. "When you're done tweeting about Round Pond's wine or olive oil, you close the drawer and get back to browsing."

What's next
Firefly expects to roll out new features for Round Pond in the next few months. First up: A page that, until now, has been known as "The Feed." On the surface, it would be a place for Round Pond to suggest winning wine and food pairings and post recipes that incorporate its products. As a related feature, visitors would be able to "like" certain content on Facebook, share pairings and recipes among friends and upload their own ideas. Shoop says the new page should be a boon for search engine optimization and will help bring new customers to the site.

"The winery has a great new look," he says. "Now people just need to come and see it for themselves."

The Firefly CMS
Many web design companies these days build sites on WordPress and other blogging platforms. While these platforms are great for editorial content and reader interaction (e.g., comments), they're not ideal for sales or catalog-oriented presentation of information. To address this challenge, Firefly Creative Company's technology lead Jim Shoop and his colleagues developed a proprietary content management system that customers can use to upload words, images and videos as they see fit. The system, dubbed Content Command, uses PHP scripting language and the MySQL database. Customers like it because it's customizable and intuitive; Shoop likes it because the tool helps ensure design integrity--and therefore brand integrity--over time. --M.V.

This article originally posted on Entrepreneur.com