UX Best Practices

Overview

Messaging

Deliver the right message to the right person at the right time.

Content

Use content to drive interaction.

User Interface

Ensure a smooth path to content and conversion.

Layout & User Flows

Optimize for conversion while facilitating research.

Mobile (part of Layout)

Enable technology-agnostic user experiences .

Look & Feel

Capture brand awareness while aligning with demographics.

Typography (part of Look & Feel)

Maximize clarity and impact while ensuring brand identity compliance.

Messaging + Content

Structure

A good site structure means it is purposeful, with subpages that drive user engagement. Page structure should present content in a convincing order that moves users to convert.

Messaging

Good messaging supports and drives to the desired response; product benefits and offer details are convincingly presented; a sense of urgency is instilled in users.

Research

A good research score means content drives engagement and facilitates research of products and offers; information is clear and RTB:s convincing; amount of copy well balanced.

CTAs

Good CTAs are strong and compelling; urgency is underlined; benefits of and reasons for taking action are emphasized, and drive action.

Diversity

A good score means content is rich and varied; many different forms of content drive engagement and highlight different aspects of the brand, the products and the offers.

Segmentation

A well segmented user experience has separate pages and/or separate sections devoted entirely to and tailored for specific audience segments.

User Interface

Navigation

Good navigation means menu is well designed and functional; navigation is straight-forward; paths to content are clear and confidence in navigation is high.

Iconography

Good iconography means icons are well designed and purposeful; they facilitate navigation and/or scanning of content; they clarify site structure and/or product offering.

Conversion Point

A good conversion point means the online form and/or offline click-to-call are very well designed and structured. Form adjusts to user needs (multi-step, expanding sections, etc).

Clarity

Good clarity means objectives of the page are very clear and page drives deliberate action to and through funnel. Conversion is simple and effortless.

Exit Links

An appropriate amount of exit links means 0-5 links on page or, if more, with visibility mitigated through design and UI, so as to not interfere with product research or conversion.

Features

A good score means page contains several useful interactive features that aid users in finding the right product and/or offer, and make the experience more purposeful.

Layout

Scannability

Good visual structure means the page is easily scannable for cues; typography and/or visual elements provide ample clarity on how to digest the content.

Use of Space

Good use of page real-estate means important content is given a maximized amount of space and the page mostly lacks gratuitous elements.

Placement

Good placement of content and functional elements means user paths are strong; page hierarchy is clear; all vital content is arranged at the top.

Separation of Content

A good score means enforced content integrity with strong visible demarcation; page grid is applied consistently; page elements contrast well..

Whitespace

Well balanced amounts of whitespace creates a clear visual structure with breathing room and purposeful visual emphasis that guides the eye.

Viewport Adaptation

Good utilization of the available viewport size means content and design applied with full responsive alignment; mobile and desktop dynamically served with same code.

Look-and-Feel

Brand Experience

Good brand experience means brand presence should be strong; adherence to brand identity should be consistent; brand recognition should be easy, and the brand experience should continue beyond the channel.

Aesthetics

Good aesthetics entail a modern/non-dated look-and-feel that is appropriate for the target audience; aesthetics should be consistent; visual impact should be distinctive and memorable and visual impression pleasing.

Typography

Good typography entails clear legibility and text hierarchies; purposeful text size; appropriate leading; sophisticated and consistent choice of fonts.

Imagery

Good imagery entails use of appropriate images of high quality; image compression should be effective and unnoticeable; appropriate size, cropping and composition, with purposeful treatments.

Use of Color

Good color usage means it supports the content and layout; colors match; the choice of colors elevates the experience; color facilitates scanning and reading.

Design Execution

Good quality of design execution means no visual flaws are apparent.

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?
    • 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)

Improving As A Designer

Designers mostly grow along a similar evolutionary curve:  starting out wanting to learn and get increasingly proficient with the tools at hand, building up their professionalism and gradually improving timeliness and efficiency, and then ultimately evolving into a role where they can apply their acquired skills in a bigger perspective.

The problem is, most of the early efficiency- and professionalism-related qualities are sort of at a price-of-admission level. If we’re playing Devil’s Advocate for a bit here, timeliness and efficiency are qualities that can be replicated just as well (and possibly more cost-effectively) through outsourcing, and so that is not enough for anyone as a professional to build on. What makes the most sense for an employer, in terms of maintaining creative capabilities in-house, is that designers add something beyond mere production capacity.

That something is knowledge.

As creatives, we need to become aggregators and keepers of knowledge and insights: insights that are accrued through experience specific to the company we work for, and their clients – insights that are to some degree proprietary, and could only be found there. That way, we present a value-add that justifies our involvement on a deeper level – a resource that is sought out and desired, and not just used for convenience.

Beyond timeliness and efficiency (which are mostly at a tactical level), having a better grasp of the chain of execution, and becoming better at tactical ideation, I would also recommend each individual designer to eventually move his/her development path to into areas of strategic relevance. Connecting creative solutions and ideas to business needs and insights about user behaviors, and expanding the production process to determine not just HOW things are done, but WHY they’re done that way, and how they SHOULD be done, given the business objectives of our clients, is what matters most.

Becoming an efficient and skilled designer is an objective that represents a good starting point. Already being efficient and pro-active in planning out work means an evolving designer would have room to expand his or her perspective and take on work with a broader, more strategic scope. As a designer starts to gain insights into how the output of the work is performing, it will become natural to start questioning and discussing those things at the outset of a project, rather than trying to figure out how to make things work when already knee-deep in it. And as one starts feeling more confident about being involved and active in a larger ideation context, the designer will be able to apply his or her ideas in ways that connect the dots, not just in terms of what works from a creative, communicative perspective, but what actually improves the bottom line results.

I strongly encourage each designer to embark on that journey – of asking why, not just asking how. I write this not necessarily for the purpose of designers climbing some kind of career ladder, but for the understanding of the “why” to inform the design, so that the work is and stays relevant, allowing each individual designer to become more than an efficient creative resource, but also a collaborator whose insights add value. Those are the types of team members who can never be replaced, and that is what a strong creative team needs.

That is the way I see the individual goals of a designer and the goals of a creative team coming together, and this is also how a team together can ensure that maintaining an in-house creative department makes sense for our employers in a business perspective. Because, ultimately, being efficient and timely, while admirable, is what’s expected of us, and that kind of capacity can unfortunately always be found at a lower price somewhere else. So, we need to add something more than that, something that the company cannot put a price on.

Figuring out what that “extra” thing is for each individual designer is what is going to be the most important going forward in their careers, beyond their current situation.

Best Practices, Says Who?

Sometimes, it seems no practice is more saturated with (mostly) well-intentioned tips, guidelines and dos-and-don’ts than UX. I’ve lost count of all the Top 10 lists on the subject I’ve read and already forgotten. Online media is overflowing with articles and blog posts (much like this one) that purport to objectively lay down the law of what is good and right in the realm of user experiences, even though UX people are usually the first to caution against generalizations and to acknowledge that all users are different.

However, once in a while, you stumble on a piece of writing that makes you think and take stock of what you know, or think you know, about UX. Those pieces are usually the most meaningful ones, not because they give you pre-packaged, wholesale “truths”, but because they force you to try and frame your own truth.

Here is such a piece: http://thehipperelement.com/post/128705195169/15-ux-commandments

To summarize, the blog post outlines 15 basic tenets of good UX:

  1. Only ask the questions to which you really need answers.
  2. Demonstrate uncertainty.
  3. Reconstruct your own previous errors of thought and elucidate to your colleagues and clients what factors lead to a changed mind.
  4. Do not let the terms with which you understand the world get in the way of understanding it.
  5. Give up any desire to be the smartest person in the room.
  6. Remember that people — including you — have bodies, and bodies require movement, sustenance, rest, and relief.
  7. Leave room for creativity.
  8. Preserve and sustain whatever delusions you’ve found necessary to behave in good faith.
  9. Do not be afraid to state the obvious.
  10. A socratic bully is still a bully.
  11. Thoroughly prepare, including making preparations to abandon your preparations entirely.
  12. Listen with your body.
  13. Suspect charisma.
  14. Conduct yourself in such a way that your colleagues can eventually forget that you exist.
  15. It never hurts to start with the basics.

I found this blog post to be very interesting, but to me, who’s been in marketing most of my professional life, it’s also quite provocative. It’s a bit if a challenge to apply these tenets to marketing and sales, which is more about persuasion than usability; more about making experiences seductive than rational. The blog post seems to dismiss this as immoral, and while I can see that point, I think it is a bit naive and simplistic, and represents the issue in a one-dimensional manner.

The most concrete way I run into the dichotomy between functionality and persuasion in my work is when people ask me to apply “industry best practices”. It’s clear to me that clients don’t necessarily mean the same thing by that as do UX practitioners. To clients, “best practices” means that which through testing has been proven to increase conversions, but to UX practitioners, “best practices” typically means that which empowers users to do what they need to do, and facilitates task completion, as can be proven out in usability studies.

These two interpretations need to be reconciled, because ultimately, the most basic premise of marketing is that you can affect a change in what consumers want and intend to do, and that consumers may not always be 100% sure about what that is beforehand. So, at the very least UX should, in a marketing context, strive to support that decision-making process. And whenever someone tries to aid someone else’s decisions, it would be foolish to think that such an outside influence would not inherently affect the outcome. Whether that influence is moral or immoral is defined by what the suggested outcome is, not by the mere act of influencing the decision. Obviously, suggesting a donation to charity is not immoral, but suggesting a purchase of a product produced with child labor is. Either way, I would argue that there is no such thing as a perfectly unbiased or unaffected choice. As human beings, our choices are never entirely free.

So, what constitutes a “best practice” in an interactive medium depends on what the desired outcome is, and who is asking the question.

So you’re going into business for yourself

Congratulations!

That is both exciting and empowering. It will be the most challenging thing you’ve ever attempted, but also the most rewarding. It will require lots of very hard work, but the good thing about working for yourself is, it won’t feel like work.

Have you thought about a name for your business? A logo? What you want your company to stand for, and which values you want to deliver for your clients? If not, here’s some friendly advice from one who has been there, done that.

As it relates to your new brand, three (3) things are more important than others:

1) Relevance,
2) Uniqueness and
3) Consistency

Relevance in that your brand story must ring true, and speak to the reason for you being in business; what your passion is and what you want to accomplish for your clients. This is your brand’s promise; why clients will be drawn to you and what they’ll remember you by, and it must imprint some of your values in their minds. Think of it as your “elevator pitch” ­ what you will tell people about yourself and your business if you only had 10­-15 seconds, and what kind of mental image you wish that story to leave behind.

Uniqueness because you’re not alone on the market; you have competitors for your clients’ business and you must seek to set yourself apart from them, while still keeping an eye on that relevance. Merely being different will do you no good if the way you are different is not relevant to your prospective clients. On the other hand, being relevant is equally meaningless if there are thousands of others who offer the exact same kind of relevance; that is after all what signifes a cliché. My experience is that many business owners instinctively tend to want to align themselves too closely with what they see as “the typical way of doing things” in their line of business. But what is typical is not unique and that pulls the rug out from under any marketing effort. If your value proposition is not unique, you have no advantage over the competition, and there is no compelling reason for a prospective client to choose you. Many new start­ups flounder that way.

Consistency because the way a brand is applied speaks to clarity of vision, professionalism, confidence and determination. A consistently applied brand also helps people remember you, recognize you and find you, which is especially important these days, when any service provider is but a Google search away. So, whether on a website, a letterhead, a business card, on Facebook or in a print ad, your name and brand must be consistent and facilitate recognition; much like medieval heraldry used to do on the battlefield. So, make sure your flag flies high, and stands out.

Hope that’s helpful. Good luck!

Closing The Loop

Responsive design as a convergent solution for fragmentation and abandonment in device-targeted marketing.

—

I N T R O D U C T I O N

Objective
The purpose of this post is to examine the principles of Responsive Design, determine how it aligns with current marketing strategies, and assess its usefulness from different vantage points, to better inform a decision of where and when to implement it.

Background

The evolved User Experience paradigm
Ever since the birth of digital media and the emergence of hypertext, there has been a continuous progress towards the divorce of content and design. Maintaining web pages where formatting and styling was tied to each individual piece of content, and pages consequently were littered with formatting code intermingled with content, quickly became impractical. Centralized content management solutions addressed some of these inconveniences, and through the paradigm shift informally referred to as “Web 2.0”, websites have increasingly become dynamic content rendering applications, rather than static content containers (like the products of traditional publishing). The content itself has long since been broken free of physical and technical restraints, and presentation code has been leveraged to make content increasingly dynamic, allowing for on-the-fly re-shaping and re-structuring of content, as dictated by both deliberate user interaction, server queries and varying, emerging content delivery methods.

The fragmentation of customized (static) User Experiences
A proliferation of different devices, with varying screen resolutions and rendering capabilities, has led to a situation where content distributed over the Internet can no longer be assumed to always appear the way it was intended if designed using traditional User Experience methods. Basically, this has introduced an element of uncertainty in content delivery that is virtually impossible to eliminate due to the sheer amount of variables involved, and the way these variables continue to multiply. Essentially, “one-size-fits-all” is no longer a viable approach (if it ever truly was), and experiences that make too many assumptions about how content is rendered will very likely lead to increased abandonment in lead generation and e-commerce, as users find content and functionality to be inadequately adapted to their circumstances. The emergence of touch screen devices has also compounded this fragmentation further, since it introduces a different (mouse-less) navigation paradigm to the mix, which leads to both limitations and new opportunities in terms of how content is assimilated.

So far, the need for dynamic and individualized content delivery has typically been addressed by serving up multiple unique but more or less manually tailored, customized experiences as determined by market segmentation, search linkage, automated device detection methods and/or user self-classification. For instance, e-commerce companies have commonly been accommodating shifting user needs by maintaining and presenting separate experiences for mobile and desktop users. With the recent emergence of tablet devices, this has led to the addition of yet another customized touchpoint, pointing to a fragmentation that is ongoing, and causing inflated development and maintenance costs. Furthermore, solutions have as a result become increasingly inflexible and inaccurate, requiring a growing amount of continuous adjustment, to ensure that experiences stay compatible, current and purposeful.

The Changing Digital Landscape
In short, the landscape of devices and ways of delivering content is growing and changing, and existing design solutions are increasingly found to be inadequate, given the many variables involved. To ensure that the “closed loop” of user segmented marketing remains closed, a demand has arisen for a solution that expands with and adapts to the changing needs. This demand is characterized first and foremost by a flexibility requirement, and Responsive Design has materialized as a solution to this requirement, being a method to solve for increasing fragmentation in the digital media landscape.

What does it mean?
At a very high level, Responsive Design is simply design that adapts to the device and the browser used to render the content. This adaption is done “on the fly”, as the content is rendered, subject to device and browser limitations – based on programmatically set dynamic guidelines, as opposed to individually customized designs (where content rendering would be predetermined and static).

Screen resolution and grid
In somewhat simplistic terms, all web design is based on a grid system, the width of which is determined based on available screen resolution. This grid is typically used to define columns that can be used to guide the placement of content. Columns can be either static (fixed), or fluid (flexible).

Websites have in the past typically been designed based on static columns . A static column does not change, meaning, if the available screen width for some reason is reduced (either as a result of user interaction with the browser, or as a native limitation set by the device), the columns still stay the same, and the user will simply see fewer, or a smaller portion, of them. A good way to think of this is to use the analogy of a printed page. Folding the paper in half doesn’t mean the layout changes, it just means you see half the page. To view the full width of the grid, and all the columns based on it, the user would have to scroll sideways – unfolding the paper as it were, to continue the print analogy. The width of a static grid is typically set based on assumptions of how the user will be viewing the site (smartphone, tablet in landscape or portrait mode, laptop with limited screen resolution, etc), and the available screen width. In the cases where those assumptions do not match reality (let’s say if a user accesses the site on a device with unusual screen resolution), the user experience can be compromised quite significantly.

A layout based on fluid columns, on the other hand, changes and adapts to the available screen width, scaling up or down as necessary, ensuring that all columns are always visible (unless the page has specifically been designed otherwise). Columns based on a fluid grid would typically expand and contract as needed, rearranging content based on allocated column width. Column widths may be adequate for the existing content at a certain screen width, but become inadequate as the screen width changes, and the column width contracts. Applying the earlier example of the printed page, a fluid grid would actually change when you folded the paper, and allow you to see the same content adjusted to half the paper size. While not exactly the same as responsive design, the fluid grid principle is a critical component of responsive design.

The upside of this grid fluidity is obviously increased flexibility, allowing the design adapt to the user’s needs. The downside is that the design becomes inconsistent and never renders the same, which can have negative consequences for brand consistency, and the continuity of the user experience. The fluidity also has significant impact on how design is carried out, and what tools can be used.

Responsive Design
Responsive Design, in a nutshell, is a flexible approach based on new programming methods that allow web pages to adjust according to the available screen resolution. This is done by breaking up the layout into “blocks” of content, where the content itself typically stays the same, but where the “blocks” may be re-arranged and re-sized to better fit and fill the screen. This adjustment follows predetermined layout rules set for approximate screen resolutions, which would take effect at certain defined “break points”, where it can be asserted that the layout would no longer be functional due to a change in available screen width, and therefore needs to change to fit the new conditions. By adding fluidity to the mix, column widths can also stretch or contract to fit the available width. This means that, ideally, content, design and functionality should always render in a way that looks more or less “right” for each specific device. This does not in itself mean that responsive experiences are necessarily better in all possible instances, or that they would automatically produce better conversion results, since conversion is not a consideration of Responsive Design. However, it does means that the worst possible consequences of device fragmentation can be mitigated, so that all users with some certainty can be guaranteed a functional experience. Most likely, this mitigation would result in reduced abandonment rates, as we have to assume that users who are served a less-than-functional experience would be more likely to drop off, and go elsewhere for their shopping needs.

Adaptive Design
Adaptive Design is basically a sub-set of Responsive Design, and the approach is quite similar. The difference is that while the layout can change as the screen size changes, just like in Responsive Design, content also scales to fit the available space, so the layout remains proportionately more consistent, even though the sizing changes. There are also options in Adaptive Design to programmatically swap out entire content elements or modules as required by the viewport. For the intents of this blog post, no distinction will be made between Adaptive and Responsive Design, as they essentially solve for the same problems, and the approach is not different enough to warrant differentiating between them in this context.

Future
The fragmentation and increased individualization that is evident in the evolution of digital media is unlikely to abate, as forms of content and interactive functionality continue to be made available to users in new formats and channels. Technological developments, both in hardware and software, will likely continue to blur the line between different classes of devices and software platforms – what users were viewing on a tablet yesterday may today be viewed on a TV, a refrigerator monitor or a dashboard-mounted touchscreen device. At the same time, users will continue to expect experiences to adapt to their changing circumstances and preferences, serving up content appropriate to their shifting needs. This will continue to put growing and accelerating demands on online marketers, service providers and retailers. Continuing the old approach of tailoring experiences to specific devices doubtlessly means fighting a losing battle, as the expanding number of variables on the client side have now made quality assurance, accounting for all rendering possibilities, incredibly challenging. Therefore, it would behoove these stakeholders to become less vested in device-specific or proprietary solutions, and instead opt for increased flexibility and agility, to be able to meet the shifting demands and requirements of the market.

—

A N A L Y S I S

Although it cannot at this point be credibly argued that Responsive Design alone would improve conversion when compared to customized, device-specific experiences, it is at least a safe assumption that responsive design can mitigate some potential negative effects of changing screen resolutions. Most likely, this mitigation will help reduce abandonment rates on landing pages, as this is where the greatest drop-off occurs, and also where lack of design flexibility would be felt the most.

There are also a slew of operational benefits to adopting a responsive approach, resulting from managing one code-base rather than several different ones (in fact, theoretically an open-ended number).

Pros

  • Standardization (no hacks or improvised solutions) Potentially lower cost in the long term
  • Logistical, practical benefits (one code base to maintain)
  • SEO benefits (no competing subdomains)
  • Counteracts the restrictions posed by Google, moving away from device-specific targeting go-to-market enhancements
  • Easier adjustments for new devices
  • Unified team structure
  • More efficient and consistent testing, QA and bug fixes

Cons

  • Homogenization (inherent restrictions on customizability)
  • Potentially higher initial cost and longer initial lead times
  • Potentially increased load times
  • Unclear process for managing multiple experiences with selective changes
  • Compromised brand and potentially also UX consistency
  • Poor accommodation of device-specific user behavior (since focus is on resolution rather than device and its behavioral connotations)
  • No proven effects on business results (aside from lower costs and potentially reduced abandonment rates)
  • Unclear effects on conversion rates

—

C O N C L U S I O N S

Why, where and how to apply Responsive Design

While there is perhaps no immediate urgency inherent in adopting Responsive Design from a business perspective, and there is no looming deadline in terms of technical compatibility, the responsive approach is a way to stave off further fragmentation and the resulting burden of maintaining a growing number of increasingly inadequate solutions. As such, the hurdle in adopting this approach and, conversely, the cost of not doing it, is not going to shrink – quite the opposite in fact. Responsive Design also addresses risk factors for abandonment, and these risk factors may already be putting a damper on lead generation, conversion and profitability. There is every reason to believe that this will continue, since there is really no device convergence trend to be expected. In this sense, Responsive Design means improving the probability of web experiences actually converting users, in the short and long term.This is not to say that Responsive Design automatically means optimizing experiences for all types of users and devices, but it is a framework within which such optimization can take place, while preventing unnecessary breakage in experiences not specifically targeted. So, while not analogous to optimization, Responsive Design is at least not antithetical to it, and can in fact facilitate it.

The best way to consider Responsive Design is to not think of it as an “either-or” proposition. Designing responsively does not necessarily preclude optimizing and tweaking experiences for specific devices, situations and users. Although Responsive Design is not always the tool with which such tweaking can or should be done, it doesn’t necessarily hinder that optimization.

Finally, given that device-specific targeting is being to some degree precluded by changes to how Google allows devices to be served in search, responsive is the intended path that Google is already expecting advertisers to take. Fighting this is highly unlikely to be a productive approach.

Design Value

I N T R O D U C T I O N
How does a digital agency evolve to the level where Creative (and design in particular) can fill a more prominent role in the value chain, where it becomes a more integrated strategic part of the agency’s service offering, and where design thinking can start to permeate the organization more broadly, instead of design being the somewhat siloed production discipline it is often perceived as?

A brand wanting to play within the agency paradigm, trying to deliver insights and actionable marketing advice to clients in digital channels, must develop a point of view on how the User Experience discipline (UX) integrates with the increasingly divergent consumer journey. UX, and design in particular, should be informing how the agency approaches that journey. Yet, on many agency org. charts, there is no specific mention of how UX would serve in this business context, and a UX Team often remains defined as a cross-functional production unit serving under layers of project management, without exposure to the larger, client-facing strategic framework.

If agencies want to change this, and capitalize on the true value of design, they need to rethink – or at least evolve – the role that Creative is playing. Many agencies go the route of organic growth, which yields results very slowly. To truly and efficiently grow the value of design requires conscious decisions in terms of organization, staffing and processes – business development being perhaps the most critical one.

T H E  V A L U E  O F  D E S I G N
So, exactly what is the real value of design?

A study compared publicly traded companies, using a scoring model to determine how design affected their stock market evaluation (presentation here). Companies judged to be especially design-centric (according to criteria outlined below) outperformed the S&P 500 at 225%, thus proving that design thinking really does affect market value.

How does your agency score? Check against the criteria of the study:

  • Publicly traded in the US for 10+ years: (Not necessarily applicable; this criteria exists just to enable a financial performance comparison)
  • Scale of design organization: is the use of design employed both within business units and centrally, with high degree of influence with the management team?
  • Investments in design: Are the appropriate investments made in staffing, facilities, tools, design research?
  • Design embedded in the organization: Is design visible in org charts, process charts, presentations etc? Does the corporation speak about design as a value at all?
  • Design represented at leadership level: Does design have a seat at the table where the most critical decisions about the agency’s future are made?
  • Commitment to design as a tool for innovation: Does design feature in discussions around how the agency can deliver increasing value to clients?

W H E R E  D E S I G N  M A T T E R S
How can we, as creatives, ensure that design matters?

As Creative Director, I want to deliver value for my employer through design. As a design strategist, I want to enable my agency to deliver value for our clients through design. To do this, the organization has to treat design as if it actually HAS value. We have to value design.

Most Creative Directors would probably agree that it is exceedingly difficult to elevate the value of design only through organic change, one project at a time. The organization and its processes have to support it (and most definitely not sabotage it, which actually does happen), and that requires change that goes beyond day-to-day and project-to-project activities.

How to do it?

Design in the organization

  • Roles related to design have to be defined at leadership level.
  • Clear mandates have to be issued to allow outcomes to be affected based on design considerations.
  • Staffing with the right resources, and the right number of resources (which should not be judged based solely on efficiency criteria and production capacity needs).

Design in the processes

  • Apply the design process consistently, across teams.
  • Avoid looking at design as a production discipline (headcount/hours/timelines/deliverables), and start looking to design for strategy and insights.
  • Apply design thinking in strategic work. Even if strategies themselves don’t encompass design, they should be visualized in ways that illustrate clarity of vision, and consistency with company core values.
  • Establish a true consumer-centric practice, supported by design processes. Consumers are not one and the same, and design is a vehicle to deliver the right message to the right person at the right time.
  • Stop defining design efforts just by deliverables and timelines. See design as an opportunity.
  • Allow, or even mandate, that design should take more time: For each concept presented to a client, produce three.  For every two projects coming through Account Management (which are often driven by reactive customer relationship thinking), allow one R&D project that is mandated and pitched from the design team.

Design in how the agency communicates what it does

  • Use design as a flag under which to “rally the troops”. Make sure the visual identity tells a compelling, relatable story that creates buy-in and pride in the brand, so that employees become advocates.
  • Let design take center stage in internal communication, to enforce its importance with employees, so this design-centric outlook colors how people think about the way they themselves communicate.
  • Build the brand identity on a visual system that allows for projection of the benefits of your processes and products.
  • Let design have a stake in external marketing, to ensure that the design focus is reflected externally.

Design in how the agency sells what it does

  • Ensure that design features prominently in capabilities presentations, as a way to ensure cohesion, and enforce that design is a facet of everything the agency does.
  • Ensure that all external presentations filters through the agency design practice.
  • Target the right clients and the right BD opportunities. If your future clients don’t prioritize design, your design capabilities won’t matter, and you won’t be able to add value.

Design Thinking

Design is not an output; it’s not Photoshop files, mocks, comps, graphics, vectors, pixels or pages – it is a thought process. A process that by its very nature makes the intangible tangible; that clarifies the abstract and visualizes the unseen. It’s a process that can therefore serve a bigger purpose, far outside the realm of creative.

This thought process means applying design thinking and design tools, activating the right brain to seek out solutions that have inherent visual structure and support – solutions that have visual componentry built into their DNA, making them not only tactically applicable, but strategically viable and valuable. This is especially true when it comes to strategy and innovation – practices that are notoriously hard to define and difficult to process, but where design can act as a very powerful catalyst, through visualization and prototyping.

Design patterns that support this type of thinking can be likened to LEGO bricks; integrated design system elements that facilitate visualization of and adherence to shared strategic frameworks. These frameworks can be intellectual and proprietary (i.e. part of a corporations R&D/intellectual property portfolio), just as much as they can be mere aesthetic commodities.

One example of such a pattern is brand identity, which (if successful) not only becomes a superficial veneer that standardizes design output, but, more importantly, serves as a conceptual foundation and visual vocabulary with which to both analyze, define, shape and express what the company does. In this sense, a brand identity is – or should be – a system of visual elements that lends itself to both developing strategy, as well as synthesizing and presenting it in a way that makes that strategy marketable. Such an identity has inherent longevity, in fact, it becomes more valuable with time, as it ties all strategic initiatives together into a cohesive whole, and should therefore never be discarded or dismantled lightly, especially not if viewed only as a set of simple aesthetic rules. Such a restrictive view would reveal a fundamental lack of understanding of the true value of a visual identity: its inherent flexibility and – thereby – applicability.

The full understanding of the applicability of brand identity, and hence the true, long-term value of it, most commonly resides with people who have strategic design training and experience. This is why corporations need to appoint design-savvy brand custodians at a management level, to protect the brand’s value from both neglect and erosion, as well as from wanton and ignorant destruction.

Ensuring such protection means the integrity of design thinking is preserved, so that the company can capitalize on it, enabling design to truly become part of the bottom line.

Unfolding the Fold

Marketers often get caught in antiquated paradigms, and apply print-era (or even broadcast era) reasoning to online marketing.

One example of this is the expression “above the fold”, which is originally a newspaper term, used to capture layout segmentation principles that suggest important content should go above where newsstands and readers typically folded huge, unwieldy newspapers in half. Making designers aware of the “fold” was, simply put, meant to ensure that the most important content would always be placed high up on the page so that it would be seen, and not rely on readers “unfolding” the newspaper to continue reading.

In web browser terms, back in the days when screen resolutions and viewports were much more uniform, and before mobile devices were used to render web pages, “the fold” used to refer to where the browser window would cut off content, and require scrolling.

But with an increasingly divergent proliferation of connected devices, with varying viewport sizes and screen resolutions, it is not meaningful to pretend that there is a universal measurement for where “the fold” actually is located. In the web development world in particular, objections to the concept of “the fold” occur with increasing frequency and ardor, asserting that a) the “fold” does not exist, and b) users are perfectly capable of scrolling. Both of which are perfectly accurate statements.

But even if the term “above the fold” is archaic, and incorrectly implies that there is a specific, consistent coordinate beyond which all users are less inclined to look (which there obviously isn’t), the objection often made that referring to the “fold” means you’re implying that users CAN’T scroll is tantamount to constructing a bit of a straw man.

This seems to be one of many areas where people in marketing/communication and usability/technology seem to not be able to understand each other. I don’t know that any marketer would suggest that users are physically unable to scroll, or intellectually incapable of understanding the concept of scrolling. But just because users CAN scroll (i.e., possess the empirical knowledge how to do it) does not mean they WILL. Any suggestion to the effect that “users will inevitably scroll down a page to see the remainder of the content” is just flat out incorrect, and there is plenty of data to prove it.

It’s our job as marketers/communicators to make scrolling worthwhile; to motivate users to partake of the content on the entire page. Otherwise, we will continue to see the same heatmap data that we always see – that content gets progressively less and less exposure the lower on a page it is placed.

We shouldn’t assume that our content is so inherently valuable to users that they will always scroll to read it.

User Experience Audit Model

  • A. LOOK & FEEL (scored 1-3 OR as an aggregate score 3-18)
    • Branding (scored 1-3)

      1. Brand presence is weak; brand identity adherence is poor; brand recognition is difficult and requires  prior awareness of the brand.
      2. Brand presence is average; brand identity adherence is fair; brand recognition is fair but does not build towards exposure in other channels or touchpoints.
      3. Brand presence is strong; brand identity adherence is very good; brand recognition is easy and continues brand experience beyond the channel. 

        BRAND PRESENCE: Can you, based on a cursory view of the experience, determine what the sender does, what sets them apart, what they stand for, how they are relevant to the customer?

        BRAND IDENTITY: Does the design align with brand standards and other brand touchpoints?
        BRAND RECOGNITION: If you cover up the logo, can you still recognize the brand, or at least the industry, or does the page appear generic and unspecific?

    • Aesthetics (scored 1-3)
      1. Look and feel is dated and/or inappropriate for target audience; aesthetics are not cohesive; visual impact is weak and visual impression is conflicted.
      2. Look and feel is neutral and/or not customized for target audience; aesthetics are average; visual impact is fair and visual impression is acceptable.
      3. Look and feel is modern and/or appropriate for target audience; aesthetics are consistent; visual impact is strong and visual impression is pleasing.
        VISUAL IMPACT: Does the overall design create a strong, distinctive, memorable impression?
        VISUAL IMPRESSION: Does the design make the sender appear professional and credible; is it likely that the target audience would view the sender favorably, without skepticism?
    • Typography (scored 1-3)
      1. Typography is poor; legibility is muddled; text hierarchies are unclear; text is too small; choice of fonts is questionable and/or inconsistent.
      2. Typography is fair; legibility is acceptable; text hierarchies are differentiated; text size is OK; choice of fonts is acceptable or at least consistent.
      3. Typography is good; legibility is good; text hierarchies are clear; text size is purposeful; choice of fonts is sophisticated and consistent.

        TEXT HIERARCHIES: Is typography used purposefully to create a structured appearance of the text, where it is clear how sections relate to each other, linearly and/or hierarchically?
        LEGIBILITY: Are characters, words, lines and sections sufficiently large, recognizable and distinguished from each other, but not so far separated or contrasted so as to cause confusion? Are line lengths appropriate (preferably no less than 20 chars and no more than 60 chars)? Are lines spaced apart enough to guide the eye along one line at a time, but not so much that the reader has trouble finding the next line? Are different weights (for instance: light, regular, bold, extra bold) being used to appropriately contrast with ordinary body copy?
        CHOICE OF FONTS: Is there an appropriate variety of fonts on the page so as to create clarity and contrast, but not so varied as to cause confusion and disharmony? Do headlines stand out sufficiently from body copy? Do fonts align with the brand identity? Do fonts render well, or do characters seem fuzzy, or bump up against each other?

    • Imagery (scored 1-3)
      1. Images are of poor quality and/or inappropriate; image compression is poor; size, cropping and composition is inadequate; treatments are questionable.
      2. Images are of decent quality and/or appropriate; image compression is fair; size, cropping and composition is adequate; treatments are acceptable.
      3. Images are of high quality and very appropriate; image compression is good; size, cropping and composition is good; treatments are purposeful.

        IMAGE SIZE: Are images able to render on the page without “crowding” it and compromising the layout? Does image size align with the purpose of the content, or is image size unrelated to the importance of the content piece it is representing?
        IMAGE CROPPING: Does the way the images are cropped create confusion or lack of clarity about what the image is meant to convey?
        IMAGE COMPOSITION: Does the way the images are composed and placed on the page draw attention to appropriate elements, or does it create a distraction? Does image composition create an appropriate emotional response?

        IMAGE TREATMENTS: Are effects and filters applied to the images, and if so, are these treatments aligned with the purpose of the page, and/or the brand identity, or do the treatments appear gratuitous?

    • Use of color (scored 1-3)
      1. Color usage is weak or overpowering; choice of colors is inappropriate; colors clash; color interferes with scanning and/or reading of the page.
      2. Color usage is fair and balanced; choice of colors is appropriate; colors do not clash; color does not interfere with scanning and/or reading of the page.
      3. Color usage is strong and supports the content and layout; colors match; choice of colors elevates the experience; color facilitates scanning and reading.

        COLOR USAGE: Are there a lot of colors on the page, and if so, do they all appear to be justified by the purpose of the page, or do they cause confusion? Are there very few colors on the page, and if so, are components of the page looking too similar? Could the page have benefited from more colors? Does there appear to be a system behind how colors are applied, or do they appear to have been applied randomly? Do the colors evoke an appropriate emotional response?

        CHOICE OF COLORS: Are color choices justified either by the brand identity, or by elements on the page being made more easily distinguishable and/or groupable by contextual similarity? Do colors contrast sufficiently to not cause uncertainty and vagueness, but not so much that it causes visual competition and conflict?

    • Design Execution (scored 1-3)
      1. Quality of design execution is lacking; visual errors or flaws are common.
      2. Quality of design execution is fair; visual errors or flaws are few.
      3. Quality of design execution is good; no visual flaws are apparent.
  • B. USABILITY (scored 1-3 OR as an aggregate score 3-18)
    • Navigation (scored 1-3)
      1. Menu is absent or poorly designed; navigation is complicated and/or confusing; paths to content are unclear and confidence in navigation is poor.
      2. Menu is acceptably designed; navigation is workable; paths to content are identifiable and confidence in navigation is fair.
      3. Menu is well designed and functional; navigation is straight-forward; paths to content are clear and confidence in navigation is high.

        PATHS TO CONTENT: Does navigation provide sufficient direction in how to structure and assimilate the content?
        Does navigation aid sufficiently in finding and selecting the various pieces of content?

        CONFIDENCE IN NAVIGATION: Is the navigation behaving consistently and predictably so as to instill confidence in the user that using the nav will have the desired results? Do navigation elements provide sufficient cues to guide the user in what to expect, and to confirm current position in the site structure?

    • Iconography (scored 1-3)
      1. Icons are absent or poorly designed, and hard to understand; icons cause more confusion than clarity.
      2. A few icons are utilized, are adequately designed and reasonably clear, but may be gratuitous and/or contributing to visual clutter.
      3. Icons are well designed and purposeful; facilitate navigation and/or scanning of content; clarify site structure and/or product offering,

        ICON DESIGN: Are icons designed in a manner consistent with the overall aesthetics of the brand and the site? Do they stand out sufficiently to aid in scanning the page, or do they create a visual distraction? Do they detract from the brand?

    • Conversion Point (scored 1-3)
      1. Online form and/or offline click-to-call are absent or poorly designed and structured. Errors break the form and/or the layout.
      2. Online form and/or offline click-to-call are present and fairly well designed and structured. Form functionality is robust.
      3. Online form and/or offline click-to-call are very well designed and structured. Form adjusts to user needs (multi-step, expanding sections, etc)
        FORM DESIGN: Is the purpose of the form clear? Does the form appear intimidating and complicated? Is the form appropriately sized, or is too much squeezed into too small of a footprint? Are form fields labeled clearly and intelligibly? Are required fields marked appropriately? Are form fields appropriately sized for the text that needs to go into them? Are buttons readily identifiable as such? Does the form gel with the rest of the page design?
        FORM STRUCTURE: Is the sequence of form fields logical, and does it guide the user through the process of filling out the form? Are the appropriate form elements used (i.e., checkboxes vs radio buttons vs drop-downs).
        FORM FUNCTIONALITY: Are form fields large enough to click or tap into? Can form fields be tabbed between sequentially? Are there floating labels to guide the user about intended form field usage, and if so, do these disappear when the field is filled out, and reappear if the field is cleared? Are drop-downs functional and easy to select? Is the appropriate entry pre-selected in the drop-down? Are buttons identifiable as such and easily clickable? Do appropriate form errors display when the user causes a form error? Does the appropriate keyboard appear on mobile when the user selects a field (numerical vs text)? Is there a confirmation when the form has been correctly filled out?
    • Clarity (scored 1-3)
      1. Objectives of the page are unclear and page lacks features to explain funnel process. Conversion is confusing.
      2. Objectives of the page are implied and page sustains movement to the funnel. Conversion is a somewhat cohesive experience.
      3. Objectives of the page are very clear and page drives deliberate action to and through funnel. Conversion is simple and effortless.
    • Exit Links (scored 1-3)
      1. 50+ links on page, fully exposed, likely impacting conversion and interaction metrics negatively.
      2. 6-50 links on page, fully or partially exposed, possibly impacting conversion and interaction metrics somewhat negatively.
      3. 0-5 links on page or, if more, with visibility mitigated through design so as to not interfere with product research or conversion.
    • Features (scored 1-3)
      1. Page lacks any interactive features that aid users in finding the right product and/or offer, or such features are entirely inadequate.
      2. Page contains one or two interactive features that aid users in finding the right product and/or offer, and make the experience somewhat more purposeful.
      3. Page contains several useful interactive features that aid users in finding the right product and/or offer, and make the experience more purposeful.
  • C. CONTENT (scored 1-3 OR as an aggregate score 3-18)
    • Structure (scored 1-3)
      1. Site structure is unintuitive; subpages seem arbitrary and/or poorly aligned with user needs. Page structure is inadequate and presents content poorly.
      2. Site structure is acceptable or nonexistent; subpages align with user needs. Page structure is fair and presents content in a logical order.
      3. Site structure is purposeful; subpages drive user engagement. Page structure is good and presents content in a convincing order that drives conversions.

        SITE STRUCTURE: Do individual subpages correspond to actual user needs of similar weight and importance, or does the selection of subpages seem random or confusing?
        PAGE STRUCTURE: Is content grouped in a way that would make sense to users, and are those groupings placed in a meaningful order that facilitates user research? Is content arranged leading with the most important information? Does high level overview lead to increasing levels of detailed information

    • Messaging (scored 1-3)
      1. Messaging conflicts with the desired response and/or is inconsistent; product benefits and offer details are unconvincing; no sense of urgency is created.
      2. Messaging aligns with the desired response and/or is somewhat consistent; product benefits and offer details are clear; urgency is not stressed.
      3. Messaging supports and drives to the desired response; product benefits and offer details are convincingly presented; a sense of urgency is instilled in users.
    • Research (scored 1-3)
      1. Content does not facilitate research of products and offers; information is muddled; no RTBs; amount of copy is excessive or entirely inadequate.
      2. Content allows for research of products and offers; information is somewhat clear; some RTBs exist; copy may require some editing, or fleshing out.
      3. Content drives engagement and facilitates research of products and offers; information is clear and RTB:s convincing; amount of copy well balanced.
    • CTAs (scored 1-3)
      1. CTAs are inadequate or missing altogether; urgency is not communicated; benefits of and reasons for taking action not clear.
      2. CTAs are adequate but not compelling; urgency somewhat lacking; benefits of and reasons for taking action described but not felt.
      3. CTAs are strong and compelling; urgency is underlined; benefits of and reasons for taking action are emphasized, and drive action.

        CTA ADEQUACY: Do CTAs reflect actual user needs, do they describe consequences and benefits of actions, are they specific rather than generic, and are they persuasive and emphasize urgency?

    • Diversity (scored 1-3)
      1. Content lacks diversity; mostly text, possibly supported by a few images. Pages quickly become monotonous.
      2. Content demonstrates some diversity; mostly text and images but with a few other content categories (video, testimonials, social proof, infographics, etc).
      3. Content is rich and varied; many different forms of content drive engagement and highlight different aspects of the brand. the products and the offers.
    • Segmentation (scored 1-3)
      1. No visible sign of content being tailored to different audience segments.
      2. Some light tailoring of content to align with multiple audience segments; content for multiple segments may exist side-by-side.
      3. Well segmented user experience with separate pages and/or separate sections devoted entirely to and tailored for specific audience segments.
  • D. PERFORMANCE (scored 1-3 OR as an aggregate score 3-18)
    • Conversion (scored 1-3)
      1. Conversion complicated and/or tedious; only possible on select pages; limited conversion options (i.e., form or phone only); limited call center hours.
      2. Conversion manageable, requiring reasonable effort; more than one con-version point; more than one conversion option (i.e., form and phone).
      3. Conversion simple and quick; persistent across pages; several conversion options (i.e., form, phone , chat, etc); generous service availability.
    • Post-Conversion Activity (scored 1-3)
      1. No confirmation of next steps; no Thank You page; no follow-up emails or call-backs; poor continuity of consumer experience.
      2. Next steps outlined; Thank You message exists; follow-up emails or call-backs may exist but are not executed well; fair consumer experience continuity.
      3. Next steps well defined; good Thank You page; prompt and courteous follow-up emails and call-backs ; strong consumer experience continuity.
    • Search Engine Marketing (scored 1-3)
      1. No use of site links; poor search ad copy, questionable or no keyword bidding.
      2. Some site links; adequate search ad copy, average keyword bidding.
      3. Good use of site links; strong and compelling search ad copy, competitive keyword bidding.
    • Targeting (scored 1-3)
      1. Unsophisticated or no targeting; no or poor experience alignment with audience/keywords/geo/ other; no messaging variability by segment.
      2. Somewhat sophisticated targeting; experience aligned with audience/keywords/geo/other; some messaging variability by segment.
      3. Sophisticated targeting; experience optimized for audience/keywords/geo/ other; messaging varies by segment; consumer modeling in place.
    • Channel Optimization (scored 1-3)
      1. Natural Search site only.
      2. Natural Search site + Paid Search site.
      3. Natural Search site + Paid Search site + DR optimized.
    • Direct Response Best Practices (scored 1-3)
      1. Site not optimized to Direct Response best practices; path to conversion unclear; CTAs weak; webform poor or nonexistent; no contact number.
      2. Site aligned with DR best practices; path to conversion clear; CTAs fair; form adequately structured and placed; contact number poorly visible.
      3. Site is driving DR best practices; path to conversion clear and compelling; CTAs strong; form well structured and placed; contact number highlighted.
  • E. TECHNOLOGY (scored 1-3 OR as an aggregate score 3-18)
    • Front-End Functionality (scored 1-3)
      1. Interactive functionality (Javascript/jQuery) is unreliable and of questionable purpose; functionality performs poorly and may throw browser errors.
      2. Interactive functionality is workable and mostly serves a purpose; functionality performs as expected and errors are rare.
      3. Interactive functionality is sophisticated and purposeful; functionality performs well without errors, and adds value to the page.
    • Cross-Browser Compatibility (scored 1-3)
      1. Pages render inconsistently and functionality performs differently across browsers. Some browsers may be entirely unsupported.
      2. Pages render somewhat consistently across browsers and functionality performs as expected, with slight variations.
      3. Pages render elegantly in a consistent manner, and functionality is yielding intended results regardless of browser.
    • Load Time (scored 1-3)
      1. Pages load slowly (5+ sec) and reload unnecessarily.
      2. Pages load within an acceptable timeframe (3-5 sec) and only reload when absolutely necessary.
      3. Pages load fast (3 sec or less) and components are implemented to load as needed, without the need to reload the entire page.
    • Cross-Device Operability (scored 1-3)
      1. Same experience is served for different devices, with different bandwidth constraints and viewports.
      2. Different experiences are served for different devices, although these are not optimized for the device type, or for bandwidth constraints.
      3. Different, device-optimized experiences are served for different devices and  page loads are balanced based on bandwidth.
    • Front-End Development Best Practices (scored 1-3)
      1. Development best practices are violated; efficacy is poor; code is convoluted and/or not commented; code does not validate to any applicable standards.
      2. Some development best practices are observed; efficacy is fair; structure is acceptable; code follows some or most standards but is not ideal.
      3. Development best practices are followed; efficacy is observed; code is light and easily readable; code is in line with and validates to current standards.
    • Technical Execution (scored 1-3)
      1. Quality of technical execution is lacking; errors are frequent; would require complete rework.
      2. Quality of technical execution is fair; errors are few, some rework would be recommended.
      3. Quality of technical execution is good; no errors are apparent; minor touch-ups may be desirable
  • F. LAYOUT (scored 1-3 OR as an aggregate score 3-18)
    • Scannability (scored 1-3)
      1. Visual structure is poor; page is difficult to scan for cues; typography and/or visual elements do not facilitate scanning.
      2. Visual structure is acceptable; page can be scanned for cues; typography and/or visual elements aid in identifying pieces of content.
      3. Visual structure is good; page is easily scannable for cues; typography and/or visual elements provide ample clarity on how to digest the content.

        VISUAL STRUCTURE: Are columns and sections defined in a way that creates visual cohesion where needed, and visual separation where needed, in order for users to assimilate the content? Is the scale of the content well adapted to the available space, or does the content create visual noise that is hard to penetrate? ? Are the most granular levels of content arranged into larger groups in a manner that facilitates consumption of content? Does the visual structure help guide the eye through the page towards the desired actions, or does the visual structure create “roadblocks”?

    • Use of Space (scored 1-3)
      1. Page real-estate is utilized poorly; important content is given insufficient space whereas gratuitous elements take up unnecessary space.
      2. Page real-estate is utilized acceptably; important content is given sufficient space whereas gratuitous elements are few and use limited space.
      3. Page real-estate is utilized very well; important content is given a maximized amount of space and the page mostly lacks gratuitous elements.
    • Placement (scored 1-3)
      1. Placement of content and functional elements is poor; no clear paths of interaction; page hierarchy is weak; a majority of content requires scrolling.
      2. Placement of content and functional elements is fair; user paths are recognizable; page hierarchy is acceptable; limited content below the fold.
      3. Placement of content and functional elements is good; user paths are strong page hierarchy is clear; all vital content is arranged at the top.

        PATHS OF INTERACTION: Are actionable elements placed together with content in a progressive order, in an either horizontal or vertical “path”, where content creates interest and drives towards increasing levels of decisiveness, so that interaction follows naturally from the consumption of content?

    • Separation of Content (scored 1-3)
      1. Content is mixed together with poor integrity and unclear visible demarcation; page grid is undefined or violated; page elements contrast poorly.
      2. Content integrity is preserved and visible demarcation is fair; adherence to page grid is fair; page elements are relatively easy to separate.
      3. Content integrity is good with strong visible demarcation; page grid is applied consistently; page elements contrast well.
    • Whitespace (scored 1-3)
      1. Lack of, or poorly/unevenly applied whitespace, creating a cluttered impression, or visual emphasis where it is not desired.
      2. Adequate amounts of whitespace, creating a fair visual structure with purposeful visual emphasis in some cases.
      3. Well balanced amounts of whitespace, creating a clear visual structure with breathing room and purposeful visual emphasis that guides the eye.
    • Viewport Adaptation (scored 1-3)
      1. Poor utilization of available viewport size; content and design applied without responsive considerations; identical page layout served for all viewports.
      2. Fair utilization of available viewport size; content and design applied with some responsive considerations; separate mobile experience.
      3. Good utilization of available viewport size; content and design applied with full responsive alignment; mobile and desktop dynamically served with same code.

        UTILIZATION OF VIEWPORT SIZE: Do the content and design elements scale and re-organize to fit the available screen real-estate, or do they appear to be inappropriately sized, or shoe-horned in?