Design is as much an act of spacing as an act of marking. - Ellen Lupton
This week I have used my graphic design ability to look at how colour, typography and visual design has an impact on usability. This is something I do day to day but I have to adhere to brand guidelines that I don’t particularly like and that feel quite dated. Having been leading a website development project and implementing new branding and design this has been good for me to put my UX skills to use. As I have previously built websites I have a good understanding of this sort of thing and it really helps to be also doing app development at university while doing the similar things at work. I must spend around 16 hours a day doing UX at the moment.
I am however really tired at the moment and work and university are leaving little time for anything else, so I really need to have some down time in the next few weeks after this project is completed.
Visual design is about implementing text, colours and images in a way that enhances a design or interaction. As a field, it has grown out of both user interface (UI) design and graphic design.
The first and foremost goal of product design is to make interfaces usable – the user’s eye should be drawn to the correct information and functionality. To make it happen, visual designers prioritise content on a page through size, colour, the use of negative space and many more techniques. As soon as this goal is achieved, they can also introduce elements of delight into their app designs, such as animated effects of crisp illustrations that make the UI more attractive.
Visual design helps shape and improve user experience through imagery, colour, typography composition, all implemented with a strong understanding of visual perception and cultural context.
UX designers are not visual designers but every bit of visual design knowledge that you have, you can apply to your designs, and that will resultin a better user experience.
Design is not just making things pretty, it has to be effective and beautiful to solve the right problem and communicate the right message. Using visual design to create emotional resonance.
Visual design and usability
How an interface is structured, what it looks like and how it moves and flows all contribute to its usability.
As designers, we can harnessthe power of visual perception to make more effective compositions, more effective compositions equals better usability,which equals a better product which equals happier uses visual designtools for making a usable product.
Visual design tools for making a useable product
- Position – position uses the foundation of any good design a grid to create an engaging and interesting design. Gestalt Principles. Western English audiences read pages from top to bottom, left to right. So items that are placed in the upper left corner of the page are more likely to be read first. This is a UX pattern, quite often for a reason. So a logo in the upper left corner tells us immediately who owns this site. People tend to scan information in what are known as F or Z patterns. F is very much like reading a book, for Z patterns know that people will finish reading on the right and then scan down the page diagonally to the left to find the next piece of information until I hit something. And you can make either of these patterns happen based on how you position elements.
- Size – Size is a great way to draw users attention. Some of the reasons that you might want to direct users attention somewhere is for headlines, is for call to actionsand a thing that is important.
- Colour – colouring something differently can make it stand out. This can be helpful when you want to draw attention to something that’s interactive,like a button. Colour can also be a great way to focus attention on specific areas. you need to consider accessibility
- Typography – typography delivers information to your user, Make sure that your users can see it,they can decipher it, make sure that it’s not taxing and it’s easy to read.
- Imagery – you can use this to easily show who your target audience is or what you are trying to portray as a brand/product
The best designs evoke emotion, emotion is how people make decisions. This helps us create products that are at the top of the UX hierarchy that is products that are pleasurable to use.
- Unity & Harmony – harmony, unity and harmony has to do with all the elements on a page visually or conceptually appearing to belong together.
- Balance – Balance creates the perception that there is equal distribution. This does not always implythat there is symmetry.
- Hierarchy – hierarchy shows the differencein significance between items. Designers will often create hierarchiesthrough different font sizes, colours,different placements on the page and usually items at the top are perceivedas the most important.
- Scale and proportion – scale is the size of one object n relation to the other objects,and a design or an artwork and proportion is a relationship of twoor more elements in a composition and how they compare to one anotherwith respect to size, colour, quantity, degree setting, etc.. The golden ratio is alsoanother good example of this. When the ratio is used,you’re building a golden ratio design, meaning that your work respects the one to 1.618 proportion. Designers of all types agreethat following this principle typically leads to the most aesthetically pleasingresult, regardless of the subject.
- Dominance and emphasis – dominance focuses on having one element as the focal point and others being subordinate. This is often done through scaling and contrasting based on size,colour, position, shape, etc.
- Similarity and contrast – similarity refers to creating continuity throughout the design without direct duplication Similarity is used to make pieces work together over an interface and helps users learn the interface quicker. Contrast focuses on making items stand out by emphasising differences in again size, colour, direction and other characteristics.
Figure and ground organisation as a type of perceptual grouping that is a vital necessityfor recognising objects through vision use positive and negative space to create different, unrelated shapes.
Proximity – The law of proximity is the constant grouping law that states elements that are close togethertend to be perceived as a unified group. This is straightforward,and it means that items that are close to each other tends to be groupedtogether, where items further apart are less likely to be perceivedas being grouped together. use proximity in your designsto create relationship between elements on a page.
Common fate – this states that humans perceive visual elements that move in the same speed or same direction as parts of a single stimulus. The most common idea of this is a flock of birds, so you can use movement in your designs to create relationships between elements on a page as well.
Similarity – This is that the start grouping law that states the elements that are similar to each othertend to be perceived as a unified group. Similarity can refer to any number of features. For example,colour orientation size motion. So you can use similar shapes and colours and sizes again to create a relationship between elements on a page
Continuity – so the lure of continuity holds that points that are connected by straight or curving lines as seen in a way that follows the smoothest path rather than seeing separate lines and angles, lines are seen as belonging together. Once your eye begins to follow something,it will keep going in that direction until something stops it. So use continuity to create relationship between elements. This will allow your viewer to look where you want them to look.
Closure – the Keystone Law that statesif there’s a break in the object, we perceive the object is continuing in a smooth pattern.
An example of closure with text
I cnduo’t bvleiee taht I culod aulacIty uesdtannrd waht I was rdnaieg. Unisg the indeblire pweor of the hmuan mid, aocdcrnig to rseecrah at Cmabrigde Uinervtisy, it deno’t mttaer in waht oderr the Iterets in a wrod are, the olny irpoamtnt ting is taht the frsit and Isat Itteer be in the rhgit pelae.
The rset can be a taotl mses and you can sitll raed it whoutit a pboerlm. Tihs is bucseae the huamn mnid deos not raed ervey Itteer by istlef, but the wrod as a wlohe. Aaznmig, huh? Yaeh and I awlyas tghhuot slelinpg was ipmorantt! See if yuor fdreins can raed tihs too.
Colour is one of the most important parts of your website. Colour helps define how users perceive information. To add to the complexity of this issue, most of the judgements people make about your site’s colour schemes are subconscious. They may not provide any feedback about your site’s colour, but they are always thinking about it
If you are interested in adding and enhancing your use of colour in your layouts, a concrete knowledge of the theory behind colours and colour schemes is essential. It’s just one part, though. As experienced designers, we are responsible for many different elements. It is important to note we are not trying to become masters of visual design, but we must have a good working knowledge of it to be an effective members of a design team.
Colour can do a lot of things in your design. For example,it can reinforce things like brand message, It can aid in composition. It can guide action. For example, if we see a green button,we’re likely going to interpret that as a go or moving us forwardin the flow versus a red button, which might stop the flow or take us back. It can evoke a mood. So the design for light, happy or cheery should it be sophisticated and sombre colourcan achieve all of these things for us.
Design is 90% persuasion to describe the logicfor using a bright yellow background. That is, it communicates with optimism and warmth based on associations from 10,000 years of human culture will lead to approval. – Sean Adams – the designers dictionary of colour.
Colour can mean different things,depending on culture. Colour is very subjective. colour is personal users experiences can influence that feeling about colour. Colour is contextual It can take on the contextof the other elements that are around it.
Red is extreme it’s stimulating, it’s attention grabbing. It’s really good for conveying themes of intensity, aggression, danger, adrenaline or appetites. When we see red the pituitary gland releases adrenaline into the bloodstream, producing a quantifiable risein our blood pressure and an increase in pulse rateand respiration, all of which prepare the bodyfor the fight or flight survival response.
Blue – Cool colours lower the blood pressure.They lower your pulse rate,your body temperature, your respiration. They promote deeper breathing,and they lead to a reduction of stress and anxiety Interestingly,though, darker shades of blue are believed to cause peopleto feel sad and even depressed.
Be a little bit careful talking about psychological effectsof colour. A Great Resource is a recent book called The Secret Lives of Colour, in which the author talks about redbeing one of the only colours that has real, scientifically documented physiological effects. And she calls the rest mostly junk science.
Banks often use blue to relax customers and convey trust and security Blue can be a very good colourto sign up pages which require the users ease and trust before they hand over their personal details to a new company. But if the brand doesn’t have a blue in its colour palette, hey probably aren’t going to make a signup Page Blue just for that.
Green has strong connotations of nature. Green is very good for conveying themes of freshness, of health, sustainability, the environment. it’s associated with fertility and growth and is therefore used a lot in natural food restaurants and hospitals to evoke an impression of health. BP is infamous for attempting to brand itself as environmentally responsible despite its pollution
Yellow is warm and energising. It can be very good for conveying hemes of confidence and creativity and positivity. Often used by design related companies to convey creativity.
Black is bold and heavy and It’s perceived to carry weight,and therefore it’s good for conveying themes of authority,power, sophistication and wealth. You mightsee Black being used more recently in digital design to create dark or darkmode UI, a supplemental or toggle option for users, in contrast to a regular light or light mode UI. While a drastic colour change can certainly alter the visual and emotional impact. Dark UI can also have certain benefits,including reducing eye strain saving device battery power,improving accessibility
White is clean and neutral. perceived as being pure. It’s very good for conveying themes of cleanliness and simplicity, virtue, chastity, innocence, modernity.
Meaning is not finite. It’s all about context. Colour contributes to meaning green meaning go for example.
Colour theory and vocabulary
Hue – is the colour
Saturation is the intensity of the colour or the strength of colour, it’s expressed as the degree to which it differs from white.
Value – is how light or dark the colour is.
Tone – Tones are created by adding grey to a colour, making it duller than the original
Shades – are created by adding black to a colour, making it darker than the original,
Tints – are created by adding white to the colour, making it lighter than the original.
Colour modes
Different media have different ways of producing colours,printers use a combination. of cyan, magenta, yellow and black to produce other colours because mixing these colours subtracts light. Digital displays produce colours by mixing red, blue and greenlight together, which in equal measure and high intensity,creates white, which is why it’s called additive colour mixing.
RGB – Additive colour mixing
CMYK – Subtractive colour mixing
For the sake of understanding colour combinations, Primary colours red blue and yellow, secondary colours created by mixing two adjacent colours purple orange and green. The tertiary colours are createdby mixing adjacent primary and secondary colours.
Contrast high contrast is when colours easilystand apart from each other. Low contrast is when they don’t. Contrast is what is measured for accessibility compliance, Contrast is measured in a ratio 4.5 to one is the double a adherence to the guidelinesfor foreground to background text.
Colour combinations
colour combinations can be created by selecting colours from specific sections of the colour wheel.
Complimentary is high contrast. This is quite bad for text.
Analogous is harmonious and pleasing. It’s quite low on contrast.
Triadic is one primary colour with two accents. It can be high contrast
Split complementary. There’s less tension than complementary, and it has high contrast.
Tetradic or rectangular. This has many different possibilities. They are all high contrast.
Selecting colours
There are a few rules that you can use. Know your audience, analyse the competition, think psychologically and always be intentional. Good colour choices are easy to spot. But they can be surprisingly difficult to create from scratch. You don’t have to start from scratch. Pick a base colour and work from there. This is a very similar approach that we use in typography, when we need visual variety. And we don’t necessarily need a whole new typeface. We can use weights within a family to create a nice contrast as a similar idea with colour. It’s possible to start with a simple colour scheme and use tints. That’s adding whites to the colour and shades, adding black to the colour to add variety or depth to a design.
Primary plus base plus white approach, There’s one primary colour and onesecondary colour and a background colour.
Applying colour to UI
The 60, 30, 10 approach. when you’re picking colours they might look really great together as a bunch of tiny squares. But if we have to think abouthow to structure, colour and our digital designs and we have to be systematic about it to give each colour a role or a function, much like we do with typography similar to typography, we will also needto determine the hierarchy of our colours. choose three colours and use them in this ratio.
This isn’t the only approach,but it’s a very good one
Optimising your typography also optimises your user interface. In this lesson, we look at some rules and best practices to help you improve the readability and legibility of your text content. Typography is the convergence of art and language. This makes it hugely powerful as a tool and a means of expression. – Ellen Lupton
History of typeface
Most people agree that the creator of typography was a German man named Johannes Gutenberg, before Gutenberg came alongand revolutionised the world of communication booksneeded to be described by hand, usually by monks, which was very timeconsuming and expensive So Gutenberg created Black Letter,the first ever typeface modelled after the writing of the scraps Black Letter has thick vertical lines and thin horizontal connectors,which made it great for scribing but it looked very denseand squished together. When printed, something needed to change Enter Roman type, the first ever roman typeface was created in the 15th century by the Frenchman Nicolas Jensen who worked mainly in Venice,Italy, and was inspired by the lettering found on ancient Roman buildings. His letter forms were based on straightlines and regular curves. This made them very clear and legible compared to the densedarkness of black letter. This legible new typefacewas an instant success and quickly spread across Europe, ridingon the coattails of the Renaissance. The next major innovation in typographyafter Roman letters was italics,which are like slantedand stylised versions of Roman type. They were created in the late 15th century by Aldus Manutius from Italy as a way of fitting more letters onto the page and saving money. Now we use italicsinterspersed in Roman type for emphasis. He also created the modern comma and semicolon. In the 18th century in England William Carson created a typeface that set a new standard for legibility. Well, it wasn’t anything radical. It was just what the world was looking for. The style of Carson’s typeface is now referred to as old style. A few decades later, another Brit named John Baskerville created a new variety of typeface, which we call transitional. Later, still, a Frenchman named Didoand an Italian named Baldoni created typefaces that we have classifiedas modern. Most serif typefacesfit into one of these three categories, An old styletypeface has letters that have thick serifs and low contrast between thickand thin strokes. A transitional typefacehas letters with thinner serifs and a higher contrast between thick and thin strokes, and a modern typeface has letters with very thin serifs and extreme contrasts between thick and thin strokes.
William Carson’s great grandsonnamed William Castle got sick of all of these serifs,so he decided to remove them entirely and made a new kind of typeface called the sans serif. It didn’t catch on immediately,but would eventually get really big.
During the second Industrial Revolution, advertisingcreated a need for new typefaces. Letters were made taller and wider, mainly used in large sizeson posters and billboards. One happy result of all of this experimentation is Egyptian or slab serif. It has really thick serifs and is usually used for titles as a backlash to the complexity ound in typefaces of the 19th century. The early 20th century brought something simple Paul Rainer from Germany createda typeface called Futura, and it was based on simple geometric shapes. This is called the geometric sans. Around the same time a British man named EricGill created a typeface called Gill Sans that was similar to a geometric sansbut with gentler, more natural curves. And this is called the humanist sans. the next major step in the world of sansserif, as happened in Switzerland in 1957with the introduction of Helvetica. It has simple curves and is available in many different weights, and some would call it the world’s favourite typeface.
The world of typography changed foreverwith the introduction of the computer. There were a few difficult years of crude pixel type due to the primitive screen technology, but then technology evolved and computers began to allow for the creation of thousands of beautiful typefaces and the odd dud. (comic sans) But now anyone has the freedom to create their own unique typeface.
Language
Typeface – A collection of fonts in the same font family
Font – specific size and weight of the typeface
Serif – has embellishments
Sans serif – no embellishments
Display – anything expressive or with a lot of character
Weight – bold, thin, slim, regular etc can use for visual hierarchy. In CSS the weights are determined by weight value. 200, 300, 400 etc
People tend to use the terms Font and Typeface interchangeably. people in the industry sometimes do the same. A good habit to get into differentiating between a font and a typeface type used to be physical. Used to be made of metal. Capital letters were kept in a case above normal letters, which also led to the terms uppercase and lowercase. The typeface is a collection of fonts in the same font family, and a font is a specific size and weight of that typeface.
Typographic choicecan make a huge difference in expression and adds an extra layerof meaning on top of the words themselves. Companies use the expressive power of typography to express the personality of that brand and how they wantto be perceived as a company.
There are specific terms for the parts of typography:
Tracking is letter spacing.
Kerning the space between the letters.
X height is the general heightof all of the lowercase letters and Cap hight is obviously cap hight
The beauty of type lies in its utility. Prettiness without readability servesneither the author nor the reader. James Felici
When you’re tryingto choose your typography, prioritise based on these three things
Legibility – can use as read the letters
Readability – Can they scan your designor your content size?
Size – How does the size of the typeface fosterthis legibility and readability?
Display typefaces should be reserved for Headlines and titles as the readability can be poor in blocks on a screen. What you need to dois be able to establish contrast, emphasis and hierarchy. You can use these things to createdrama or tension. You can use them to provide visual restbetween groups of elements. And one of the more importantfunctions of space is to improve readability and legibility.
For print, the optimal point sizefor the body is ten to twelve. For digital, the optimal sizefor text is 14 to 16 pixels. You can go up from thisfor headlines and subheads. You can go down to ten for smaller items such as navigation, bar, text, footer, text, etc. just because some timetypefaces are numerically the same size, it doesn’t meanthey will optically appear the same size.
You have to see if the typeface as wellmade, you need to do some research know your typography classicsunless it’s a display type. Look for a typeface familywith a good amount of weights. Look for typefaces that have cleanletter forms that look good at large and small sizes and appear like they’re well-crafted. Creating typography is a really technicaland intense craft. There are people who make these typefaces. A lot of body type is made by people whodon’t care or weren’t trained properly so you need to look at the history of it and make sure its balanced etc
Think about how the typeface actually going to connect to your design Start with two typefaces per project. Use a family with multiple weightsand styles and go for contrast. Don’t combine typefacesthat look very similar. Gotham and Helveticaare too close together for example. and a visual hierarchythat you might try and use will be lost. Same with Georgia and Baskerville,Helvetica and Baskerville however,both have a lot of different weights to create really good hierarchy. Underlined text will cause confusion if not a hyperlink and centred text should only be used on 3 or so lines not large blocks. Line lengths should not be too long create columns as it makes it easier to read and scan.
Without reflection, we go blindly on our way, creating more unintended consequences, and failing to achieve anything useful.
-Margaret J. Wheatley
As a graphic designer I have gained valuable insights into the importance of visual design over the years, color theory, and typography too. Colour theory as an artist is one of the first things you learn when you study it. With graphic design you learn the color scheme and typography can influence the user’s perception and how they engage with whatever product you are designing for. In this case it is vital to choose a colour scheme that aligns with the app’s purpose and conveys the appropriate emotional tone. Additionally, typography can contribute to the overall look and feel of the app and impact the user’s experience so it needs to be clear, easy to read but also have a look and feel that aligns to the brand. Developing a name, logo and brand identity for the app has been this weeks task.
One of the main things I spent time doing was choosing a name for the app, I began by brainstorming several ideas. I also considered the significance of the name and its potential to align with the app’s mission and values. Through research and exploration of relevant keywords and themes, I ultimately settled on a name that reflected the app’s purpose while also being memorable and catchy. Eleos from the greek goddess for charity, as the app is aimed at female identifying people I thought it fit quite well. Along with a colour pallet which I will show below
Regarding charity research, I utilised a variety of resources, including online databases, news articles, and reports, to gather information on potential partners. I evaluated each charity based on its mission, impact, and transparency, ensuring that the selected organisations aligned with the app’s goals and values.
In terms of visual design, I learned more about the importance of colour theory and typography in creating a strong and effective brand identity for the app. I researched colour palettes and typography styles that reflected the app’s values and mission, aiming to create a design that was both visually appealing and easily recognisable. The use of visual design elements like colour and typography can either enhance or detract from the app’s user experience. After conducting research on colour theory and typography using my experience as a graphic designer , I carefully selected a colour scheme that represents the app’s charitable nature thinking about the female target audience while ensuring readability and accessibility. Additionally, I chose typography that is legible and conveys a sense of warmth and approachability.
In conclusion, the visual design of the app is essential in communicating the app’s purpose and values to the users. The use of colour theory and typography can significantly impact the app’s user experience and perception. Through careful consideration and research, I have successfully incorporated visual design elements that align with the app’s purpose and enhance the user experience.
In terms of self-criticism, I recognize the need to improve my research and decision-making skills, particularly in selecting appropriate design patterns and charities. I plan to address these challenges by seeking feedback from peers and experts in the field and continuing to educate myself on best practices and trends. I also recognize the need to be flexible and adaptable in response to changes in the market and user needs.
Overall, the development of the charitable app has been a valuable learning experience, providing me with a deeper understanding of the importance of research, design, and branding in creating a successful and impactful product.
In the future, I plan to continue exploring different visual design elements and techniques to improve overall user experience. Additionally, I will continue to conduct research on colour theory, typography, and other design patterns to ensure that designs remain relevant and effective in conveying the purpose and values to the users.
[~30 minutes]
- Take a look at your wireframes, and assess how you are using the six principles of design:
- Unity and Harmony
- Balance
- Hierarchy
- Scale and Proportion
- Dominance and Emphasis
- Similarity and Contrast
- Annotate your wireframes with your thoughts.
[~60 minutes]
- Duplicate your wireframe file or page – you don’t want to work over it!
- Pick three colours and apply them to your interface (use a tool like CoolorsLinks to an external site. to help you).
- Make a fresh artboard and note down your colours and how you are purposefully using them (see the ‘Applying to a UI’ slide in the lecture slides for Intro to Colour).
[~60 minutes]
- On that same duplicate file, pick two fonts (three if you must) and apply them to your interface (use a tool like Font PairLinks to an external site. to help you).
- On your fresh artboard you made for the colours, add your typography – note down your fonts and how you are purposefully using them (see ‘Rules of Thumb’ slide in the lecture slides for Intro to Typography).
- Kingston, C. (2020) ‘Key Principles of Visual Hierarchy in UX Design’ [online], Medium, 28 March. Available at: https://medium.com/thinking-design/key-principles-of-visual-hierarchy-in-ux-design-c17395949edLinks to an external site. [Accessed 2 April 2023]
- WebdesignerDepot (2015) ‘How eye scanning impacts visual hierarchy in UX design’ [online], Medium, 26 March. Available at: https://medium.com/@WebdesignerDepot/how-eye-scanning-impacts-visual-hierarchy-in-ux-design-5263fb88f2a3Links to an external site. [Accessed 2 April 2023]
- Lee, C. (2020) ‘6 visual design principles that UX designers should be aware of’ [online], UX Collective, 23 August. Available at: https://uxdesign.cc/6-visual-design-principles-that-ux-designers-should-be-aware-of-f609f9293703Links to an external site. [Accessed 2 April 2023]
- Gordon, K. (2020) ‘5 Principles of Visual Design in UX’ [online], Nielsen Norman Group, 1 March. Available at: https://www.nngroup.com/articles/principles-visual-design/Links to an external site. [Accessed 2 April 2023]
- Mesibov, M. (2015) How Visual Design Makes for Great UX [online], UX Booth, 17 November. Available at: https://www.uxbooth.com/articles/how-visual-design-makes-for-great-ux/Links to an external site. [Accessed 2 April 2023]
- Mall, K. (2020) colour psychology in UX, Medium [online], 6 December. Available at: https://medium.com/design-bootcamp/colour-psychology-in-ux-b371fde795d3Links to an external site. [Accessed 2 April 2023]
- Cugleman, B (2020) The Psychology of colour and Emotional Design [online]. Available at: https://www.uxbooth.com/articles/the-psychology-of-color-and-emotional-design/Links to an external site. [Accessed 2 April 2023]
- We Are Colourblind (2020). Available at: https://wearecolorblind.com/Links to an external site. [Accessed 2 April 2023]
- Zieliński, W. (2017) ‘How to use colors in UI Design’ [online blog], 23 January. Available at: https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753#.tjeyfoynrLinks to an external site. [Accessed 2 April 2023]
- Material Design (2020) Colour Theme Creation [online]. Available at: https://material.io/design/color/the-color-system.html#color-theme-creationLinks to an external site. [Accessed 2 April 2023]
- Tubik Studio (2017) ‘Typography in UI: Guide for Beginners’ [online], UX Planet, 4 August. Available at: https://uxplanet.org/typography-in-ui-guide-for-beginners-7ee9bdbc4833Links to an external site. [Accessed 2 April 2023]
- Zieliński, W. (2017) ‘How to use typography in UI Design’ [online blog], 5 January. Available at: https://blog.prototypr.io/how-to-use-typography-in-ui-design-ce045fa4ff2eLinks to an external site. [Accessed 2 April 2023]
- Sapio, D. (2015) 10 Principles for Typography in UI Design [online], UX Collective, 15 December. Available at: https://uxdesign.cc/10-principles-for-typography-usage-in-ui-design-a8f038f43ffdLinks to an external site. [Accessed 2 April 2023]
The Design thinking playbook
Lewrick, M., Link, P. and Leifer, L., 2018. The design thinking playbook. Hoboken, New Jersey: John Wiley & Sons, Inc.