BRAND STORY 11
Build a Brand-Driven Web Site in Four Easy Steps
This shoestring approach turns your three-minute pitch into a Web site that engages customer desire.
Short of a Super Bowl ad, your Web site will form the biggest touchpoint in your marketing universe.
This step-by-step approach leverages your Brand Story to create a site that actively engages prospective customers.
This article assumes that you have developed your brand’s basics — that your brand uniquely meets the needs or solves a problem for your target customer, and that you have a nice tight pitch. If not, you may wish to review the other articles first.
Step 1: Find your Brand Mentor
As a shoestring startup, you need help, but you don’t have funds for a fancy agency. I suggest finding a successful web site to become your “Brand Mentor” to guide you through the process. Here’s how:
Build a board:
Using Pinterest, create a board of up to a dozen Web sites from your line of business that have strong brand positions.To capture screen grabs, install FireShot (or similar). This free extension for Chrome and Firefox captures entire Web pages as image files. (Mac users can also use cmd + shift + 4 to capture highlighted areas of the screen.)
Create a Pinterest Pin from the saved image. Add the pin to a board of “Sites I Like” and “Add a destination link.” Comment to include what you like about each page.
Review the brands:
Now, review your Pins and eliminate those that don’t meet this criterion: “Does the Web site lead with a brand position?” It’s easy to tell:- Does the brand offer to solve a problem or fill a need?
- Does it differentiate itself from other brands? (The original, first, fastest, most convenient, experienced, better formula, new technology, better tasting, lower calories, faster-acting, cheapest, highest quality, and so on).
- Does it tell a Brand Story? Do all the pieces and parts add up, meaning, do the message, mission, design, back-story, people, and personality fit together to create a sense of brand or a cohesive story?
- Do you feel an affinity with this company?
Choose your Mentor:
Spend some time with your top 3–4 Web sites until you decide on your “Brand Mentor.” You’re not going to copy their Web site, but you will let their thinking guide you across the blank pages. You can skip this step if you hire an agency, but as a shoestring start-up, you need every bit of help.Once you find your Mentor, you might ask:
- Is your Mentor’s site sparse or verbose? Colorful or minimalist? Friendly or authoritative?
- Does your Mentor’s site establish an unassailable position, lure you in with a story, or hit you hard with the offer?
- What Web components does your Mentor use: web forms, sign-ups, side-bars, widgets, testimonials, trial offers, videos, etc.?
Work with your Mentor:
As you build your site, you will hit stumbling blocks. That’s when you ask, “What would my Mentor do?” We used this approach to great effect when I helped my friend Sara Anderson navigate her path from stay-at-home mom to successful fabric designer.
Sara’s Brand Story workshop identified her target customer as a successful mid-aged woman with wildness in her heart and a hidden artistic, bohemian flair. We found a kindred spirit with designer, Catalina Estrada (catalinaestrada.com).
Catalina’s brand position mirrored Sara’s:
“My heart needs rhythm, my mind needs harmony, and my soul needs color.” — Catalina Estrada
I built Sara’s site, SaraAnderson.com, by asking when stumped, “What would Catalina do?”
Surprisingly, Sara’s site looks completely different from her mentor (as it should!), but they both celebrate nature’s colors, textures, and beauty.
Step 2: Layout Your Home Page
Think of your home page as your Brand Story with pictures. You will build out your three-minute Elevator Pitch as a scrollable page.
Since most Web visits are on the phone, scroll-down page layouts are easier for users. Each block of copy should include a link — again to avoid the menu.
For desktop visitors, the top-level menu should be logical and compact. In addition to the customary links, you may wish to include a top-level menu link for your secret sauce, big idea, or lead offering.
This home page template uses a stack of horizontal rows (1–6). The sequence is logical:
- Big Brand Statement: Grab the reader with a statement that explains why your brand matters. It needs to be short, direct, and scream differentiation. Tell the reader that you can solve their problem in a unique, new way. You can pose it as a question, a splashy introduction, or a pithy version of your positioning statement. The full-width featured image can fill the entire screen or be narrower to reveal the content below the fold. An optional slider can run a sequence of images/statements — useful if you have several products or ideas to highlight. Still images are preferred over videos.
- Solution: Your Web visitor might spend six seconds on your site to know what you’re selling. Pull directly from your elevator pitch here to describe your product or service. If you have an overview video, put it here. Include a link that leads to your Solution page.
- Features: If your visitor becomes curious to discover How it Works, you have won half the battle. Include 3 to 8 features (one or two rows). Include icons, images, and brand names.
- Results/Testimonial: Offer real-world results, performance metrics, and benefit statements to show that you can deliver the goods. Testimonials add credibility with client names and logos.
- News: Make sure your business looks alive. Update with fresh content from your news or blog pages. Squarespace uses Summary Blocks. The Divi theme for WordPress uses the Blog Module.
- Call to Action: What action do you want visitors to take? Restate your big idea by inviting them to solve their problem with your offer. Call now, get a free quote, take a survey, download a white paper, view a demo, and so on.
Step 3: Build out your message
Good thing you crafted your Elevator Pitch. Now you’re going to put it to work. We will pull language from your Elevator Pitch and plug it straight into the Web site. At the end of this article, review the TeamFuel Elevator Pitch example.
Place your edited content from the Elevator Pitch into a rough layout. PowerPoint offers a quick and easy tool. The layout below captures statements from the pitch and drops them directly into the Web template.
Your job is not to be a Web designer — just a brand storyteller — so your PowerPoint layout does not need to be pretty. You can even use a pencil and a large pad. At some point, you will choose to hand the project to a Web developer, and this may be that point. Whether it’s you or a pro, the designer will need structured Web copy and a basic layout as a starting point.
Step 4: Build Your Web Site
There are a million ways to skin this cat, but I will boil it down to two:
- Squarespace: This all-in-one Web platform provides hosting and design templates in a self-contained environment. You select a design and customize it with your content, layout, and images. If you are competent with basic office applications, you can build a Website on Squarespace. Monthly fees are higher than WordPress, and the level of customization is lower, but most businesses should be able to tell their story within a stock template. (I’ve never used Squarespace, but I have used Wix -another plug-and-play option. The user layout was crazy-making, but I was impressed with what a novice could do.)
- WordPress: This open-source platform connects to a vast universe of 55,000 third-party plug-ins, plus design tools, templates, freelancers, and hosting companies. Whatever business niche you’re in — non-profit, education, downloads, news, travel, music, food, sports, technology — you’ll find themes and plugins to support your needs. You will also be able to integrate other business applications into your site through a vast range of API connections. I build sites using the combination of WordPress and Divi.
Choosing your platform:
This decision should not hang on cost or technical abilities, but rather, functionality. Squarespace is well-suited for personal sites, small businesses, and the creative industry. The movie company, Pixar, reportedly uses Squarespace. WordPress does more — but requires regular maintenance.
Nearly every business application offers integration with WordPress — Salesforce, Quickbooks, Meetup, Grubhub, Hubspot, Mailchimp, Zendesk, Slack, etc. The downside with this flexibility is that greater technical skill is needed to build and maintain WordPress Web sites. Don’t let this scare you. Plan on hiring a Web guy (or gal).
With your layout in hand and Brand Mentor for guidance, you can find a WordPress developer on Fiverr.com who can build a simple site for $500 that performs exactly to your needs. A U.S. designer might cost anywhere from $1500 to $10,000 depending on the complexity of the site. You can follow the same Fiverr hiring process as with the logo design.
If you build a WordPress site, consider working with a designer who uses Divi from Elegant Themes. Divi is a full-featured module-based platform that lets you build a WordPress Web site with some of the Squarespace ease.
The hosting savings from WordPress compared to Squarespace may help recoup your design costs. There are numerous low-cost hosting companies to choose from (GoDaddy, Bluehost, Dreamhost, and Hostgator). I often recommend Siteground.
Turn Your Elevator Pitch into a Sales Sheet
One final idea: You can quickly make a sales sheet using the same elevator pitch content.
Whether you hire a Fiverr guy, have a friend versed in Adobe InDesign (the pro-standard), or design it yourself with MS Publisher or even PowerPoint (example below)— I leave that to you. MS Word is not recommended. Make it a full bleed (images trimmed to the edge). The bottom line: don’t hand out an amateurish design.
Use an online printer (PSPrint, CatPrint, Imagers) to print your sales sheets. Your Fedex print shop is an option if you need just a few copies. Sales sheets are also useful as a PDF download.
