Moving Minds & Moving Code

Understanding, Exploring and Defining SMB Website Requirements

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

‡ 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

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?

‡ 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.)

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.

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

Google Analytics
Site Overlay

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

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

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

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.

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

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.

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

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

New Standards For Coding Web Sites
‡ XHTML (1.0 Transitional is okay) / JavaScript / CSS ‡ Separate Style From Structure
± ± 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

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.

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

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

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

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

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

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

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

Thanks For Listening!
‡ Any questions?

‡ ‡ ‡ ‡ ‡ ‡ Google Keyword Suggestion Tool

Google Traffic Estimator

Crazy Egg

Google Analytics

Google Webmaster Tools

CSS Zen Garden

Sign up to vote on this title
UsefulNot useful