Stepping back from our design systems

Component led design has become very popular recently. Responsive design is complex and it is understandable why alternative approaches focusing on components have become more popular. To be clear, I am an advocate of design systems.

However, at the end of the day this method of working is primarily a method for solving difficult internal problems that we face in design, development and content management. The end users of our digital products do not recognise the atoms, elements and molecules with which our design systems operate. Sure the user can benefit from a greater sense of consistency, but lets be realistic, users will not consciously operate at the component level when we have spent the last 25 years talking about “webpages”. It is this difference in mindsets and the familiarity with our design systems that I want to talk about.

We are experts in our design systems
So we have conducted the component audit, built the style guide and identified every element in our atomic design approach.

Your collaborative approach with the client means that their content production team are equally well versed in the new design approach. After three months of working on the project you and your client recognise every atom, element and molecule that you have crafted. The project is going well.

My concern is that the longer we work on a website (either in its design or post launch) the more expert we become in it. We remember all of the previous design decisions we have taken. We recognise that “Input Field Atom” that actually makes up the “Email Sign Up Molecule”. We know the CMS inside out and how we can mix and match components to make our desired outcomes. Ultimately, we can look at a page and we can quickly tell exactly how it is built.

We have become experts in our design system.

The problem with becoming an expert in something is that you find it that much harder to empathise with a novice. To look at something for the first time and understand what you are seeing. Let me use an example from the 1970’s to explain what I mean.

Expertise in Chess
In 1973 two psychologists called William Chase and Herbert Simon were conducting research at Carnegie-Mellon University on Perception in Chess. Specifically they were exploring what it was that expert Chess players saw that novices didn’t.

In essence their experiment went as follows:

  • They had various types of chess player ranging from “master” to “novice”
  • Each participant in the study was shown a chess position for five seconds. They were then given a board and a set of pieces and asked to recreate the position they had just seen.
  • Participants were judged on their ability to get as many of the chess pieces in their correct positions.
  • Some of the positions shown to participants were taken from actual chess games whilst other positions were complete random presentations of pieces on the board.
A 2D representation of a chess board showing a traditional chess position

Figure 1: A position taken from an actual chess game

A 2D representation of a chess board showing pieces randomly placed

Figure 2: Chess pieces randomly placed on the board. This position is unlikely to occur in a real game

Chase and Simon took their results and compared the performance of “masters” with “novices”. What they found became one of the most famous studies in psychology around expertise and performance (this study is taught on most undergraduate psychology courses).

As you would expect, chess “masters” were better than “novices” at recalling positions. However this finding only applied for positions taken from real life games. When the results of the random board positions were compared between “masters” and “novices” there was little difference between the two groups in terms of memory recall.

Subsequent analysis showed that chess masters were able to use their extensive knowledge and memory of thousands of real world positions to effectively chunk up the chess boards they were shown in the study. For example, a castled king position is a very common position in chess involving a king and rook with three pawns in front of them (see figure below)

Two castled king positions side by side with one highlighted in its constituent components

Figure 3: What a “master” sees as one component a “novice” sees as five

It was proposed that chess “masters” would see the castled king position as one group whilst novices would see up to five pieces. The more expert a chess player then the greater likelihood of them recognising a configuration of pieces and being able to recall them easier.

Therefore, when the random chess positions were shown a masters expertise was effectively nullified as they were thrown back onto the resources of the short term memory, just like the novice group.

Stepping back from our expertise
Although not a direct comparison with the world of component based web design, I have thought about this famous psychology study several times in recent months and the impact that expertise has upon our perception of a configuration of components.

Specifically, expertise in our design systems means that we can recognise every component so quickly that of course the page looks good to us when we just to add a few more components. A type of “wood for the trees” syndrome can take effect.

Responsive design systems are by their very nature complex. However, we must never forget that a complex arrangement of components can appear simple to us because by our very nature we are experts in that system.

Put yourself in the shoes of the user, the “novice” in my analogy. They are seeing the board for the first time and they are not certain where all the pieces go or what they do. Maybe the board has been set up nicely for them but then again maybe its a horribly complex position that only a “master” could understand.

Component led design has many benefits to us as a community. But as I stated at the beginning, these benefits are primarily internal to our design, development and content processes.

As we embrace this more flexible yet potentially more complex way of working we must ensure that this added complexity does not shine through into our final configurations.

Our design teams and content producers (especially them!) must remember to take the time to step back and look at the bigger picture at the page level. As the diagram in figure 4 shows (and what I was getting in an earlier post from 2013), there are good and bad ways of combining elements to create either complexity or simplicity (taken from 101 Things I learnt in Architecture School).

12 rectangles are arranged in different configurations on the page. On the left they form a jumbled collective. On the right they are arranged to form the outline of three overlapping rectangles with the smaller ones visible inside. Thus the 12 shapes are reduced to the informed simplicity of three blocks.

Figure 4: Combining elements to make complex and simple shapes

Whilst component based design systems are providing us with a lot of value internally, we must ensure that our final external facing configuration of components is not random or complex but familiar and uncluttered. Only then can we ensure that we are giving our users a playable position to start from.


  1. Chase & Simon (1973). Perception in Chess
  2. Frederick (2007). 101 things I learnt in Architecture School

Thanks for reading!

If you enjoyed what you read then please do share it, I’m always appreciative of the support.  You can also follow me on Twitter here.

Candidate Moves in Design Thinking

It has been estimated that there are more positions in chess than there are atoms in our solar system. However, at any given time a player is only allowed to make a single move. A single move to enable them to navigate the minefield of complexity in front of them. How does a chess player do this? What implications can this have for design?

When scouring the 64 squares in front of them a chess player is not evaluating every possible move available to them, this would be insane. Instead, good chess players rely upon the principle of candidate moves.

Candidate moves are a collection of moves (usually around 3 or 4) that the chess player has determined to have a suitable level of merit to require a further focus of their attention.

A chess diagram showing a 2D image of a chess position with arrows drawn on to show piece movement

Your move, which path do you choose?

In his excellent book “How to choose a chess move”, Andrew Soltis notes that by move 20 of a chess game a player on average has 38 legal options available to them. Soltis goes on to demonstrate how a good chess player is able to reduce this large decision tree through the application of a method called candidate cues:

  • Tactics: Immediate threats on the board (both offensive and defensive) that must be dealt with;
  • General Principles: Sound principles of play, based on experience, will often indicate to a player a possible good move, for example protecting your king;
  • Positional Desirability: If no tactics present themselves then the strategic positioning of your forces for the long term can throw light onto a potential move;
  • Consistency: If previously you have been engaged in a specific plan then it makes sense to continue down that road (unless your latest assessment has identified a flaw in your plan)
  • Problem Pieces: If nothing else the player may survey their forces and realise that they have a “problem child” that must be improved or removed.

Thus through the application of rules, pattern recognition and experience, a chess player is able to control and harness an incredibly complex environment and determine a course of action.

Candidate Design Moves
Sound familiar? We may not identify such an obvious framework for tackling design problems but certainly the above principles are used daily by me and my colleagues for shortlisting potential design solutions.

In the current movement towards lean methods of working, designers will consistently find themselves under tighter timescales with development teams demanding “the answer” sooner rather than later.

Fast sketching, ideation and co-creation workshops are all popular and invaluable tools for iterating quickly and pushing forward design thinking around a particular topic. I’m sure many of us can relate to the idea of developing large amounts of design ideas in a short space of time with the intention of throwing away 80-90% of them.

Failing to candidate
What I find interesting about the candidate moves concept is how noticeable it is when it is not adopted. I have lost count of the number of chess games I have lost through the immediate impulse move. When looking back in hindsight, I nearly always can attribute the loss to a point in time when I say the immortal words:

I never considered anything else

The great Russian chess players often refer to this as the “programmed move”. How applicable is this flaw to our early design discussions, particularly when we consider the work context of a minimal viable product and a wall of half drawn sketches?

How often, through the need for expediency, are we drawn to the obvious candidate? The one that deals with all of the short term immediate problems but has some positional long term flaw? The move that worked in the last game so why shouldn’t it work in this one?

Don’t get me wrong, I’m a strong advocate for lean design working methods but my question would be this:

  • On your last project how many true candidate moves did you really consider?

Admittedly your design team could just “fail fast and pivot” but in my opinion, a strong set of candidates can allow you to spot potential pivots before they happen.

A strong candidate set
In a chess game, a strong set of candidate moves will often present a player with a range of paths. The risky move with high reward. The unknown move that has never been tried and leads to an uncertain result. The quiet move leading to strategic positioning. Any or all of these moves could be good.

The same is true of our early design discussions. Im not advocating the risky solution over the tried and tested. What I am advocating is the identification of a number of potential design directions and a fair assessment of each.

Every time I have seen a successful product launch it usually had a broad set of potential candidate moves early on in the product design phase.

In my opinion we all become become better designers when we avoid the “obvious choice” and consider all the paths available to us. Embrace your candidate moves and become better at what you do.

Thanks for reading!

If you enjoyed what you read then please do share it, I’m always appreciative of the support.  You can also follow me on Twitter here.

Maintaining the bigger picture in component led design

Design systems have recently been a major talking point in my office and the wider web industry. Whilst not an entirely new idea, the growth in interest in design systems carries a lot of merit and is a direct consequence, in my opinion, of the responsive design and content first movements.

One recent example of the design system way of thinking has been Brad Frost’s term Atomic Web Design. Brad identified five distinct levels in his atomic web design approach:

  • Atoms: Basic building blocks of our sites such as HTML tags;
  • Molecules: A combination of two atoms such as a form label, a field and a button forming a search box;
  • Organisms: Groups of molecules joined together to form a complex distinct part of an interface such as a product listing
  • Templates: These are concrete examples and groups of the above three items. They are typically where we start to see a design come together.
  • Pages: These are specific instances of templates and the most tangible to a user.

There is no doubting that thinking in a more granular / component based, system led approach rather than the “page” is excellent during the design phase of a website. Its excellent for the design team and the client to think in such a way as it enables a consistency of experience, optimisation of elements to be built (why have three carousels when one will do?) and a rationalisation of final templates.

My problem is the end user does not always think like this.

Wayfinding – Paths, Edges, Districts, Nodes and Landmarks

Since the dawn of the web we have called them “web pages” and told the public just as much. Even if as an industry we actually successfully managed to kill the page metaphor (“Kill the page” or “Content only, no navigation” have been two phrases I’ve seen banded around lately) people will still routinely attempt to locate themselves to a “place” within a digital product i.e. “Where am I?”.

The work of the architect Kevin Lynch in the 1950’s  identified a number of methods that people have evolved for navigating around cities. These are as follows:

  • Paths: These are the channels along which people move within the city. For example streets or footpaths.
  • Edges: These are boundaries between two places or regions. They help users group together general areas. For example, a large river bounding a park.
  • Districts: These are medium to large sections of a city. They will have recognisable character traits and be used as reference points.
  • Nodes: These are strategic points which are the focus of directions of travel. For example, crossings or two paths that converge.
  • Landmarks: This is a point of reference that a person cannot typically enter but can enable orientation because it can be seen from a distance. For example, a tall building or mountain.

My own experience has shown me that people routinely see themselves as being in a specific place and often adopt some of these wayfinding techniques to move around within a product or service.

Navigating the bigger picture
What i’m proposing is that particular design components (particularly at the “molecule” and “organism” level of Brad’s atomic distinctions) can be used by customers to orientate themselves within the website i.e. they can act as individual “paths”, “districts”, “nodes” or even “landmarks” in Kevin Lynch’s world.

However, when this happens customers are actually orienting themselves around these components within the context of the bigger picture i.e. the entire site. This is the reason why I feel we must be careful.

In my opinion, customers of a website will never think at the atomic / component levels that we as designers may operate. We may create incredibly flexible design systems featuring interlocking “atoms”, “molecules”, and “organisms” but it is still at the “page” level that we must ensure the site works for customers as this is the predominant metaphor in which they will be operating.

If we are too liberal or flexible in the application of our design systems then, in my opinion, we risk creating serious problems with wayfinding and orientation through homogenisation, repetition or misuse of elements.

Where lies the danger?

My concern with the design system approach is actually not during the design phase. My concern rests with post delivery when the client and subsequent teams of content authors inherit the new site.

Whilst the intelligent content management of a design system can utilise “atoms”, “molecules” and “organisms” to act as Lynch’s “paths”, “nodes” and “landmarks”; they can also be applied in such a ubiquitous and haphazard manner as to render them detrimental to the overall experience.

If a potential major strength of design systems is too aid digital wayfinding through consistency and orientation then, potentially, it is also one of their greatest weaknesses.

Therefore, my intent is to raise the concern that when creating our design systems we have to give serious thought to how and by whom they will be used after delivery.

Gestalt architecture

In writing this article I have found myself finding many parallels to architecture. The way that we design a building can have long lasting consequences for the way that it is inhabited. Both are essential life stages of the building.

Matthew Frederick (2007) wrote an excellent little book called 101 things I learned in Architecture School . I recommend every UX designer read it and absorb the parallels to our profession. One lesson in particular resonates with my point:

Create architectural richness through informed simplicity or an interaction of simples rather than through unnecessarily busy agglomerations.

Matthew goes on to provide some examples of unnecessary complexity in architecture, in particularly he states to avoid:

Agglomerating many unrelated elements without concern for their unity because they are interesting in themselves.

His accompanying diagram couldn’t resonate with this blog post more. Thank you for reading.

12 rectangles are arranged in different configurations on the page. On the left they form a jumbled collective. On the right they are arranged to form the outline of three overlapping rectangles with the smaller ones visible inside. Thus the 12 shapes are reduced to the informed simplicity of three blocks.

Three levels of knowing: Simplicity, Complexity and Informed Simplicity

Thanks for reading!

If you enjoyed what you read then please do share it, I’m always appreciative of the support.  You can also follow me on Twitter here.

When in doubt: Minimising uncertainty across a service

Doubt. We have all experienced it at some point or another. That nagging feeling about whether we should do something or not. Should we continue or just turn away, choosing another course of action.

In experience design we talk a lot about things like conversion rates, task failure, and the understanding of the customer. However, recently I have been thinking about the distinction between what we consider to be a genuine mistake (for example, a customer’s failure to see the big shiny call to action on the page) and the scenario where a customer has a complete understanding of the situation they are in, they just have a reluctance to proceed.

The wikipedia entry for Doubt states:

…Doubt brings into question some notion of a perceived “reality”, and may involve delaying or rejecting relevant action out of concerns for mistakes or faults of appropriateness.

It is the part about “may involve delaying or rejecting” that interests me. This would seem to imply a customer led conclusion (rightly or wrongly) that the action they are about to engage in will result in some negative consequence.

At this point I would like to make it clear that I am not talking about issues surrounding trust of an organisation per se. I am talking about doubts that a customer feels when they are unclear as to whether their current course of action will adversely affect them now or at some point in the future.

The formation of doubt across a service
Recently I have been thinking that many cross channel services have the potential to instil a higher level of doubt in users over the impact their actions are having across the entire service. Much has been written of the silo-like nature of many services whereby the design of customer touch points in Channel A are vastly different compared to Channel B. Recent examples I have seen include:

The big number on my letter says Account Number but the website is asking for a Customer Reference Number. I better ring them to check


When I looked online yesterday this item had 30% off but now i’m in-store its full price. Ill check on my phone…oh its a different website again…

Remember I am not talking about customer confusion or misunderstanding here (these topics warrant further blog posts themselves). I am talking about a customer having a clear idea of where they are in the system but being reluctant to proceed.

Seeking reassurance
So we find ourselves in a situation whereby a customer is aware of their location in our wider service but due to disparities between our channels they are experiencing a high level of doubt. What typically happens in this situation?

A channel shift. More specifically a shift to a channel that will provide us with a greater sense of reassurance. For example, moving from a “Top Tasks Only” mobile site to the main desktop. Or moving from a desktop to a call centre. Therefore the consequences of these moments of doubt are hitting services twofold:

  • Customers are typically switching to more expensive methods of engagement, for example call centres vs. digital channels;
  • Customers are delaying (or even discontinuing) their engagement with the service, thus adversely affecting conversion rates.

Designing to mitigate the formation of doubt
So how can we design in such way as to mitigate or eliminate the effect that these moments of doubt can have in a service? The discussion around the design of cross channel ecosystems is vast but for the benefits of this blog post lets frame a “moment of doubt” for a customer as follows:

I am in an emotional state because what I am doing is really important to me. Here I am about to proceed with Action X. However, I notice that there is a discrepancy that is jarring with what I know about the system. If I get this wrong, Bad Thing Y is bound to happen. I have alarm bells going off in my head! Should I proceed?

When thinking about doubt in this way, three factors immediately appear as having an effect:

  • Consistency: This will be a critical factor in the likelihood of a moment of doubt forming. Inconsistency across channels in terms of interaction design patterns, terminology and visuals will always set alarm bells off as they naturally imply a difference between what a customer has done before and what a customer is doing now. Differences subconsciously imply that I may be doing the wrong thing!;
  • Clarity of process: Am I aware of the next steps in the process with which I am engaged? Being aware of the bigger picture is critical to a customer when they are experiencing a moment of doubt. It enables a customer to better rationalise the potential consequences of proceeding. It enables a customer to start to ask themselves if their concern is a showstopper that absolutely requires clarification, a minor inconvenience or not a problem at all.
  • Feedback: If I have experienced a moment of doubt during my journey through the service, it is the application of well designed feedback that will alleviate my fears. Good feedback provides that reassurance that we are seeking whenever we feel unsure. Likewise the lack of good feedback is likely to result in an unnecessary channel shift as the customer seeks assurance that they have done the right thing (Avoidable Customer Contact to use the parlance of a call centre manager I have been working with).

My intention with this blog post has been to explore the idea that there maybe value in making a distinction between moments of confusion (“how do i do this?”) and moments of doubt (“I am uncertain whether to proceed”) within a service.

In my opinion, the successful mitigation of moments of doubt would require a holistic service view to be taken in order to identify the interplay between channels. Moments of doubt would appear to be highly contextual in nature as they are inherently made up of a customers wider fears about what it is that they are trying to do. Therefore, your customers doubts will likely be formed based on their perceived interplay of your entire service rather than just the channel they find themselves in at the time.

If this is the case then this leads me to question if most service providers have the level of cross channel understanding required to successfully mitigate these risks?

Somehow I doubt it.

Thanks for reading!

If you enjoyed what you read then please do share it, I’m always appreciative of the support.  You can also follow me on Twitter here.

Designing a service no one wants to use

Lets face it some kinds of services or products are not sexy and never will be. Completing your tax return, applying for a student loan, applying for benefits online. Sure they are important services that need to exist, but they will never be enjoyable for the people using them. No body ever woke up and said:

Today I am going to go online and fill out my tax return. Bring. It. On.

So as designers, what do we do when we find ourselves asked to improve the experience of such services? Our target audience does not want to engage with us, they find us annoying and bureaucratic. Our customers perceive us as a necessary evil to be completed as quickly as possible. For a while now I have been forming a way of thinking about how to approach the design of these, what I call, necessary evil services.

Value vs. Pain

Scott Jenson proposed a very succinct approach for thinking about experience that he calls the value vs. pain model. The simple model states that a user will use a product or service if the value obtained outweighs the pain of doing so. When designing necessary evil services it is easy to see how we minimise pain. The user experience design community has developed hundreds of tools and techniques for reducing pain in services and products.

But on the other side of Scott Jenson’s model is the elusive creature “value”. It could be argued that many necessary evil services have a high value to customers that will always out way the pain. How else could we explain the poor design that many Government and public sector experiences get away with ? Whilst this may be true wouldn’t it be nice if we could identify a method for adding experiential value beyond simply the successful completion of the service? What if customers completed their tax return and walked away with something extra?

Experience Realms

In their excellent book The Experience Economy (Seriously. Read it.), Pine and Gilmore (2011) proposed that an experience could engage a customer across a number of dimensions. Two particularly important dimensions proposed were:

  • Guest Participation: What is the level of participation that the customer has in the experience? Are they passive observers or active participants?
  • Connection: What connection unites customers to the experience? Is the customer’s attention engaged with the experience from a distance (absorption) or are they physically or virtually engaged as part of the experience itself (immersion).

By combining the dimensions of guest participation and connection then fundamentally four types of experiences can be defined.Four types of experience shown in a quadrant: entertainment, educational, esthetic, escapist

Pine and Gilmore’s Experience Realms from The Experience Economy (2011)

  • Entertainment: These are the kinds of experiences we are most familiar with as we passively absorb a stage performance, watch TV or listen to music;
  • Education: The customer is actively engaged in the experience in an effort to increase their knowledge. They are a form of interactive learner.
  • Escapist: These types of experience are much more immersive than traditional forms of entertainment, for example computer games or engaging in sports or gambling;
  • Esthetic: In an esthetic experience a customer is fully immersed in the experience but cannot have an effect upon it. For example, staring at a famous work of art or landscape, sitting in your favourite coffee shop reading. Essentially getting lost in the experience.

For a while now I have been interested by the combination of these experiential realms with the Value vs. Pain model. It seems to me that these experiential realms can be used to identify opportunities for designing on the “value” side of the fence.

Education as an experiential value add

Lets take the conversation back to designing necessary evil services. Typically audiences for these types of services are reluctant to engage and are desperate to finish quickly. Do they want to be entertained? Unlikely. If we try to design in such an element then we risk anger as much as engagement (believe me i’ve tried). Do they want to have an immersive experience whereby they simply “got lost in the moment with their tax return”? Weirdos! In my opinion there is only one viable option for adding experiential value in these types of scenarios: education.

How often have we seen services make, what appears to the end customer, crazy requests or non-sensical demands? How often does the flow of a website appear strange or repetitious? How often do services dictate obscure timescales with no rhyme nor reason for them (“Your application will be returned to you in 28 days”).

Often behind the scenes of these services there are genuine reasons for the design of the service being the way it is. For example, strict policy mandates, infrastructure limitations or inflexible legal requirements. Organisations expect customers of that service to understand all of these factors implicitly.

Customers of these types of services may not enjoy or want to use them, but in my experience they can obtain value by being educated in why things are the way they are. Where are the opportunities in your service or product that a customer can be educated about the situation with which they find themselves? Can you explain in more detail why it will take 28 days for their application to be returned? Can you explain why they are ineligible? Can you explain why they need to fill in more information as a result of their previous answers? Can you simply help them understand more about what it is in which they are engaged?

Incorporating sexy interactions or entertaining videos into your services may have an effect but when it comes to necessary evil services I have consistently seen the introduction of educational elements as having the greatest impact on the experience of the customer. Adopting an educational design perspective can:

  • orientate the customer and make them feel more in control
  • manage the customers expectations (after all you are the one setting them!)
  • empower the customer by making them feel more knowledgeable
  • aid the customers engagement with other touchpoints in the service

In my experience, designing educational opportunities into your service can be as big or small as you like. From deliberate structural changes to the flow of the system through to the simple addition of microcopy on website forms. I very much see the “educational value” as cumulative as a customer moves through the service.

The extent of this blog post has been framed around designing services that people don’t enjoy using. But looking beyond the design of nasty services for a moment, I am left intrigued by the simplicity of the experience realms and their potential to frame the positive, value adding, aspects of experiential design in general. Whilst as an industry we have numerous methods for identifying and reducing pain, many practitioners often struggle to frame the positive design directions that a product or service can be grounded in. So one final question from me would be this: What value can we as experience designers derive from this experiential framework?

Thanks for reading!

If you enjoyed what you read then please do share it, I’m always appreciative of the support.  You can also follow me on Twitter here.