Skip to content

Home

Jump to bottom Edit New page
Chris Wells edited this page Aug 10, 2015 · 40 revisions

ABOUT THIS WIKI

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:

  • Research: Gather information as a raw material to use in analysis
  • Analyse: Examine findings to uncover information on the context for the artifact and identify opportunities for innovation and improvement
  • Design: Develop ideas and prototypes approximating to the final artifact
  • Validate: Test to check whether our artefact will successfully meet its objectives

Project admin & setup

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
  • 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

General project management

  • Record project objectives to support strategic goals
  • Determine approximate project budget and timeline
  • Commit to deliver V1.0 Backlog and as many Stretch Goals as possible
  • Prepare project charter to scope project and get authorisation to proceed
  • Duplicate & Populate Compliance Template
  • Duplicate & populate Monitoring & Evaluation plan template
  • Define a Theory of Change & Test as many project Assumptions as possible

Set up development environment

  • 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)

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
  • Research competitors in the same field & organisations providing similar service in other markets
  • Gather example competitor sites

Define typical users

  • Duplicate and populate Audience research template
  • Define user roles (don't neglect admin and editor roles!)
  • Define maximum of 3 personas typical of priority user roles

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

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

  • 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 set of personae
  • Create matrix of user roles and permissions

Information Architecture

  • Define Site sections
  • Define Content Type and View requirements
  • Define Organisation Scheme (Taxonomy Vocabularies)
  • Define Content Categories (Taxonomies)
  • Define Category Labels (Taxonomy Terms)
  • Define Book outlines
  • Mockup site navigation with sitemap
  • 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 reference

Interface and User Experience

  • Duplicate & populate Wireframe Layout List Template 1
  • Wireframe mobile layouts first then expand to tablet, then finally desktop
  • User test paper prototypes on 1–3 subjects
  • Develop Style Tiles
  • Decide on media query widths
  • Use Style Tiles to create Visual Comps for key responsive screen sizes
  • Generate and document HTML Styleguide

User experience

  • Generate minimum number of User Personae based on new or existing customers
  • Assign User Scenarios or Key User Goals & Tasks to relevant Personae
  • Flowchart User Journeys to achieve User Goals for each Personae

Visual design

Visual comps

  • 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

Install theme

Build out all content types

  • Use content type analysis to create content types
  • Identify key shared fields

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

Admin configuration

Site notifications and mails

  • Rewrite all admin site notification emails to be clear and usable

Rules

Flags

Admin dashboard views

Contexts and Spaces

Theming

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
  • [ ]

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
  • Check for broken links. W3C Link Checker http://validator.w3.org/checklink)
  • 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

Accessibility testing

ARIA Landmarks

See http://a11yproject.com/checklist.html

  • ARIA Landmarks set up correctly for banner, navigation, main, article, aside ("complementary"), footer ("contentinfo"), meta info, copyright, company info, etc, form role="search", Language Attribute, etc
  • Language attribute declared on HTML element
  • Specify a language with the lang attribute on the element.
  • Document Outline
  • Use semantic headings and structure
  • Links have :focus state
  • Links are recognizable (underlined)
  • Images have appropriate alt text (see: http://a11yproject.com/posts/alt-text)
  • Javascript is unobtrusive (no inline scripting)
  • Alternatives provided for users without Javascript enabled
  • Tab order of forms follows logical pattern
  • Associated label for all form controls (e.g. input, select etc.)
  • Placeholder attributes are NOT being used in place of label tags
  • Form elements grouped with fieldsets
  • Fieldsets described with legend (esp. for Radio buttons and Checkbox groups)
  • Transcriptions of video and audio media assets
  • Site tested using a screen reader only
  • Site tested using keyboard only

Testing

  • Site tested extensively on Windows (Internet Explorer, Chrome, Firefox
  • Site tested extensively on Ubuntu (Firefox, Chrome)
  • Site tested extensively on Mac (Firefox, Chrome, Safari)
  • Site tested extensively on Android (Firefox, Chrome)
  • Site tested extensively on iOS iPad (Chrome, Safari)
  • Site tested extensively on iOS iPhone (Chrome, Safari)

Dev-Ops and Site Launch

Project management

  • Get client approval sign-off for final specifications
  • Client approval sign-off for project completion
  • Duplicate Folk Labs After-care survey template & submit to client
  • Agree maintenance contract and terms, payments etc

### Training

Content

  • Set all completed content to Published

Domain

  • Switch domain across
  • Set URL redirections in .htaccess

Server configuration

  • Mothball old site

Email

  • Check correct recipient email is set in admin/structure/contact
  • Enable social sharing widgets
  • Integrate Twitter account into site

After going live

  • On Pantheon, check dev and test sites are password protected
  • Check no live cached content refers back to dev/test

Security

  • Update Mollom keys

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