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.
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.
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!
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.
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.
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
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
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).
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!
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