MySource Matrix Section Name

Mashable Design: A Primer

The Squiz design process is based on a concept that we refer to as 'Mashable Design.'

Mashable Design is different to a standard web design process that moves typically  from a flat file 'look and feel' review straight into code generation.  In our experience, this two dimensional approach  is never extensible enough for any large, truly dynamic, CMS-based web site.  Typically we find it leads to design breakage and functional restrictions later on down the line.

As such, our Mashable Design process is not page-centric or template-driven.  Nor is it based on a set of idealised, abstract wireframes. Instead, once we have a grasp of your site's functional requirements, we deliver a range of iterative design prototypes that are built around the core branding assets and content objects that we know will fuel the growth and success of your online business strategy.

In other words, the Squiz design process is a technical product design process, rather than an exercise in 'package' or 'brochureware' design.  It delves deep into your business and technical requirements to come up with a series of flexible and extensible design customisations that can be applied to each presentational requirement of your CMS - both now and in the future.

The Problem with Template- and User-Centric Web Design

When it comes to running a dynamic, content-driven web site, we find that the flat file templates and wireframes that were produced as part of an initial creative design process are usually jettisoned over time.  Six to twelve months from now a dynamic site  will look, feel and behave very differently to its two dimensional heritage.

Just how quickly this transformation occurs will depend on the nature of the business, but it's true to say that the home page and sub page template of today tends to act more as a structural guideline than a concrete design benchmark for the future.  What usually happens in between is a variety of new functionality gets added, remembered and forgotten, which means that the site's design life-cycle takes on new life (oftentimes in the hands of coders rather than designers!)

At one end of the design process spectrum, a 'one size fits all' set of page templates will usually break when it comes to accommodating (for example) a new channel of user generated content, tags and a preference engine.  At the other end, a set of rigidly conceived wireframes based upon a set number of user paths and profiles can often lead a design convention down a blind alley when users start to out think (and out navigate) the basis of the framework.

We feel that a top-down, page template and/or site map view of design should only be used as a starting point in the design process - to create a series of 'touchstones' that future design developments can refer to (and, from a branding perspective, satisfy).  At the same time, we feel that a bottom-up, user- and path-centric approach should be used as guiding principle for likely design outcomes rather than a set prescription for page layouts and functionality.

Design Elements to Consider Before Making Commitments to Code

The types of design processes described above are useful tools to help us visualise how a site might look from 10,000 feet and how a user might interact with it at specific points.  But before you commit anything to code, we recommend you consider the following functional design questions (as you'll see, they all relate to core content objects and how you might wish to deploy them - now and in the future):

Content Scalability.

How will your design embrace important new sources of content, such as: user generated content (which can grow exponentially, overnight - if you're lucky)?  Or the addition of new applications, services and presentation methods that might require new site functionality and new navigational schemes (for example, forums, blogs, tag clouds, content snippets, etc)? Or the syndication of new content feeds (eg, RSS) to and from third party sources?

e-Commerce and Web Marketing Flexibility.

Will your design be capable of turning on a dime to incorporate the content for your new product promotion campaigns?  Will it be able to house the support forums for your new affiliate programs? And will its navigation scheme be extensible enough to embrace a new cross-selling presentation technique (eg, people who viewed A also viewed content B)?

SEO.

As your search marketing efforts gather pace, can your design expand gracefully enough to introduce subtle new SEO techniques (such as the introduction of assistive navigation schemes)?  Are its content components fully optimised for search, or can additional content snippets be added to make them perform better (eg, new extracts, tags or comment threads)?  And is it structured in a modular enough fashion to welcome web crawlers and provide them the fastest path to your optimised content?

Content 'Findability'.

As your content base grows, is your site's underlying design structure capable of growing with it in an intuitive way that keeps users grounded - or will the introduction of a new channel or service present unnecessary navigation challenges?

Mashable Design: A Consultative Process with Fluid Deliverables

Squiz's Mashable process is an answer to your web design growing pains - it addresses many of the core structural, functional and presentational challenges that you're likely to encounter, before it's too late.

Whilst our creative teams aren't kitted out with crystal balls (unfortunately), they plan for an uncertain future by approaching Mashable Design as a consultative, content-centric process.  Instead of centering their ideas purely on your static brand assets or your potential user paths, they create an extensible design logic out of the content assets and services that they know you have to hand - or you're likely to want in the future.

As a result, our multi-disciplined team provides you with a coherent, 'mashable' design framework that's based soundly on your functional specification.

This framework is delivered in such a way that your brand integrity is maintained throughout, and your user requirements are always satisfied - but at the same time it ensures that your 'look and feel' is underpinned by a technical plan that's extensible enough to mutate in line with your business requirements.  In short, we treat your web pages as a set of customisable and fluid - but visually consistent - 'canvases' that can be served by the widest possible variety of core content objects.

Example uses of Content Objects

The Deliverables: a Design 'Sandbox'

What starts as a consultative engagement (to gain an understanding of how your content can be served to users) results in a series of design prototypes that will illustrate how and why your content objects will be presented on the page.

In practice, this might involve showing you how a form will look and behave, outside the context of a surrounding design template; or producing standalone mockups of a map-based navigational scheme to show how users might search for content along geographical lines; or designing a contextual search widget that can be appended to any commerce-related activities.

All of these 'content objects' will be designed and rendered in line with both your branding requirements (colour palettes, fonts, image galleries) and your CMS's technical capabilities, so that you can be sure that the breakthroughs in service and interface developments that you realise during the design phase can be vouchsafed and ultimately delivered to your live site.  (Importantly, the Mashable Design process is a way of ensuring that none of the best bits get left on the cutting room floor!)

We call this prototyping process our 'Design Sandbox' because it allows you to play with serious design concepts in the safest possible 'soft' (visual) testing environment (one that's sanitised by our technical development team) before they're committed to code (or uncommitted as is often the case!).

Putting it Together: the Mashable Design Process

Step 1:  Branding and Design Collateral Input

We take your branding and design collateral - templates, wireframes, image libraries, branding guidelines, etc - and review them in line with your near term functional requirements.  Often these inputs are taken from your internal design teams or your creative branding agencies. The important part here is to understand how your standard design collateral measures up against the nitty gritty of how your site will be technically built.

A generic page canvas with minimal Content Objects

Step 2:  Object Analysis

We flush out all of the components that your design framework will ultimately require.   This is done as a (text document) companion piece to your functional specification - whereby each piece of dedicated functionality is assigned a design deliverable (or 'content object') in a list or 'Mind Map' format.  For example, a form or a navigational scheme that appears in a functional spec will need a visual counterpart before we move to implementation.

Step 3:  Object Design

At this stage, we design all of the content objects that have been identified in the analysis phase.  This provides us with a 'library' of design assets to be applied at the next stage....

Individual Content Object examples

Step 4:  Design Sandbox (or Prototyping)

Here we take your basic branding canvas - usually the static templates that have been created/sourced during Step 1 - and recompile your content objects to create different user interfaces for use at different points within your site - for example:  shopping carts, forms pages, tag clouds, personalised pages, etc.  (Importantly, our aim is to keep the number of basic templates within the system to a minimum, but build them such that they are highly customisable so they can handle any number of content object permutations.)

Step 5:  Template Designs

Once your design functionality has been specified in step 4, we freeze the process and commit your prototypes to flat file designs that are ready for implementation.

An example design canvas with numerous Content Objects embedded