The Web Design Workflow (Mentorship Series)

Guidance on Web Design/Development workflow

Get the files referenced in the book here.

 

The High Level Workflow

• Get the Project
• Define the Project
• Developing Site Structure
• Visual Design & Testing
• Production & QA
• Launch & Beyond

Get the Project

How to find, sell to a client and get the project

Cold Calling

• Great post on Boagworld (see “Selling your web design services”)

• Finding Clients
  • Network: (Friends, Family, Associates)
  • Research: (New businesses, Est. businesses with lacking online presences)
  • Cold Call: Takes nerves of steel. Best to create a relationship first. Example: A bakery or restaurant that you frequent. The business doesn’t have a website. Speak to the owner, communicate your joy in their product or service, then ask about their web strategy. (See more on not selling immediately below)
  • Take on overflow work from design firms: Contact web design firms to find out if they have overflow work that they might send your way as a subcontractor.
• Selling to Clients
  • Don’t immediately sell. Ask questions, listen, provide suggested solutions to problems.
  • Don’t expect immediate business.
  • Plan to plant seeds, harvest later
• Getting the Project
  • Quote estimated price (project or hourly rate)
  • Use a contract; protects you & client (but get legal assistance when drawing up the contract … don’t so what I have done)
  • Don’t be afraid to ask for down payment in advance

Define the Project

Discovery, Clarification & Planning

Personas

• Approaches to Creating Personas: Chapter (PDF) from the book “The User Is Always Right: A Practical Guide to Creating and Using Personas for the Web” by Steve Mulder

• Discovery
  • Website goals; business/organization goals; audience goals
  • Client Surveys/Interviews
  • Existing Materials
  • Understanding the Audience (Personas)
  • Understand Industry/Competition
  • Technical Requirements
• Clarification
  • Determine & Agree to Overall Goals
  • Prepare Creative Brief
    • Simply a stating of what the client wants and what has been agreed to
• Planning
  • Create a project plan
    • Individual Tasks
    • Who’s doing what?
    • How long should each task take?
  • Determine Initial Budget
  • Creating Schedules
  • Determine Roles
  • Create Staging/Communication Area
  • User Testing Plan
  • Kick Off the Project

Developing Site Structure

Examining the content, site and pages

Site Mapping Resources

• Software for Information Architecture, Sitemapping

• Content View
  • Addressing Content
  • Audit Existing Content
    • What content you have?
    • What content you need?
    • What content needs to be re-worked for the web?
  • Outline Content
  • Prepare a Content Delivery Plan
    • What content is needed?
    • When does content need to be ready?
    • Who will prepare the content?
• Site View
  • Sitemapping
    • Visual representation of site’s structure, organization, flow, grouping of content, information architecture
  • Addressing Existing Site Organization
    • What changes will be made compared to the existing site?
    • Any feedback from user testing?
    • Information Architecture / User-centric Content Buckets
  • Setting Naming Conventions
    • User-centric
    • Consider SEO in naming conventions

Wireframe Resources

• Website wireframe – Wikipedia
• Wireframes
• Web Site Wireframe

Card Sorting Resources

• Card sorting: a definitive guide
• Card Sorting – Usability.gov

• Page View
  • Wireframing
    • Storyboards for the site; content layout
    • Shows a hierarchy of information but not visual design (color, style, typeface)
  • Addressing Navigation
    • User-centric; goal driven
  • Naming & Labeling
    • User-centric; result from card sorting or other discovery exercise
  • Defining Key User Paths
    • Key Tasks
      • Request a brochure
      • Signup for Newsletter
      • Purchase a product

Visual Design & Testing

Creating the visual design, confirming the design flow & functionality

• Creating the Design
  • The Creative Process
  • Defining Smart Design
    • Must meet objectives; supports goals, functional, fast loading, etc.
  • Reviewing/Adhering to Site Goals
    • Use the creative brief, wireframes as guidelines
  • Developing Concepts
    • Low-fi; pencil sketches
  • Designing for the User
  • Presenting Designs and obtaining Feedback
    • Obtain internal feedback before presenting for client feedback
    • Needs to be managed: pre-briefing and efficient method for obtaining feedback
• Confirming the Design
  • Confirming site flow & functionality
  • HTML Protosite
    • HTML low-fi design, click-through to test flow
  • Testing Functionality
    • Test interactive features to determine benefit, positive impact
      • Rollover menus
      • Pop-up windows
      • Form elements
  • User Testing
• Handing Off the Design
  • Creating the Graphical Templates/Mockups
    • Create the final graphical template
      • PSD Photoshop file
      • Includes regular/hover/interactive states (layers)
  • Creating a Design Style Guide
    • Document / User Guide for the site
    • Colors, Typefaces & sizes, graphical elements, textual tone, etc.
    • Versions for both visual design & interactive design (front & back-end)

Production & QA

Prepping for Build out, Building the Site (code & functionality), Testing

• Prepping for Build out
  • Review Project Status
    • Check for changes, scope “stretch” before building the site
  • Establish Guidelines
    • Refer to discovery information (Tech Specs) for relevant information (browsers to support, etc.)
  • Setting File Structure
    • Driven by current state, client desires, SEO impact
• Building the Site
  • Slicing & Optimizing Images
    • Graphics sliced & diced from graphical template (mockup) to be coded back together.
    • Optimized for balance between smallest file size while maintaining quality of image
  • Creating HTML Templates & Pages
    • Build templates to based content pages on.
  • Implement Scripting
    • Front-end page-level scripting (JavaScript, Ajax) for effects (rollovers, pull-down menus)
    • Populate Pages with Content
      • Biggest delay point: is the content ready?
      • Includes Page , , tags
    • Integrate Backend Development (if it applies)
      • Connect Database back-end, server side scripting, CMS, etc.
• Testing
  • Create a QA Plan
    • Quality Assurance
    • What to test?; Test Scripts (tasks to perform)
  • Prioritize and Fix Bugs
    • Document all issues
    • Prioritize & fix bugs
  • User testing
    • Last chance to perform user testing for usability, accessibility
  • Conducting a Final Check
    • Design Check: Does everything match design brief, specs
    • HTML Check: Is code sound, does it validate?
    • Functionality/Engineering check

Launch & Beyond

Delivery, Launch & Ongoing Maintenance

• Delivery
  • Handing the site off to the Client/Production Server
    • Official sign-off from client, accepting the site for production
  • Complete the Production Style Guide
    • Review, edit, finalize the Style (User) Guide
  • Create Handoff Packet
    • All raw files (Photoshop, Illustrator, Flash files)
  • Tracking Documentation
    • Collect all documentation (reports, briefs, charts, emails, etc.)
  • Conducting Postmortem Meeting
    • Summary of project; what worked, what didn’t
  • Schedule Site/Content Maintenance Meeting
    • Show client how to maintain their site
• Launch
  • Prepare Communications
    • Send out announcements of site launch
  • Index Site with Search Engines
    • Submit site to search engines (Google Webmaster Central, Yahoo Site Explorer, MSN Webmaster Central)
  • Launch the Site
• Maintenance
  • Develop Maintenance Plan
    • Content Changes
    • Database/CMS maintenance/backup
  • Measure Success
    • Web site analytics
    • Gauging site traffic, conversion goals
  • Confirm Site Security
    • If site leverages security, test for security leaks, holes.
    • Can even include ordinary elements like web forms (check for SPAM-ability)

Resources

• Web ReDesign: Strategies for Success:  Course offered from Lynda.com.