Insight: Client engagement and my web design process
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Insight: Client engagement and my web design process

  • 1,280 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,280
On Slideshare
1,280
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Insight:  Client  engagement  and  my  web  design  process    Presenter:  Anthony  Albertyn  –  21  November  2012.    Three  Golden  Rules  when  engaging  with  my  clients     1. Listen.   2. Ask  the  right  questions.   3. Manage  client  expectations.    Listen  for   • Client  pain  points  –  this  can  open  up  opportunities  for  you  to  offer  them  a   solution  to  their  problems  and  make  more  money.   • Danger  signals  –  like  “we’ve  gone  into  administration  but  …”  or  “we  had  a   fall-­‐out  with  our  last  web  developer.”   • Client  expectations  of  what  the  site  should  do  or  what  they  expect  of  you.              
  • 2.  Questions   • Ask  open  questions  to  get  the  client  talking  –  like  “What  is  your  vision  for   your  new  website?”   • Follow  up  with  probing  questions  to  ensure  that  you  get  to  the  bottom  of   what  the  client  is  trying  to  articulate.   • Don’t  be  shy  to  ask  about  their  budget    –  this  could  be  a  deal  breaker!    Client  expectations   • Identify  gaps  between  what  is  practically  deliverable  and  what  the  client   is  expecting.   • Learn  to  say  no!    Follow  up  with  a  clear  explanation  why.   • Be  honest  and  upfront  with  your  client  and  they  will  learn  to  trust  you.                  
  • 3.  I  roughly  follow  this  process  Initial  client  contact   • Find  out  what  they  generally  want  –  the  big  picture.   • Ask  about  deadlines.   • Ask  about  budget.   • Setup  a  meeting  to  discuss  their  brief  in  more  detail  –  make  sure  the   person  you  are  arranging  to  meet  is  the  decision  maker  and  if  there  is   more  than  one  key  decision  makers,  try  and  get  them  to  attend  the   meeting.    Meeting  to  discuss  the  client’s  brief   • Think  in  terms  of  deliverables  –  this  need  to  be  measurable  (and  will   influence  your  quote)   • Get  an  insight  to  who  the  website  is  for  –  what  are  their  key  audiences   and  what  does  each  of  these  kinds  of  visitors  need  from  the  site.     • If  you  are  also  doing  the  visual  design  of  the  website,  get  examples  of  the   clients  visual  branding  (brochures,  presentations,  their  current  website)  –   remember  that  they  might  hate  their  current  site!            
  • 4.  Document  the  functional  specification  of  the  website   • Break  the  site  down  into  major  sections  (example:  admin,  news,  events,   products,  etc).     • Create  a  site  map  –  this  can  be  a  useful  tool  to  help  your  client  visualise   the  main  parts  of  the  site.  Mind  map  tool:  http://www.mindmeister.com   • Describe  global  and  section  specific  functional  components  in  simple   language  that  your  customer  can  understand  –  focus  on  what  each   component  must  do.   • Produce  wireframes  to  visually  describe  site  layout.  Wire  Frame  Tool:   http://www.balsamiq.com    Reach  consensus  with  client  about  costs  and  deliverables   • Quote  –  avoid  fixed  prices.   • Service  Contract  –  work  to  be  done,  browser  support  for  the  site,  costs,   payment  terms,  bug  fixing,  hosting,  maintenance,  intellectual  property   ownership,  order  cancellation,  remedies  for  breach  of  contract,  force   majeure,  and  unforeseen  circumstance.                  
  • 5.  Visual  design   • If  I  am  doing  the  design,  supply  client  with  mockups  (recommend  to   supply  these  in  one  PDF  document)  –  Tools:  Adobe  Illustrator  or   Photoshop   • If  the  client  has  a  design  agency,  make  sure  that  the  client  has  shared  the   wireframes  and  functional  spec  with  their  designers  so  that  they  don’t   introduce  additional  functionality  that  has  not  been  agreed.    Meet  with  client  to  review  designs   • If  I  am  designing,  discuss  the  designs  and  reasoning  behind  them  –  think   in  terms  of  how  the  designs  compliment  the  clients  brand,  how  they  are   intended  to  appeal  to  their  web  audience  and  how  they  support  the  user   experience  on  the  site.   • If  an  agency  is  designing,  discuss  the  designs  in  terms  of  what  is  practical   to  implement,  highlight  if  there  are  any  areas  that  will  take  longer  to   implement  because  of  design  complexity  and  push  back  on  any  part  of  the   design  which  are  simply  not  practical  to  implement.   • Achieve  consensus  on  what  part  of  the  designs  are  signed  off  and  what   needs  to  be  amended.            
  • 6.    Prepare  development  environment   • Install  Drupal  in  local  environment  –  I  use  MAMP,  Less  CSS  Compiler,   TextMate  on  Mac  Book  Pro.  Tools:  http://www.mamp.info  ,   http://macromates.com,  http://incident57.com/less   • Setup  a  development  site  –  remember  to  password  protect  from  public.     • Setup  Git  Repository.  Tool:  https://bitbucket.org    Drupal  website  build  phase  1   • Install  contributed  modules.   • Create,  configure  and  enable  a  sub-­‐theme  for  the  site,  based  on  a  base   theme  (usually  Omega).   • General  website  configuration  (site  name,  logo,  password  protect  site,   etc)  Module:  http://drupal.org/project/shield   • Build  content  types  and  set  their  display  modes.  Module:   http://drupal.org/project/ds   • Add  dummy  content.   • Build  menus.  Module:  http://drupal.org/project/menu_block   • Build  views.   • Setup  my  Context  for  managing  blocks.  Module:   http://drupal.org/project/context        
  • 7.    Website  build  review  meeting  with  client   • Demonstrate  the  website  functionality  –  cross-­‐reference  this  to  the   functional  spec.  Don’t  bore  the  client  with  documentation  detail,  simply   hand  client  another  copy  of  the  spec  and  tick  off  the  features  you  have   demonstrated.   • Get  feedback  from  the  client.   • Make  notes  of  any  required  changes  and  agree  additional  costs  (if   applicable)  –  be  aware  of  mission  creep.   • Prompt  the  client  to  start  preparing  their  website  content  (Word   document)  –  some  clients  need  a  lot  of  internal  discussion  to  get  this   approved.    Drupal  website  build  phase  2   • Make  any  agreed  adjustments  to  the  site.   • Test  the  site  for  compliance  with  the  functional  specification.    Theme  the  website   • Apply  visual  styling  with  CSS.   • Amend  template  files  where  required.   • Cross  browser  testing  and  browser  bug  fixes.  Tool:   http://www.browserstack.com      
  • 8.  Website  review  with  client   • Present  the  shiny  new  website  to  client.   • Get  feedback.   • Agree  any  changes  –  hopefully  these  should  be  minor,  as  client  has   already  signed  off  the  visual  designs.   • Setup  a  date  to  provide  training  on  using  the  website  and  a  tentative  go-­‐ live  date.    Website  user  training   • Provide  access  to  the  development  site.   • Train  the  client  on  using  site  features  –  don’t  overwhelm  them,  as  there  is   a  lot  to  take  in  if  they  are  new  to  Drupal.   • Provide  client  with  a  set  of  cheat  sheets  or  training  notes.   • Supply  screencasts  on  using  the  website  (if  agreed).                        
  • 9.  Get  client  to  start  adding  their  content  to  the  development  site   • Emphasise  the  go-­‐live  date.   • Ask  client  for  feedback  about  any  bugs  or  problems  along  the  way.   • Support  client  when  they  get  stuck  –  I  normally  do  a  Skype.    Final  tasks  and  go-­‐live   • Ensure  the  hosting  is  in  place.   • Make  sure  client  is  using  the  website  correctly  –  look  out  for  absolute   internal  links.   • Get  final  sign  off  from  client  to  go  live.   • Make  the  site  live.   • Test  website  to  make  sure  everything  is  working  as  it  should.   • Invoice  the  client.   • Get  paid  –  hopefully!                      
  • 10.  Post  go-­‐live  website  review   • Find  out  how  client  is  getting  along  with  their  new  site.   • Identify  any  additional  training  requirements.   • Give  them  feedback  on  anything  they  are  doing  incorrectly.   • Look  out  for  an  opportunity  to  get  more  business  from  them.   • Ask  client  if  they  will  be  happy  to  endorse  you  with  a  1-­‐minute  video   review  or  a  reference  of  some  sort  (example:  comment  on  your  website,   Linked  In  review  etc.)   • Set  a  date  to  come  and  film  the  client’s  video  endorsement.    About  the  presenter:  Anthony  Albertyn  is  a  Drupal  specialist  front-­‐end  developer/themer  and  a  registered  Chartered  Marketer.  www.binarybrand.com  Anthony  is  also  an  organiser  of  the  Cambridge  Drupal  user  group:  DrupalCambs  www.meetup.com/drupalcambs                    
  • 11.