Skip to content

Home

Jump to bottom Edit New page
Chris Wells edited this page May 6, 2017 · 40 revisions

ABOUT THIS WIKI

From Harvest:

  • data migration
  • design and branding
  • Quality assurance and testing
  • scoping, prototyping & wireframing
  • site architecting, data modelling & auditing

We've divided this flightcheck list into sections which roughly map to typical project phases. Since we aim to work in an agile way, it cannot detail each sprint. Instead, we aim to ensure that all tasks which must be completed on web builds build have been addressed before launch.**

About our methodology

This wiki breaks down our methodology into phases.

We use four types of design activity to complete a project:

  • Explore: Gather and analyse research as a raw material to drive design
  • Design: Develop ideas and prototypes approximating to the final artifact
  • Build: Build the final artifact
  • Validate: Test to check whether our artefact successfully meets its objectives

Our overall project methodology is fairly classic and is derived from a synthesis of the Permaculture SADIM model.

We record tasks in Harvest under the following categories. Where possible, these labels are mapped to our design framework:

Explore

  • Research
  • Project management
  • Meetings & workshops

Design

  • Scoping, prototyping & wireframing
  • Site architecting, data modelling & auditing
  • Design & branding

Build

  • Development & site building
  • Data migration
  • Theming & front-end development
  • Content development & optimisation
  • Dev-ops & system admin

Validate

  • Quality assurance & testing
  • Communications & client relations
  • Technical support
  • Client amendments

Project admin & setup

General project documentation

Gather documentation

  • Conduct Design Discovery Questionnaire
  • Conduct Web Project Discovery Questionnaire
  • Complete a Theory of Change to test as many project Assumptions as possible
  • Record project objectives to support strategic goals
  • Back-cast from objectives to a Theory of Change
  • Duplicate & Populate Compliance Template
  • Duplicate & populate Monitoring & Evaluation plan template
  • Determine approximate project budget and timeline
  • Determine approximate ongoing hosting budget and requirements
  • Duplicate & populate Work Estimate Template
  • Duplicate & populate Client Proposal Template
  • Create / review client's Mission Statement
  • Create / review client's business analysis & SWOT
  • Create / review organisational strategy for end product
  • Identify stakeholders and project liaison at client organisation
  • Estimate hours and costs using using Task Estimating Table Template
  • Prepare quote or proposal based on the basic Proposal Template
  • Prepare project charter to scope project and get authorisation to proceed
  • Commit to deliver V1.0 Backlog and as many Stretch Goals as possible
  • Document general project risks in either a Risk Register or SWOT analysis

Configure project management systems

  • Set up project on GDrive
  • Set up project on Dropbox
  • Set up project on Trello
  • Set up client and project budget on Harvest
  • Set up client and project on Crunch

Set up development environment

  • Verify client domain name(s) are registered and working
  • Set up project on Pantheon / alternate dev platform
  • Set up project on GitHub
  • Install CSS Source Maps tech so sources of SASS code can be read in Chrome
  • Document development environment
  • Set up Drupal working site
  • Check public images folder is set up to allow User image default picture files (https://www.drupal.org/node/1090770)
  • Set module update settings to weekly and for security updates only.

Research

Examine existing site(s)

  • Perform initial content and content model audit
  • Survey existing web assets and content, email alerts and transactional emails
  • Inventory and audit existing content (see external resources) into Content Audit template
  • Set client a task to create a list of 50-100 potential blog posts
  • Conduct an interface audit
    • Screenshot each interface element across entire site
    • Gather common elements together into page
    • Name each element and identify points of difference between them
  • Research competitors in the same field & organisations providing similar service in other markets
  • Gather example competitor sites

Define user types

  • Duplicate and populate Audience research template
  • Define maximum of 3 personas typical of priority user roles
  • Align personas with Drupal user roles (including admin and editor roles!)
  • Audit client's team to identify roles and permissions

Recruit user research subjects

  • Build test subjects address book from:
    • existing client CRM
    • Users engaged on blogs, social media platforms and forums
    • eNews or marketing lists
    • Other lists
  • Contact test subjects to ask them to join a User Group mailing list

Existing user survey

  • Draft a simple survey on Survey Monkey or similar to ask key questions from as wide a group of users as possible
  • Publish and promote survey to all users

Develop Epics and User Stories

  • Duplicate & rename User Stories template
  • List out Epics (high level functions)
  • Break up Epics into User Stories
  • Collect User Stories into Themes
  • Divide User Stories into Version 1.0 backlog and Stretch goal stories
  • Check user stories cover every page and listing page on site
  • Capture user stories into Github
  • Define GitHub feature labels according to Epics

Visual research

  • Survey existing brand guides, digital branding and identity
  • Gather visual design inspiration

Analysis

  • Get requirements document approved signed by client

Requirements

  • Create Priority Features Matrix based on Competitor Analysis
  • Prioritise stories on axes (x= ease of development and y = "value to users")

Define User Journey flows

  • Combine User Stories to define all User Journeys

  • Develop Content Requirements with examples

  • Analyse overlaps between content types to rationalise them down to minimum required

  • Define Technical Requirements & Minimum System Requirements for your users

  • Create content migration instructions

  • Hold Folk Labs meeting to agree on what can actually be built

  • Define content & functionality & final Project Scope

Users

  • Define the minimum number of User Personae based on new or existing customers
  • Create matrix of user roles and permissions
  • Assign User Scenarios or Key User Goals & Tasks to relevant Personae

Page tables

https://www.chapterthree.com/blog/using-page-tables-deliver-meaningful-design

  • Page (or template) Title
  • Page Goals (Business Goals)
  • Primary Audience
  • Secondary Audience
  • Content Elements (buckets chunks)
  • Calls to Action
  • Message Focus
  • Mobile Priority

Information Architecture

  • Define Site sections as Contexts and Spaces
  • Define Content Type and View requirements
  • Define Organisation Scheme (requirements for Taxonomy Vocabularies)
  • Define Content Categories (which terms to add to each Vocabulary)
  • Define Category Labels (write actual Taxonomy Terms)
  • Define Book outlines
  • User test site sections to ensure all sections have been captured
  • Define URL path structure
  • Define Breadcrumbs structure
  • Define Page title structure
  • Define Menu (and sub-menu item) structure
  • Define URL path structures, menus, vocabularies, views, node references
  • Run a Card Sort with Users to test assumptions on Organisation Schemes
  • Mockup site navigation in a sitemap
  • Test site navigation menu with Users

Page Tables

User and site journeys and flows

  • Flowchart User Journeys to achieve User Goals for each Personae (use Eight Shapes Unify framework)
  • Test User Journey map

Interface and layout

  • Duplicate & populate Wireframe Layout List Template 1
  • Wireframe mobile layouts first then expand to tablet, then finally desktop layouts

Design testing

  • Test paper or digital prototypes with focus group(s) of 1–3 subjects

Visual design

Visual comps

  • Develop Style Tiles
  • Use Style Tiles to create Visual Comps for key responsive screen sizes
  • Decide on media query widths
  • Grids, sizes, spacing, gutters
  • Key Objects: images, panels, lists,
  • Colour palette: primary, secondary, alert, info, warning and success
  • Typography: heading and body font families, weights and variants
  • Font sizes for headings, body text and controls plus variants
  • Lines
  • Identify Atomic Design modules
  • Symbols to identify icons for controls and other content
  • Image and object sizes
  • Test colour palette with Sim Daltonism app

Site favicons

Functional implementation

Basic site configuration

  • Set up shared Dev- instance on Pantheon
  • Set up Version Control System
  • Set up local copies
  • Store backup in case of emergecy need to fallback to older site
  • Identify modules or plugins required [ADD Google Sheet URL here]
  • Check time zone configuration on server and in Drupal
  • Install and configure theme
  • Configure .info file

Content types

  • Use content type analysis to create content types
  • Identify key shared fields across all content types
  • Configure Display Suite field displays
  • Configure all display modes and add new ones if necessary

Blocks

Context

Display Suite

Field collections

File types

Menus

Views

Build node edit forms

  • Group related fields together into vertical tabs

Build all basic Views pages, blocks and other View types

Set up all taxonomies

  • Decide whether to use multiple vocabularies or one hierarchical vocabulary

Save content types into Features

Taxonomy

  • Decide whether to use multiple vocabularies or one hierarchical vocabulary

  • Use Taxonomy Manager to create Vocabularies and Terms and set relationships

  • Define which html tags are stripped before publication in /admin/config/content/formats/wysiwyg_editor

Site notifications and mails

  • Rewrite all admin site notification emails to be clear and usable
  • Register and configure all site emails (info@example.com, press@example.com etc)
  • Configure Mandrill or MailChimp to run batch email sending or other mail server
  • Draft text for all site emails and notifications

Admin configuration

  • Configure Contact form(s) with correct email addresses

  • Define which html tags are stripped before publication in /admin/config/content/formats/wysiwyg_editor

  • Configure admin dashboard views

Rules

Feeds

Flags

Admin dashboard views

Contexts and Spaces

Spaces

Fences

Contexts

  • Set URL path structures for node pages and views pages

  • Check all URL paths are consistent to the URL plan in Site Planning

  • Install release candidate for capacity testing, performance tuning and to solicit user feedback

  • Transfer code, files and database to web host

  • Deploy new site to live

  • Send log in codes to client

Roles and permissions

  • Review all roles and permissions to ensure all users have correct permissions and permission to grant other users correct permissions.

Mail and notifications

  • Ask client for all site mail and team mail details
  • Define mail rules and flows
  • [ ]

ACCOUNT SETTINGS

  • Configure default behavior of users
  • Registration requirements
  • E-mails
  • Fields
  • User pictures
  • CAPTCHA: Administer how and where CAPTCHAs are used
  • HONEYPOT: Install and configure Honeypot module
  • MOLLUM: Install and configure Mollum
  • Comment Notify
  • Configure settings for e-mails about new comments
  • IP address blocking

CONTENT AUTHORING

Configure autosave settings Diff settings Administer flood control settings for email contact forms Configuration for the Entity Quote module Configuration for API Geocoder keys Configure Honeypot spam prevention Link checker - Configure the content types that should be checked for broken links Manage Linkit profiles Configure how Mollom moderates user-submitted content Configure settings for scheduled publishing and unpublishing Configure how content input by users is filtered Wysiwyg profiles Configure client-side editors

DATE API

Calendar administration Configure the Date Popup settings

MEDIA

File system Tell Drupal where to store uploaded files and how they are accessed. File settings Configure allowed file extensions, default alt and title sources, and the file upload wizard. Image styles Configure styles that can be used for resizing or adjusting images on display. Media browser settings Configure the behavior and display of the media browser. Video Embed Styles Administer Video Embed Field's video styles. Image toolkit Choose which image toolkit to use if you have installed optional toolkits.

SEARCH AND METADATA

URL aliases Change your site's URL paths by aliasing them. Metatag Configure Metatag defaults. Search API Create and configure search engines. Site map Control what should be displayed on the site map. URL redirects Redirect users from one URL to another. XML sitemap Configure your site's XML sitemaps to help search engines find and index pages on your site. Clean URLs Enable or disable clean URLs for your site.

REGIONAL AND LANGUAGE

Regional settings Settings for the site's default time zone and country. Date and time Configure display formats for date and time.

ADMINISTRATION

Adminimal menu Adjust adminimal menu settings. Administration menu Adjust administration menu settings.

SYSTEM

Site information Change site name, e-mail address, slogan, default front page, and number of posts per page, error pages. Actions Manage the actions defined for your site. EU Cookie Compliance Make your website compliant with the EU Directive on Privacy and Electronic Communications. Google Analytics Configure tracking behavior to get insights into your website traffic and marketing effectiveness. Google Analytics Counter Configure Google Analytics Counter module Lexicon Settings Configure the Lexicon module settings. LoginToboggan Set up custom login options like instant login, login redirects, pre-authorized validation roles, etc. Mail System Configure per-module Mail System settings. SMTP Authentication Support Allow for site emails to be sent through an SMTP server of your choice. Cron Manage automatic site maintenance tasks.

USER INTERFACE

Forward Configure settings for forward module. Module filter Configure how the modules page looks and acts. Shortcuts Add and modify shortcut sets. Super Login Configure improvements to the Drupal login page.

DEVELOPMENT

Performance Enable or disable page caching for anonymous users and set CSS and JS bandwidth optimization options. Logging and errors Settings for logging and alerts modules. Various modules can route Drupal's system events to different destinations, such as syslog, database, email, etc. Maintenance mode Take the site offline for maintenance or bring it back online. jQuery update Configure settings related to the jQuery upgrade, the library path and compression. Strongarm Manage Drupal variable settings that have been strongarmed.

WEB SERVICES

Follow Configure the site-wide web service follow links. RSS publishing Configure the site description, the number of items per feed and whether feeds should be titles/teasers/full-text. Service Links Control which and where service links should be active.

SECURITY

Theming

Configure basic Theme settings

  • [ ]

Configure file structure

  • Sketch out component classes in SASS files
  • Define components then generate draft CSS classes
  • Generate SCSS files for each component

Templates

  • Use wireframes to create template listing

Display Suite (or Panels)

  • Convert Style Guide style code into Theme

Admin Form usability

  • Edit all node creation forms so all fields are in vertical tabs
  • Use Rules Forms support to disable unnecessary UI elements
  • Install proper Preview module
  • Use Contextual Admin to create custom Admin screens
  • [ ]

Provision placeholder content

  • Generate fake content to enable previewing of live site content

Validate style code

Theming checklist

Generate individual templates for every unique page. (DO NOT use default Display Suite page templates - they don't offer unique object classes to hang CSS selectors onto)

  • Views
  • Blocks
  • User profiles
  • Admin section
  • Node content
  • Category listings
  • Search results
  • 404 page
  • Access denied page
  • Site offline page
  • [ ]

Content development & SEO

Content planning

SEO

  • Brainstorm Keyword Research
  • Categorise each specific Keyword Phrase into groups
  • Use Google's keyword research tools to find related phrases
  • Export keyword phrase sets which we need to promote most heavily across all the site content and navigation
  • Rank and prioritise which keyword phrases are most popular and relevant to the client's business
  • Remove keyword phrases with are obviously not relevant or suffer from extremely low search counts
  • Determine which keyword phrases are already heavily targeted and identify areas of potentially competitive phrases
  • Compare number of searches each keyword phrase gets compared with its relevance and its competitiveness level to determine which phrases should be promoted
  • Install modules: google_analytics, search404, metatag, global_redirect, redirect, xmlsitemap, site_map.
  • seositecheckup.com http://seositecheckup.com/
  • Check Google Analytics is connected and tracking new code
  • Configure Site map
  • Authenticate with Google
  • Submit XML sitemap to Google
  • Authenticate with Bing
  • Submit XML sitemap to Bing
  • Track the site with Google Analytics

Tools

Launch-specific content

  • Draft and publish a Press release and site page about new site launch
  • Draft then queue-up Facebook and Twitter posts promoting the new launch

Documentation

  • @djwesto to add section here on writing user help documentation
  • @pmackay to add section here on writing technical documentation

Ongoing monitoring and support

  • Monitor site for first few days to ensure it isn't overwhelmed with returning users
Add a custom footer
Add a custom sidebar
Clone this wiki locally