Skip to content

Home

Jump to bottom Edit New page
Chris Wells edited this page Sep 27, 2015 · 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

  • 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

  • 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

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

Development

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

Build out all content types

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

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

Admin configuration

  • 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

Rules

Feeds

Flags

Admin dashboard views

Contexts and Spaces

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

Theming

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

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)

Flight-check tests

  • Test that all file download links do not carry the test/dev server URLs
  • [ ]

Remote testing

  • Prepare Live- site before inviting user testing group into test site:
  • Check is site name and email correct?
  • Is email configuration setup?
  • Are typical performance and caching options enabled?
  • Draft then send test email out to user group
  • [ ]

Dev-Ops and Site Launch

### Training

  • Provide site management and admin training to admin team
  • Create tutorial videos

System management

Content

  • Set all completed content to Published
  • Set Featured and Pinned flags on appropriate content

Domain

  • Allow at least 48 hours for changes to propagate across the web
  • Ensure name servers are correct for the DNS configuration
  • Update the A and CNAME records in the DNS configuration as required
  • Set URL redirections in .htaccess

Server configuration

  • Mothball old site
  • Check cron runs are configured to occur at correct frequency

Email

  • Check correct email addresses are set in admin/structure/contact for site emails
  • 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
  • Delete all data from previous hosting company servers
  • Shut down previous hosting company accounts
  • Arrange for refund of any pre-paid hosting services with old hosting company

Project management

  • Duplicate Folk Labs After-care survey template & submit to client
  • Obtain client approval sign-off for final completed Dev- site
  • Agree maintenance contract and terms, payments etc

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