Introducing design hierarchies – moving from design systems to designing systems.

I was reflecting recently on how the nature of the things I’ve worked on over the years has changed dramatically in scale.

Much of my early work focussed on designing digital interfaces, typically web pages in wireframe form, focussing on content and functionality and whether people understood what I was trying to communicate within them.

This work then changed to designing entire digital things like websites or web applications that enabled people to do specific things. They were far more complicated but interesting because I often found myself inventing new businesses, products and services that were allowing people to do things in ways that hadn’t been done before.

The work then changed again to start thinking about we could make it easier for people to do complex things like plan holidays or buy complex financial products that involved both digital and non-digital components. 

More recently my work has moved from helping to design and improve services to thinking about how complex systems like the healthcare system can be improved.

It struck me that over the years I’ve been moving up some sort of hierarchy, slowly zooming out from working on discrete things to hugely complex systems. 

I’m thinking about is as a ‘design hierarchy’ (after discovering ‘ecological hierarchies’ after seeing parallels with hierarchy of complexity within natural systems) and am picturing it like this:

An example of a design hierarchy showing how impact and complexity increases as the nature of what you are designing increases in scale.

Thinking about it in this way this could represent an extension of Brad Frost’s Atomic Design work that uses its own natural metaphor to frame work within its own hierarchy (atoms, molecules, organisms, templates, pages) that sits firmly at the bottom left of this diagram.

I’ve realised that we have been slowly zooming out, shifting our focus from ‘design systems’ to ‘designing systems’.

It’s interesting to note how each level of the hierarchy exists within the one above it. This idea resonated with me after seeing this quote recently from Eliel Saarinen:

“Always design a thing by considering it in its next larger context — a chair in a room, a room in a house, a house in an environment, an environment in a city plan.”

As you move up the design hierarchy, the things you work rapidly increase in complexity, scale and the number of people they impact upon. 

The nature of the problems you are working on change exponentially from ‘what’s the most effective label for this button?’ to ‘why aren’t people attending their GP appointments?’ and ‘how can our organisation become more customer focussed?’ 

As a designer this can be quite daunting, resulting in vertigo induced imposter syndrome and leaving you wondering how the hell you ended up working on this stuff and how to handle the sheer complexity and size of the problems within it!

I’ve found that wherever you are working on this design hierarchy the classic user centred design process still works brilliantly. Whatever you are working on, start with trying to learn as much about the problem as possible from the perspective of the user before you begin to identify, prototype and test potential solutions with them.

Core design competencies

In his wonderful book ‘Imagine If‘ Ken Robinson talks about the flaws within the educational system.

He argues that what students need from their education is to become proficient in some core competencies in order to prepare them for the economic, personal, cultural and social challenges they will face in their lives.

The competencies he identifies are curiosity, creativity, communication, collaboration, compassion, composure and citizenship.

Here’s how Ken breaks them down in his book :

Curiositythe ability to ask questions and explore how the world works

Creativitythe ability to generate new ideas and apply them in practice

Criticismthe ability to analyse information and ideas and to form reasoned arguments and judgements

Communicationthe ability to express thoughts and feelings clearly and confidently in a range of media and forms

Collaborationthe ability to work constructively with others

Compassionthe ability to empathise with others and to act accordingly

Composurethe ability to connect with the inner life of feeling and develop a sense of personal harmony and balance

Citizenshipthe ability to engage constructively with society and to participate in the processes that sustain it

I’ve often thought about what being a good designer actually means and I think that these competencies would be a brilliant framework to use to help work that out in practice.

When I think about the best people I’ve worked with I realised that it is these things that they’ve been really good at.

As a designer being good at the tools and methods is one thing but if you don’t have these competencies then you’ll struggle.

They aren’t just relevant to designers of course, but feel really useful to help us to recruit people, set objectives and design our own training and development.

I would wholeheartedly recommend Ken’s book, it covers many other fascinating and important subjects such as creativity, positivity, sustainability and systems thinking.

The get a feel for his work check out his TED talk on ‘Do schools kill creativity‘.

The ‘weight’ of insight

I want to acknowledge something I’ve experienced that definitely feels like a ‘thing’ when conducting research.

I’m thinking about is as a ‘weight of insight’.

Let me explain.

I’ve been doing lots of research recently with people who are living with some sort of mental health issue.

I’ve heard some incredibly harrowing and personal stories about their lived experiences of trying to get support from mental health services.

They’ve shared these altruistically in an effort to ensure that things that have happened to them don’t happen to other people in the future.

As a researcher you act as a messenger, carrying insights between service users and the people who have the power to make things better.

The weight of insight isn’t just about the amount of insights you’ve learned, it’s the pressure of wanting to do them justice, communicating them effectively so that they have the same impact upon your stakeholders as they had on you when you heard them for the first time.

‘Weight’ feels like an overly negative term but it definitely feels like something that you carry and this can come with a cost, particularly when you’re researching emotional topics such as mental health.

Ironically the empathy that makes you a good researcher and helped you to extract the insight in the first place can also be the thing that increases the impact of the insight upon you.

Sharing this weight really helps.

Conducting research in teams ensures that it’s a shared experience that both shares the knowledge and the weight of insights.

Conversations after research sessions to debrief and decompress are also a really simple and beneficial thing you can do that helps.

Another way of reducing this weight is to ensure that your stakeholders watch the research first hand so that they hear the insights from the source.

Remote research has made this easier than ever allowing stakeholders to participate from anywhere using tools they will probably already have access to.

Good safeguarding practices also help to reduce the weight of insight, ensuring that you preempt the impact of what you might learn and how you can protect the people involved.

Evaluate the effectiveness of your photos

Photos are the unsung heroes of effective communication.

If a picture paints a thousand words you need to be sure that they are painting the right words in the minds of the people who view them.

Particularly if those people are your potential customers.

I’ve been on a mission to improve the effectiveness of photos since I wrote ‘Usability of Web Photos‘ in 2016.

When writing the book I created an evaluation framework for people to use to evaluate the effectiveness of their own photos.

The framework is based on the theory of rhetoric, the art of effective and persuasive communication.

It is designed to help you work out if your photos are helping to elicit the response you intended them to from the people who view them.

You can use it like a heuristic evaluation or to help guide qualitative research sessions.

Here’s an example from UXMagazine where I use it to evaluate some holiday accommodation photos.

Best of luck with it and let me know how you get on via @chudders


Photo Evaluation Framework

1. Legibility and credibility

Can you clearly see the content of the photo? (e.g. Focus, size, composition, exposure, crop etc)

  • Focus : Are the important elements of the photo in focus? Does all of the photo need to be in focus to communicate its message?
  • Composition: Has the composition been used effectively to draw attention to the relevant part of the photo and to create an aesthetically pleasing image? Would the photo be more effective if it was cropped in a different way?
  • Exposure: Is the exposure appropriate and are the key subjects of the photo correctly exposed?
  • Quality: Is the photo legible enough to see the important details?
  • Size: Is the physical size of the photo appropriate? Does the size make the subject of the photo clear enough? 

Do the photos look credible? – (e.g.  Does they look professional? Do they suit the brand? Are they appropriate and relevant? 

  • Professionally shot: Do the photos look like they have been taken by a professional? Is this important given the context of what you are evaluating?
  • Brand alignment: Are they the kind of photos you would expect to see from this brand?
  • Appropriateness: Are the photos appropriate given the context within which they will be viewed? 
  • Believable: To what extent have the photos been manipulated? Does this affect the credibility of what they depict or the message they convey?
  • Relevance: is the photo relevant to the content that it accompanies?

2. What message/s do the photos communicate?

What does the business or product owner want the photo/s to communicate? e.g. ‘Look how spacious our hotel rooms are’

What messages should the photo/s communicate to meet user needs?  e.g. ‘I wonder if that hotel room is worth £150 per night?’

What messages do the photo/s actually communicate to users?  e.g. ‘That room looks tiny, it’s not worth £150 per night!’

3. Usefulness and effectiveness

Do the photo/s result in the desired emotional response? e.g. Is the photo funny? Does it make me want that thing? Does it have a calming effect? 

  • Desire: Does the photo represent something in an attractive way?
  • Aspiration: Does the photo communicate how a product may fit into someone’s life or help them to live the lifestyle they aspire to?
  • Aesthetics: Is it pleasing to look at?
  • Calm: Does the photo create a calming effect? 
  • Others’ emotions: Does the content of the photo result in a direct emotional response from the viewer (for example, are people in the photo smiling, frowning or angry)?
  • Entertainment: Is the photo funny? Is it intended to entertain the viewer?

Do the photo/s help the user with their task? e.g. Does the photo serve a purpose or is it really just ornamental? 

  • Useful: Does the photo serve a purpose or is it just ornamental?
  • Educational: Does the photo teach something or provoke thought about a subject in a different way?
  • Helpful: Does the photo help users with their tasks? Does it prevent them getting lost? Does it answer their questions or help them to make the right choice?
  • Instructional: Does the photo show someone how to do something?
  • Constructive: Does the photo help to mitigate a user anxiety? Does it answer a typical question or concern?
  • Prevent errors: Does the photo help users to avoid making mistakes?
  • Recognition over recall: Does the photo aid recognition to save people having to remember things?
  • Communicative: Does the photo communicate its intended message effectively? 
  • Global suitability: Will the photo mean the same in different countries or cultures? Might it offend people from other cultures?
  • Complexity: Does the photo effectively convey something that would be difficult to put into words?

Will the photo/s influence the behaviour of the user in the way you intended?  e.g. Does the photo have the desired effect it was designed to have? 

  • Gaze direction: Should the people in the photos be looking towards other elements on the page or is it more appropriate for them to be looking back at the user? Service related websites benefit from eye contact with users, whereas product sites may benefit from gaze being diverted towards specific offers or buy buttons.
  • Prompting an action: Is the photo designed to prompt action such as to donate to a worthy cause? Do the contents of the photo encourage this behaviour? Does the photo encourage users to buy or to make a decision?
  • Changing opinions: Will the photo help to change our point of view?
  • Creating desire: Does the photo make its contents (and thereby the site’s products and services) desirable?
  • Sharing with others: Will the photo encourage the sharing of content with others? 
  • Perception: Will the user attribute a particular quality to a brand having seen the image, such as quality, craftsmanship and heritage?
  • Message: Does the photo communicate the message to people that is intended?

More photo UX related goodness :