The Making of a Website

ThomasBoston's Brand Design Website Development Process

The purpose of this page is to illustrate the build process (see below) we employ when creating a website. There are many ways to build a website, from do-it-yourself to sky-is-the-limit varieties. But regardless of budget or site architecture, once a strategic marketing and communication platform is in place, a defined development framework helps drive the design-build process.

We created ThomasBoston's first website in 1996, and have since implemented several styles and formats from simple HTML to Flash, both for ThomasBoston and client sites. While it looked like complex Flash-based sites might become the standard, best practices website development has come full circle, then kicked up a notch: less is more; communication flow is rapid, scan-able, search-able, fast-to-load, and complete.

Today we base our website development process around brand-driven design. It provides users with content they need and easy-to-use navigation that's required. In addition, visual cues create the proper level of 'drama' to help visitors connect with and recall brand dynamics and values - even if they only scan a site without reading.

The net is users find what they need and expect; also what they need and might not be able to express, such as how to order the exact custom-decorated cake they have in mind from Quebrada Baking Co..

Design is more than the outward look of a site. It's an organic process that connects the brand experience to customers, helping to secure understanding, much like natural design connects us to a better sense of the world around us. It's how all elements - navigation, brand & product images, and content/storyline - integrate to create a credible Brand story, both emotive and transactional. And proper design has a measurable return.

Below is an overview, albeit somewhat simplistic, of how the website creation, design and development process works, as implemented for Quebrada Baking Co. by ThomasBoston Advertising and Newfangled, its web development partner.

All tactics below have been proceeded by listening and brainstorming sessions wherein we formally defined site objectives, and articulated the bakery's core brand values & position. Armed with this understanding, we created a formal strategic communication platform upon which all tactics - design, navigation, content, etc. - are founded.

Step 1. Develop prototype: navigation plan "Gray Screen." After a "wireframe" (paper plan) navigation outline has been sketched, we apply it to a functional online prototype - before we even consider site graphics or design. The prototype enables click-through to each page and helps us envision and evaluate information flow, accessibility, and completeness of content. What looks good on paper can be different in practice. Furthermore, page and navigation structure will impact page design, as well as image and copy/content planning, so this step saves considerable time and expense throughout the creation and development process.

Step 2: "Mood Boards" We believe a website reflects a company or brand owner's ideas, style and vision (aka: the basis of Brand). To this end, before we even begin to design and construct specific elements of a site or page, I formulate a site design strategy ('what' we'll do). In this case, based upon client input and her style preferences, color palettes to architectural, we proposed her goals would be best achieved by designing a site that is visually "understated, retro-contemporary elegant."

We then created Mood Boards, the first step in the tactical (the 'how we do it') design process, to further define the client's style and create design consensus with all stakeholders before going deeply into actual design of site elements.

Not unlike a 'swatch board' used in interior design, a mood board presents elements of the plan based upon known brand values and our overall communication strategy. Our objective is not to design, but to present elements from which the design will emanate: color pallets, environment, textural elements, visual clues, fonts, etc.

Top: 3 "Moods" - the question: which approach 'feels' most in line with the client's style - the emotive aspect of her brand?

Round 2: Edit and fine tune approach to reflect client preferences.

Round 3: Why this mood boards are so important. After some living with the emotion of her original selection (Round 1 left), my client felt Round 1 (middle) was more representative of her ideas, sensibilities and style. Round 3 was then crafted and approved.

Step 3: Page Design. Once emotive and transactional design elements have been agreed upon in principle, page design begins. As the creative director, my job is not to dictate elements to a designer, but rather, it's to help them internalize tangible objectives and intangible 'style factors' as relates to defined strategies. When we start dictating design outcomes, the designer can only decorate, which rarely fulfills strategic objectives. The goal of brand design is to connect customers to Brand in a simple, yet profound manner. Great designers get this.

During this design stage, we evolved the coloration palette and image areas - both main and secondary - for the product pages. Creating price Menus was also a concern - prices had to be easily revisable without affecting overall design. As such, we decided to build a back-end product and pricing database that would feed to a designated page, rather than recreate an menu image that would require graphics and page re-formatting.

The final product page has a rotating projector (javascript), within which images can be inserted and ordered for appearance via the site's Content Management System (CMS). All elements of the site are easily and rapidly editable in the CMS without any HTML or coding experience; if you can run Word, you can edit this site.

Given the "Fresh, Fresh, Fresh" brand dynamic, we also designed an editable 'sidebar' widget: "Kay's Fresh Ideas," which spotlights trends and merchandising options on any page.

The small static images are easily added and captioned in the CMS. SEO 'alt tags' are also editable for content and key search engine words, here optimized for local and mobile search. > Top

Step 4. Populating the Site with Content and Images, SEO elements - and Go-Live!. Once the site design has been put up on a password-protected development site, pages are populated, and Search Engine Optimization elements are addressed (page and meta titles, tags, 'long-tail' descriptions, etc.). Unlike most web development firms, which typically provide site coding, infrastructure and design, we offer complete turnkey services and options: brand & transactional copy and content, imaging, CMS training (allows clients to edit site at will), and marketing (Web, social media, PR, search engine submission, POP site merchandising, etc.). For Quebrada, ThomasBoston will also provide newsletter and 'permission-based email marketing' services to site visitors who sign up for it, both on the site and at the bakeries. >Visit the new Quebrada website.

Step 5. Ongoing Site Maintenance, Upgrades, Restages. The beauty of the ThomasBoston and Newfangled site development infrastructure and CMS is once it's in place, the site can be re-structured and re-imaged for very little incremental expense. Widgets can be added for any number of functions, from name capture to forms. This site (ThomasBoston.com) is case in point. I have fully re-imaged the same basic infrastructure five times since 2003; the only cost has been time, design direction, and imaging.

Today, creating a web site that reflects your style is the cornerstone of brand communication. The outcomes range from increased traffic to building saleable brand equity when you're ready for succession. It's a considerable, but well worthwhile project. We can take the mystery out of the process, perform the heavy lifting, and provide the best and most appropriate solutions. >Contact Tom Lanen for complete information and pricing.

<< Back to resources

Brought to you by Thomas Marketing Services Corp.