Modular Design and what it means for our clients - Laura Elizabeth

• A set of components we build up to something like a pattern library
• move away from the classic linear process
  • PSD
  • sign off
  • build
  • deploy
• Pattern Lab & Front-end Style Guides

what benefits can module design bring to our clients?

• "As we designers we craft experiences for users, but we often overlook the need to design the experience that clients have during the web design process"
• for a client
  • why?
  • how to sell it to them
  • deliverables
  • what's the business case?
  • assumes a working knowledge
  • to most clients, a website is just series of static pages, these are the deliverables they see

Educating the client

• bring it up as early as possible
• useless if it's made once and never looked at again
• "applying the principles of modular design will save you time money and stress further down the line as your business grows"
• consider it an investment
• have a better working relationship
• website can get updated faster
• ability to update the website themselves better
• working collaboratively, needs to start with the language, not the interface
  • one of the biggest issues is a lack of shared vocabulary
  • try explaining it like LEGO
  • involve the clients in the naming process of your modules, let them pick things that make sense for them

Process

• the practice of modular design isn't as simple and linear as it sounds at the start
• three key phase

initial styling

• traditionally a mood board with swatches, samples etc
• the web very rarely uses this step
• style tiles, creating a nice visualisation of what the feel of the site is
  • clients like the multiple options and mix/match
  • it's a deliverable
  • they feel okay tearing apart something that doesn't look like a finished product
• get the client really involved

planning

• think about the different modules that you might be using
• getting your ides down into something you can work with
• there's nothing wrong with using tools like Photoshop, or even sketching or straight to browser
• design a single page, the shell of the page gives context to the smaller modules
  • having the structure of the page can help you deconstruct it into modules
  • never show this page to the client, keep it internal, just for reference

implementation

• work closely with design and development disciplines
• the more the client is involved in this, the better
• meetings need to be
  • more in depth
  • more practical
  • not necessarily more frequent
• common goal
  • per section
  • per template
  • per user flow
  • make the goal well known
• encourages more meaningful feedback
• designing patterns side-by-side with page templates, then show both to the client

Key take aways

• think about the client's perspective
• show them the benefits relevant to them
• create a shared vocabulary
• provide a concrete process
• design side-by-side