Input vs. Output

Any designer worth his or her salt knows that it is never appropriate to begin to solve a need with design. The design should, to be purposeful, be an output, not an input.

This is akin to the famous Magritte painting of a pipe, accompanied by the text ”Ceci n’est-pas une pipe” – this is not a pipe. Because the work is obviously a painting of a pipe, not an actual pipe.

This reminds us that an image is not reality, it is a reflection of, or an expression of reality. It may even be purposely created as something entirely different from reality: a fantasy, or an abstract concept.

Likewise, design is not reality, and it is in itself not the solution to the client’s need – it is simply an expression of that solution. The desired communicative outcome represents the actual solution: how the audience responds to it, and how they choose to act based on that.

What does this mean?

It means that, as designers, we should not design for design’s sake. The kind of visual expression that exists for its own benefit is called art.

Design is a tool. A means to an end.

Design Ethos

Never just create a one-off asset when you can construct something reusable

Never just create a reusable single template when you can design something modular

Never just design modular components when you can devise a framework

Never just devise a framework when you can architect a design system

Never just architect a design system when you can define a user experience

Never just define a user experience when you can plan out a user journey

Never just plan out a single user journey when you can improve lifetime value

On Business Leadership

One of the most stressful and painful experiences in my professional career has been to watch up-close the attrition of valuable experience and the dissipation and squandering of considerable, hard-earned intellectual capital, because of passive handwringing and a mystifying unwillingness to lead.

Immense value is lost simply because people in leadership positions simply will not stand up and assert ownership of the disciplines which are under their stewardship, or step up and drive from a position of real and tangible subject matter expertise. Such delicate assets are so very easily lost in the cracks of, or ground to dust by, the wasteful and inconsiderate machinations of corporate politics.

Ultimately, the biggest responsibility of business leaders is to realize, champion and harness the capabilities of the human capital placed under their control.

A failure to own this responsibility is nothing short of a betrayal of the promise that talent brings.

The Interactive Agency – a Creature of the Past?

Twenty years ago, the media landscape was vibrating with the buzz generated by a brand new type of communications service provider: the interactive agency. In the wake of the dotcom crash, however, things quickly changed and it would now seem that the integrated marketing- and IT services once offered by the interactive agency have been assimilated by and split up between the ad agency and the IT-consultancy. So, is the interactive agency thereby out for the count, or is it still a viable business? Is there still a need for it?

1. The Interactive Agency: a Conduit Between Marketing and IT

As a digital creative, I much too often start working with a new client, meeting with either the marketing side or the IT side of a corporation (depending on the nature of the assignment), and eventually inevitably stumble upon the proverbial 800-pound gorilla in the board room that no-one wants to talk about. There is a rift that goes straight down the middle of the organization: Marketing and IT just won’t talk to each other! They often see each other as completely unrelated even though they often serve as opposite sides of the same coin. Sometimes they even outright sabotage each other’s work, in what amounts to a petty turf war over budgets, or the ears of the board of directors.

This is in itself not a mystery – IT and marketing people come from completely different worlds and don’t speak the same language. IT people deal in logic and talk about usability, functionality and the distribution of information. Marketing people, on the other hand, are purveyors of emotion and talk about impact, communication and the purpose of persuasion.

I submit that the interactive agency is the cure for this communicative ailment, simply because interactive agencies straddle the divide between IT and marketing.

On one hand, interactive agencies are savvy to how networked computers form the nervous system of a modern corporation. They realize what information technology can bring in terms of opening up communication channels, both within and and outside a company. They understand how procurement-, inventory-, logistics- and sales processes relate to business system platforms. They know how to make data work for you and how to make data in any form a shared and moldable commodity across the organization, ensuring that it can be properly capitalized upon.

On the other hand, interactive agencies also understand user experience and how to make it adhere to strategic brand directives. They can translate core values into interactive principles and help maximize both the impact and retained emotional and intellectual substance of a marketing campaign. They can integrate a multitude of media types and help marketing transcend the limitations of one single channel. They know how to make marketing more precise, talking one-to-one instead of blindly broadcasting to an unknown, unspecified mass audience. And, most importantly, they know how to let interactivity take your marketing from mere communication to actual transaction, involving IT on the commerce end, producing measurable results that go straight into the books.

In fact, one-on-one customer interaction should really be considered critical for all types of businesses, in order to create new opportunities and capitalize on them. Appropriately, where traditional marketing usually takes the form of a monologue, web-based interactivity creates a dialogue between sender and recipient. This closes the gap between communication and actual transaction, creating clear return on marketing investments. Interactivity also paves the way for increased brand awareness and customer loyalty and lays a foundation for strong, sustainable long-term customer relations. This way, interactivity can help marketing achieve concrete sales effects that are clearly visible on the bottom line.

And this is where marketing and IT need some help. On their own, their budgets are often spent one-dimensionally on somewhat lopsided, more or less self-serving efforts, where true ROI is but a distant goal.

Next: Part 2. “Marketing: the Lure of the Pitch”

Working With Creatives

Understanding what matters most to Creatives will make it easier for you to work with them successfully. But what matters most to a Creative is not always what matters most to other professionals, so let me try to explain this from my perspective, as a Creative, but also draw on my experience working with other Creatives.

I have more than 30 years of professional experience as a designer, illustrator, animator, writer and creative entrepreneur. While I enjoy making money just as much as the next guy, and certainly appreciate recognition, I don’t typically focus very much on my paycheck or my title, and I don’t see my career as just a meal ticket. That is not to paint a picture of myself as some sort of altruist hippie, but simply to say that my work gives me enough satisfaction to make that my biggest reward, and I know the same goes for many other Creatives.

What matters most to me and to other Creatives is, hands down, having the luxury of being allowed to care for the quality of our work. Most people interpret this as signs of prima donna behavior, of artistic ego, and that is true to some degree, but on the other hand, if a Creative cares about producing top notch quality for you, how can that be a bad thing? It would be unfair to equate these signs of professional pride with an inflated sense of self-importance.

On the flip side of quality is timeliness and deadlines. While most Creatives take pride in being efficient and fast, they usually resent the notion that their work can be expedited, and cranked out without care. This would be equivalent of asking a trained chef to produce the goods like a hot dog street vendor. A client’s convenience is typically not a particularly rewarding consideration for a Creative, especially if that convenience comes at the cost of compromised quality. You may well perceive quick, expedited results from a Creative as being adequate, but your opinion of what is adequate may not matter much to a Creative, who would know precisely how much better they could have made something, if given more time. So, the best way to get Creatives to accept compromises in this context is to a) acknowledge that they actually could do better if given more time, and b) to occasionally let them do just that.

Consistency and professionalism are tricky subjects with Creatives. Any Creative would want to suggest that they always produce their best possible work, regardless of who the client is. This is unfortunately not quite true – who the client is, what the assignment is about, and what the Creative is being asked to do actually matters for the end result. While a true professional Creative should have a rather high standard, any Creative would confess, if pressed for an answer, that they sometimes elevate their standards further, and go above and beyond. This is because there is an emotional investment required in any creative endeavor, in which inspiration plays a part. There may not always be much you as a client can do about this, aside from encouraging your Creative to find that inspiration, but there is a lot you can avoid doing, so as to not sabotage the results. Being rude and disrespectful will never work in your favor – it is akin to insulting the waiter or the chef at a restaurant when sending your food back. You may not want to know what goes on back in the kitchen after such a display of rudeness.

Furthermore, on that same note, no Creative wants to be treated as a soul-less production machine. It would behoove anyone seeking the help of a Creative to recognize that if they themselves had been able to produce what they’re asking for, they would not need to talk to a Creative in the first place. We do not typically instruct a surgeon on how to perform surgery, and we don’t tell an architect how to plan a building. Similarly, my advice to any client would be to leave room for contribution from your Creative. When it comes to creative work, it s very easy for anyone and everyone to have opinions, but there are likely things that you’re not aware of, things your Creative can help you consider or avoid, which might improve on the desired end result. Micro-managing your Creative is likely not the best course of action, and it may even turn your Creative against you, which obviously doesn’t help.

Reviewing work is a particular point of concern for me and for Creatives in general. That is not always to say that Creatives can’t handle criticism, but it is a sensitive issue, and dismissive or unfair criticism especially so. Most Creatives, myself included, get very involved and put a lot of thought into their work. It may not always be the right thoughts, or the most relevant thoughts, and it’s true that Creatives sometimes believe they have a monopoly on the creative truth. But it is also true that many clients, managers and co-workers are not aware of the thought process and intellectual investment to begin with, and therefore tend to dismiss them too lightly and perhaps unwittingly. Therefore, the best way to work with a Creative is always to start by assuming they do have a purpose behind their work, and ask what that purpose is. You can then proceed to discuss it, and ask if and how the solution can be improved, if inadequate in any way. Asking how something good can be made even better is a challenge most Creatives would embrace quite willingly.

It is important to recognize that creative work – especially in design, where components interact in often complex visual systems – is always intended as a very specific (custom) solution to often very specific (unique) challenges. Therefore, framing those needs and challenges accurately at the outset of a project is of paramount importance. Also, connecting the problem and its original specifications to the solution when reviewing it is equally important. Very often, a reviewer (be it a client, a manager or a co-worker) changes and evolves the definition of a problem as a project progresses, and to me, this means that my solution is based on faulty assumptions, and work therefore has to start over, to ensure that my results are addressing the actual problem. Instead, reviewers often go about reviewing creative as if it is a set of checkboxes that can be unchecked independently of each other. This notion is often insulting to Creatives, who tend to see their solutions as too complex and specific for that – a set of dominoes laid out in a path, rather than a set of freely exchangeable lego pieces. Remove a piece in the laid-out path, and the chain is broken.

A reviewer may feel they are helping mould and sculpt the solution, whereas for a Creative, the solution is being bastardized and Frankensteined into something unrecognizable and less purposeful. The best way to proceed is actually therefore, somewhat counterintuitively, to go back to the beginning and start over. Personally, I always prefer that to being forced to mutilate something I have taken great care crafting.

Finally, it is exceedingly common for clients to think that creative egos require flattery, and to mistake that flattery for an expression of respect. And it is true that any Creative appreciates being recognized for their talent, but flattery really doesn’t work very well and is very often seen as insincere or manipulative, at least it appears that way to me. Creatives tend to only respect the opinions of other Creatives, and flattery – especially if directed at work the Creative is not happy with – will only serve to further undermine the respect felt for others. You don’t need to worry about your Creative feeling unappreciated; that will only happen if you actually tell or show them you don’t care for what they’re doing. If the work is good, a Creative will know it. And if there is a difference in opinion in regards to the quality of the work, you expressing a liking for something will not change a Creative’s mind – even if they may be willing to compromise.


Image Optimization 101

Introduction to Image Optimization here >

  • Photographic images (pixel based): should ALWAYS be progressive, optimized JPGs. Note: if the pixel proportions of the image are very large (in excess of 500px), consider ways of cropping the image and fading it to a solid background color. ALWAYS select to save JPGs as progressive – it means they load incrementally, as opposed to in one full download.
  • Flat color graphics: should ALWAYS be SVGs (vector based) where possible, and where this is not the case (if we don’t have access to vector assets, or if alpha transparency is required), use optimized (pixel based) PNGs. NEVER create a PNG from a previously compressed JPG, as the JPG compression will have caused dithering that will cause increased file size with PNGs (LZW compression).
  • Single color elements or gradients: should NEVER be image assets but defined in CSS. May POSSIBLY be done as SVGs if necessary.
  • Transparent/masked images: use very SPARINGLY, especially if photographic, since these have to be saved as PNGs with an alpha channel, which adds to the file size. If the proportions are very large, consider fading the image to transparent, or to a solid background color.
  • Optimization:
    • ALWAYS crop the image to the smallest size possible. If you know that parts of the image are going to fall outside the browser, or be masked by the size constraints of a div, crop the image first. 
    • If using a JPG, ALWAYS make sure to compress the image as much as you can, without suffering noticeable compression artifacts. Be especially wary of JPG compression with red images. If parts of the image can be blurred somewhat, this will help bring the file size down, since the lossy compression will “take” better. IDEALLY, do not compress an already compressed JPG, as the quality will suffer.
    • If using a PNG, ALWAYS use an adaptive palette with reduced color depth – NEVER full 24- or 32-bit color, since the file size will be prohibitively large. Also, NEVER apply dithering unless absolutely necessary, or where it can be used to subtly rasterize a gradient with fewer colors.
    • ALWAYS run image assets through an optimizer, like, or for instance, just to make sure compression is as efficient as possible, and all metadata has been stripped out.
  • Scaling: NEVER scale images up, and consider not scaling down either, but optimizing the files to the true size on the page. EXCEPTIONS: if the image is vector based, or if the same image is being used in multiple places. Then use the highest common denominator, and scale down where applicable. Don’t use the same higher-res images for retina resolution screens and for regular screens, but replace dynamically with  assets specific to each resolution.
  • Image sources: NEVER upload assets directly to your CMS that have been procured by a third party. First of all, as designers, we have to ensure that we are free from liability in case a proper image license has not been provided, and second, we cannot assume that third party representatives know exactly how the image will be used, so they may not be able to determine which file format and size would be most appropriate, and they also may not be sufficiently diligent in optimizing assets. ALWAYS run image assets by your Creative Team before using them.
  • Invalid image types: EPS, TIFF, BMP, PCT, AI, PDF, INDD (GIF may be permissible).
  • Glossary: 
    • Load time: the time required for a web browser to load an asset, given the Internet connection speed, data transfer latency and processor power.
      • 1 Mb of data takes approximately a second to load on a typical 5 Mbps connection
      • The same amount of data would take roughly the same amount of time to load on an average 4G LTE wireless connection
      • File size is not the only thing that determines load times however: there is also the consideration of external server calls, such as tracking pixels for instance, that require time to resolve.
    • Resolution: The pixel density of bitmap images, commonly expressed as dots-per-inch, or DPI. Screen images should always be 72dpi. Pixel density affects file size (see below).
    • File size: The file size of an image file is proportionately related to the data required to describe the image:
      • its pixel proportions (the number of pixels required to render the image)
      • its color depth (the number of colors any pixel can take)
      • the vector points (the number of vector reference points required to draw the bézier curves that make up a vector image)
      • the compression format (either non-lossy LZW, or lossy JPG compression)
    • Optimal file size: As a rule of thumb, images should ideally not exceed 500 Kb in size. On mobile devices, that size should be even smaller.
    • Pixel: the smallest visual rendering component on a computer screen; a rectangular block of one solid color. Pixel based images appear jagged when scaled up, since the pixel ratio and proportions are locked into the image file based on how it was created. They may also appear jagged when scaled down, depending on how many colors are used to render the image, and whether anti-aliasing is applied or not.
    • Vector: An image encoding technique which defines images as a series of (bézier) vector outlines, with or without fills, lines and colors. Vector images can scale freely without quality loss or file size gain, since the vector shapes are rendered in the browser as pixels based on the final, displayed proportions, not the proportions in which the image was created.
    • Anti-aliasing: a smoothing technique to make pixel-based images appear less jagged, and to render vector or polygon images into a pixel-based grid.
    • JPG: Joint Photographer’s Expert Group – a pixel based photo image format with lossy compression (meaning: if a JPG image is being repeatedly compressed, image quality will continuously become worse).
    • PNG: Portable Network Graphics – an image format which allows for the addition of alpha channel transparency. Compression is non-lossy, but color depth can be (irreversably) reduced with the attachment of a color palette specific to the image (fixed, partially adaptive, or fully adaptive).
    • SVG: Scalable Vector Graphics – a web-friendly vector based image format. SVGs are ideal for simple, flat color or simple gradient shapes, such as logotypes or stylized graphics.
    • EPS: Encapsulated Post Script – typically a vector image format, but pixel based images CAN be saved as EPS files.
    • TIFF: Tagged Image File Format – a pixel based image format not renderable in web browsers, but they can be converted to PNGs or JPGs.
    • BMP: Bitmap  – a pixel based image format not renderable in web browsers, but they can be converted to PNGs or JPGs.
    • PCT: Picture – a Mac based pixel image format not renderable in web browsers, but they can be converted to PNGs or JPGs.
    • AI: Adobe Illustrator – the file format native to the Adobe Illustrator app. AI files cannot be rendered as-is in a web browser, but they can be converted to SVGs, or rasterized and rendered as pixel-based images.
    • PDF: Portable Document Format – the document format native to Adobe Acrobat. PDF is not an image format per se, but images can be “printed” to a PDF document, and can be rendered in Photoshop.
    • INDD: InDesign Document – the document format native to Adobe Acrobat. INDD is not an image format and cannot be used in a web browser, and images included in INDD files are typically linked external assets.
    • GIF: Graphics Interchange Format – an older pixel based image format which is limited to 8 bit color rendering, but in return can be used to render simple animations in a web browser, the creation of which requires specific software. GIFs can be rendered with one color as transparent, which means transparent GIFs often look jagged (due to the lack of anti-aliasing).
    • 8-bit, 16-bit, 24-bit, 32-bit: this indicates the color depth of an image, meaning, how many colors are used to define the image. 8-bit means the image consists of 256 colors. 16-bit means the image consists of in excess of 16,000 colors, and 24- and 32-bit means an excess of 16M colors.

Your Brand Personalized

Dynamic Creative In User Experience Design

All design is inherently subjective.

How people perceive and are affected by design depends on who they are, what their circumstances look like and what their expectations are. Subjectivity applies not only to media and graphic design, but to art, fashion, architecture or any other form of visual expression.

We judge with our eyes. 

This is especially problematic in the world of user experience, which to a large extent revolves around functionality and usability. The usefulness of browser- and app-based experiences depends on how well they enable users to accomplish what they’re trying to do.

Accomplishing goals, on the other hand, also depends on how motivated users are. This adds an emotional dimension to this otherwise highly rational discipline. Structuring a website (or an app) so that the user merely understands how to use it is simply not sufficient. If the user does not want to use a website, the empirical knowledge of how to use it is largely inconsequential.

Therefore, content must be packaged in a way that the user is emotionally motivated to partake of it and here, design has an important role to play.

A survey conducted by Carleton University in Ottawa, published in the journal Behaviour and Information Technology, determined that users form their impressions of a website and its visual appeal within the first 1/20th of a second of visiting it. Even more surprisingly, these first impressions colored the entire experience of the site, whether or not the whole site actually turned out to match that initial perception. The conclusion of the survey was that this first impression was “unlikely to involve cognition” – meaning it is largely an emotional response.

However, presenting a differentiated audience with a unified, undifferentiated design – however well optimized – will not account for the variances in people’s preferences and goals. Such a design will never be entirely effective. Given that users are different and have different preferences and expectations, effective UX design has to be personalize-able. This is quickly becoming an expectation, if not the norm.

A recent study published by Salesforce found that 80% of users expect online experiences to be personalized and tailored to their needs. This means that brands simply cannot afford to broadcast the same uniform message to a single, undifferentiated audience. Marketers need to find ways of communicating to individuals, not audiences.

This posits a problem of scale.

Very few marketers or publishers of content can afford to employ armies of designers and content producers to tailor experiences to each individual user. More importantly, they cannot do so in real time.

Enter dynamic personalization.

By devising smartly constructed, modular design systems based on creative componentry that can be freely interchanged, it is possible to compose entire user experiences based on incoming media signals. These signals can reveal behavioral-, demographic- and psychographic details about each individual user, allowing the experience to programmatically flex and adjust to some of those factors.

This ensures a successful, results-oriented communicative solution that scales. In addition, it may even be able to predict favorable outcomes through the application of AI-technology such as machine learning. Done right, it will allow marketers to dial in the most effective combination of content and design with increasing accuracy. Testing naturally becomes a central element in such solutions, where a multitude of creative options can be fed into the learning engine. The ideal mix can thus be determined, assembled and verified as users arrive on site.

In Leapfrog’s own testing, we regularly demonstrate incremental conversion gains through dynamic, personalized experiences. Our knowledge of such marketing solutions affords us the ability to progressively segment our creative so as to truly achieve effectiveness at scale. This capability is enabled and enhanced by our proprietary LFX Platform, which continues to deliver exponential value for our clients.

The marriage between intelligent technology and insightful creative strategy opens up exciting possibilities for improved marketing performance – performance that has thus far largely been untapped. However, fully capitalizing on this opportunity requires a shift in how brands look at design and how brands go to market.

The era of the static, monolithic brand is over. Modern brands need to understand their audiences, find ways of communicating on a personal level, and truly become interactive.

Four Flavors of Estimation

As UX practitioners, we all get roped into estimation meetings from time to time. But not all estimation efforts are the same. There are basically four different kinds of estimation, they all have different purposes, and they require different responses from us:

  1. True Estimation:
    • What’s the ask? “Here’s exactly what we’re doing; how long does this take?”
    • What’s most important? Giving an accurate account of the work involved.
    • What’s really being estimated? Effort and resources.
    • What you should ask: What’s the scope? What are the tasks? What’s the timeline?
    • Recommendation: Ensure that scope and tasks are clearly defined before estimation begins. If scope is only broadly defined, go to #2. Estimate task by task and resource by resource. Pad each estimate to allow for meetings, reviews and edits, or estimate those activities separately, or delimitate the estimate by excluding those activities entirely.
  2. Scoping + Estimation:
    • What’s the ask? “What can we do for this client, and how long does that take?”
    • What’s most important? Making appropriate recommendations, and making the business case for them.
    • What’s really being estimated? A list of recommended activities, and typical estimates per activity and resource.
    • What you should ask: What’s the goal of this project? How do we deliver ROI?
    • Recommendation: Ask to do scoping separately and get Account Management to commit to a fixed set of activities, and then add up the typical hours per activity. Give each activity an estimate in a range of hours, based on a high level complexity assessment. If scoping is not in the cards, go to #3.
  3. Guesstimation:
    • What’s the ask? “Here’s roughly what we think we should do; how long does this take?” (a k a “How long is a piece of string?”)
    • What’s most important? Cost.
    • What’s really being estimated? Resources required, number of hours that can be allocated per day per resource, and the approximate calendar time required to get it done.
    • What you should ask: How specific does the guesstimate need to be? (If very specific, go to #1 or #2).
    • Recommendation: Ensure that the person asking for the guesstimate is aware that it will be very rough. Scope the effort in broad categories, and do not define specific deliverables. Put your estimate in a range, never a fixed set of hours. The less defined the categories are, the greater the range. Do not accept being challenged on the guesstimate – if the requester wants you to be more precise, they need to provide more detail, either by going to #1 or #2.
  4. Adjustimation:
    • What’s the ask? “Here’s how long we have; what can you do in that timeframe?”
    • What’s most important? Speed to market.
    • What’s really being estimated? The priority of the project, how many resources can be freed up, and the time available.
    • What you should ask: How important is this? What is the client expecting? What’s the MVP?
    • Recommendation: Judge, based on prioritization, the percentage of hours available per resource within the allotted timeframe, and sum up how many hours can be spent on the specific project.Then ask each resource to define what they can accomplish in that amount of time. Be clear about the timeframe – if the due date is pushed out, the adjustimate has to be bumped up, since team members will continue working. Do not accept being challenged on the adjustimate – if the requester wants you to be more precise about what can be accomplished, they need to allow more time, either by going to #1 or #2.

Also, see: The Project Calculator™ (requires Flash)