Moving Minds & Moving Code

Understanding, Exploring and Defining SMB Website Requirements
PRESENTED BY MICHAEL JOHNSON

www.pixelpunk.com

A Little About Me
‡ I design, code, and market websites that are simple and elegant, with a focus on the user experience ‡ Providing a positive return on my clients online marketing investment is key ‡ I began my career in Advertising and Marketing, and then
± ± ± ± Art Director and Publication Designer Web Designer and Online Marketer Product Manager / Web-Based Software as a Service One-Man Show @ PixelPunk Creative
www.pixelpunk.com

Philosophy
‡ Understand the problem
± ± ± ± Understand the organization s industry and audience Understand the organization s core goals and objectives. Evaluating project needs and establishing a strategy for execution Define and measure the success of the project

‡ Recognize that visitors are on a mission
± Help customers on their mission, design for usability

‡ Plan for the future
± Knowing what needs to be taken into account for future growth ± Design for extensibility so that the site can grow with changing client needs
www.pixelpunk.com

Marketing Department's Role (Small Business)
‡ Sometimes limited to simple look-and-feel decisions and the policing of current brand guidelines
± (Insert tired and overused Lipstick-on-a-pig analogy here.)

‡ Under pressure to own the Website and are held accountable for performance but may not know what questions to ask or what features to implement
± ± ± ± What do you mean we can t make updates? What do you mean we can t test new marketing tactics? What do you mean, it will take weeks to make this simple change? Is our site optimized?

www.pixelpunk.com

Requirements
‡ A requirement is defined as a condition or capability that must be met or fulfilled by a system to satisfy a contract, standard, specification, or other formally imposed documents (IEEE Standard 610.12-1990). ‡ Marketing Requirements
± Express/Predict the customer's wants and needs for the product or service ± Requires softer skills, analysis ± Access to data and the ability to quickly test and adjust to market changes

‡ Functional Requirements
± More traditional occupational skills (wireframes, documentation, etc.)
www.pixelpunk.com

Current Performance / Foundational Metrics
‡ Current analytics data
± What are the current strengths and weaknesses based on data we already have access to? ± Fix what s broken, but don t break what s currently working. e.g. Don t break current SEO and referring sources of traffic (301 redirects). ± (Insert the tired and overused, throw-out-the-baby-with-the-bathwater idiomatic expression here.)

‡ Sales / Lead-Conversion Results
± Are there clear goals and points of conversion? Is it working?

‡ Install Crazy Egg Heat Mapping Software
± Visually understand user behavior. Visualize the user experience.
www.pixelpunk.com

Crazy Egg
Quickly see how people are actually using your site. Invest 5 minutes for instant customer insight.

www.pixelpunk.com

Google Analytics
Site Overlay

www.pixelpunk.com

Google Analytics
Provides insight into your current website traffic and marketing effectiveness.

www.pixelpunk.com

‡ Install Google s Webmaster Tools
± ± ± ± Site Verification Diagnostics Crawl Stats Site Maps

www.pixelpunk.com

My Process
‡ Competitive Analysis and Research ‡ Usability Review/Analysis ‡ Creative Exploration & Design Development ‡ Production Management & Implementation ‡ Search Engine Optimization ‡ Outcome Evaluation

www.pixelpunk.com

Competitive Analysis & Research
‡ Great design starts by understanding the problem ‡ Basic analysis of the current business landscape ‡ Understand the demographic
± Get into their heads. Create personas. What would Jane do? ± Design a site for Bob and Jane and people like them, and not your CEO.

‡ Analyze competitor s relative strengths and weaknesses
± Compile a wish-list . E.g. If we had a million dollars, we d like to . ± It doesn't all have to be done at once you just have to plan for it.

www.pixelpunk.com

Usability Review/Analysis
‡ Analyze navigational schemes and link structures
± A user-centered approach which translate users navigational requirements into system representations

‡ Ease of use is vital to success
± The goal is increased user productivity

‡ Setting and meeting user expectations
± Users are on a mission

‡

Don t Make Me Think

Steve Krug

± Usability testing on 10 cents a day
www.pixelpunk.com

Creative Exploration
‡ Begins the problem solving process ‡ Start developing ideas to visually express the core message ‡ What s the big idea? ‡ Pixel-perfect Prototypes (The Apple Method) ‡ Refine. Rinse, wash, repeat. Complete.

www.pixelpunk.com

Prototype Example
‡ Pixel-Perfect ‡ Photoshop Layers for easy manipulation ‡ Client-owned ‡ WYSIWYG

www.pixelpunk.com

Production & Implementation
‡ Execute on the final design
± Approved prototype is turned into a fully functional website

‡ XHTML / JavaScript / CSS
± Separate structure from design

‡ Search Engine Optimization
± Based on competitive analysis data

‡ Browser Testing
± Firefox 3+, Safari 4+, Internet Explorer 7+ on PC, Mac, SmartPhones

www.pixelpunk.com

New Standards For Coding Web Sites
‡ XHTML (1.0 Transitional is okay) / JavaScript / CSS ‡ Separate Style From Structure
± www.cssZenGarden.com ± Easier to Maintain ± Extensible for Future Upgrades

‡ Accessible to those with Disabilities ‡ Optimized for Search Engines ‡ Designed for Mobile Devices w/o Massive Code Re-Write
www.pixelpunk.com

Search Engine Optimization
‡ Keyword Positioning
± Keyword discovery from the competitive analysis ± Google Keyword Suggestion Tool ± Google Traffic Estimator

‡ Information Architecture
± Intelligent internal linking schemes ± Themed pages

‡ Page Architecture
± Make it easy for the Search Engine spiders to crawl and understand the importance of each page.
www.pixelpunk.com

Google Keyword Suggestion Tool
‡ Competition ‡ Monthly Searches ‡ Local Searches

www.pixelpunk.com

Search Engine Optimization (continued)
‡ Tactical On-Site Optimization
± Title Tag Syntax and Optimization, Canonical URL/301 Redirect Issues, Page File Size, META Descriptions, URL Parameter Limitations, URL Depth, Heading Tags, Hyperlink optimization, ALT Tag Requirements, Strong/Emphasis Usage, Internal Linking Strategies, Keyword Density and Placement

‡ Off-Site Optimization
± Inbound links determine value of site and count as a vote for that site. ± Links are hard to get ± Start with relevant directories, local community sites, trade organizations, local professional networks ± Offer compelling content worth linking to

www.pixelpunk.com

Monopolize Google Search Results
‡ Organic Search Results
± Website design for search engine visibility

‡ GoogleBase
± Design Web to conform with GoogleBase rules and provide monthly feeds

‡ Pay-Per-Click
± Use PPC advertising for highly themed targeted ads that land to relevant landing pages.

‡ PLUS Box (beta)
± Take advantage of new Plus Box feature.

‡ Local Search
www.pixelpunk.com

‡ SERP Anatomy
± ± ± ± ± Plus Box PPC Organic Google Base Local

www.pixelpunk.com

Outcome Evaluation
‡ How d I do? ‡ Measure audience response ‡ What s next? How do we move the needle?

www.pixelpunk.com

Some Basic Functional Requirements
( that the Marketing Department sometimes forgets to ask about)

‡ Header and footer Includes
± For analytics, conversion code, and other marketing tools (e.g. Crazy Egg).

‡ XHTML 1.0 Transitional Code
± Make sure it validates ± Add a couple of empty <DIV> in case you want to add something later

‡ Content Management System
± Avoid proprietary systems - Adobe Contribute is powerful and simple

www.pixelpunk.com

Some Basic Marketing Requirements (or capabilities )
‡ Current Performance Analysis ‡ Competitive Analysis ‡ Usability Review/Design with the User in Mind ‡ Have Some Tools in Place
± CrazyEgg, Analytics, Webmaster Tools

‡ Newsletters and Email Marketing
± Access to FTP and/or network access

‡ Forms and Lead-Generation
± Freeform lead-gen form creation w/o relying on technical staff
www.pixelpunk.com

Thanks For Listening!
‡ Any questions?

www.pixelpunk.com

Links
‡ ‡ ‡ ‡ ‡ ‡ Google Keyword Suggestion Tool
± adwords.google.com/select/KeywordToolExternal

Google Traffic Estimator
± adwords.google.com/select/TrafficEstimatorSandbox

Crazy Egg
± www.CrazyEgg.com

Google Analytics
± www.google.com/analytics/

Google Webmaster Tools
± www.google.com/webmasters/tools/

CSS Zen Garden
± www.csszengarden.com
www.pixelpunk.com