Art Direction for the Web

1. Introduction : Hi, my name is Andy Clark and I'm an art director and a designer here at my studio, Stuff and nonsense. For 20 years, I've helped companies, big and small, charities like Greenpeace and WWF to improve their website and product designs. Now this is a course about art direction for the web and over the next hour, I'm going to teach you about our direction. I'm going to tell you what it means and why it matters. I'm going to explain who can do it and most importantly, how it applies to the web. Now, if you're an experienced art director or designer who works in print, this course will help you understand how to take your talent to the web. It's also for web designers and developers who want to understand art direction and how to make it work for digital products and websites. This course is also aimed at developers who want to learn the design principles that designers use every day, so they can apply them to sites on any platform. I'm going to teach you why art direction matters for the web, by learning from some of the most influential art directors from the past 60 years. Including Alexey Brodovitch and his influential work for Harper's Bazaar fashion magazine in the 1930s and 40s. Bia Filer who was one of Harper's first female art directors, and who cast the first black model to be featured on the cover of the mainstream fashion magazine. Not forgetting Neville Brody who rebelliously art directed the Face Fashion and Music Magazine in Britain in the 1980s. So you will learn, how your brand values can influence art direction. You'll learn how to decide on the principles which will guide your design. How persona's and user stories can help you create narratives and decide how you want people to feel. I'll teach you about where art direction can influence someone's experience when they're using a product or a Website, and where art direction can be most relevant and then, how to prepare to make what you design more effective through thoughtful art direction. To help me describe how to art-direct designs for products and websites, I've made Wheel Man, which is an app for booking a fast car and a getaway driver, plus a companion website which is chock full of advice on how to ensure you can get away clean. The wheel man website also tells readers about some of the infamous London criminals and gangs in the 1960s, and the murders and robberies and violence that they committed. I'd be happy if you learn from the Wheel Man examples, but I don't suggest that you follow in these criminals bloody footsteps. I've also written a book, coincidentally, it's called Art Direction for the Web, where I go into more detail on all of these topics. You can find out about that book at artdirectionfortheweb.com. I really want this course to be as enjoyable as it is informative. So join me on this art direction for the web course and find out more about this topic and more in my book. Are you ready? 2. Understanding Art Direction: In this episode of art direction for the web, I'm going to teach you what art direction means and why it matters by learning from some of the most influential art directors from the past 60 years and looking at some incredible examples from the web today. To start, we're going to study these two stories. They are an example of art directing a news article about the USDEA's longest running drug cartel case in two very different ways. These pages both contain the same written copy, many of the same photographs. One is from the Atlantic, where information is presented in an intentionally matter-of-fact manner to make your reader think that the Atlantic is balanced and reliable. The other comes from ProPublica. Here, illustrations convey violence, with an intensity that would have been difficult to stomach using photography. These illustrations make people feel tense and terrified and you know, that's okay. Readers should experience these emotions when they're reading about shoot-outs and melting drug dealers in asset. The process of evoking those feelings is called art direction. These stories were art directed with two very different goals in mind. The decisions that were taken when designing these articles depended on factors which I'll explore across this course. How might we define art direction? Well, one interpretation of mine is that direction uses design to intentionally evoke an emotional response from someone when they read an article. Well, they use a product, well they visit a website. Art direction has a long and fascinating history and many talented art directors made work that's not only stood the test of time, but it's also become iconic. I'm going to teach you about three art directors whose work inspires me every day. The first person I want to tell you about is Alexey Brodovitch who art directed Harper's Bazaar magazine from 1934 to 1958. So what can I say about someone who picked Pablo Picasso to win first place in a poster competition. Well, I'll tell you what, it's too much to squeeze into these few short minutes. Brodovitch was more than an art director. He was an artist and a really skillful photographer who took, amongst others, Diane Arbus and Richard avid Don. It's evident that it was Brodovitch's knowledge of photography that gave his work it's classic feel. Somehow he instinctively knew how to combine photographs with written content, often turning text into shapes that contrasted with or mirror the forms in his photography. Brodovitch's art direction for Harper's Bazaar, the fashion magazine has influenced designers ever since. I find his layout sketches to be the most informative because I often learn more about how someone thinks, by looking at their work in progress rather than just the finished result. Now, until recently, I wasn't aware of the name Bea Feitler, although her Rolling Stone cover which featured a photograph of a naked John Lennon wrapped around a fully clothed Yoko Ono, which was shot by Annie Leibovitz, is one of the most iconic magazine covers ever designed. In the early 1960s and was still only in her 20s Feitler was one of the publishing industry's youngest art directors. With her bold use of color, Feitler's work on Harper's, characterize the optimistic mood of the United States in that period. But it wasn't just the color she used on her pages, which was memorable. Because in 1965, she cast the first black model to be featured on the cover of a mainstream fashion magazine. Oh, and she also once kissed Andy Warhol in the mid 1980s. I was obsessed with music. So it was hard not to know about the Face Magazine. I knew there was something special about it. Although at the time I didn't know who Neville Brody was or even what an art director did. In case you don't know. The Face was a culture, fashion and music magazine which was published in Britain until 2004. And Brody worked as it's art director until 1986. Like punk, the face had a rebellious attitude to the establishment. Much of Brody's work was experimental. He once describe the face is a living laboratory where he could experiment and then have it published. His golden rule was to question everything. After the face, Brody worked on advertising and identity campaigns. He founded the Fuse interactive magazine and a font font typeface library. So what can someone who worked decades ago in the worlds of advertising and magazine art direction teach us about our thoroughly modern media. Well, designing experiences is more than just making something usable. It really pays to have a broad interest in art and design. It always pays to be bold, and it sometimes pays to be rebellious. Let's go back to the art direction of Devils, Deals and the DEA, the article from ProPublica. If I design a new story about a drug cartel, I need to lay out the facts of who, what, where, when, how, and why. I need to know who is involved, what occurred, where something happened, when the events took place, why what happened, happened like the Atlantic. I can state those facts in a manner that's well, matter-of-fact. But there's usually more to telling stories than just relaying facts. That's because when someone's reading about a Mexican drug lord, I want them to feel something. I want them to feel either calm or agitated, anxious, or terrified, encouraged, maybe obsessed. I asked myself how I want someone to feel before I start art directing every new design. Of course, terror wouldn't be appropriate if I'm writing advertising, marketing materials or maybe even product notifications. I'm not going to say your file didn't upload. You should be terrified. But drug barons are wicked. They do appalling things and they're out there. That's why when I'm directing their version of that previous story, ProPublica chose a more dramatic direction because they wanted people to feel appalled while they were reading it. That choice of illustrations helped stimulate those emotions. When ProPublica chose to use Ted McDonald's illustrations of chaos and violence and death. They changed readers from being interested towards being appalled. Whilst the Atlantic's approach was much more factual. ProPublica wanted to provoke a strong emotional reaction to their version. My old friend, Dan Mali explain that without art direction we're left with dry, sterile experiences are easily forgotten. Whether you're working on a product or a website. Maybe you're designing e-mail newsletters or login screens or notifications or even an onboarding process. If you're anything like me, the last thing you want people to feel is that your designs are dry and sterile and quickly forgotten. Art direction can prevent that from happening. These days, it's common for lots of different people with lots of different skills to work on the design of all those things. The difference between print media and the web is that art direction needn't be a separate consideration from normal activities. Just like accessibility and performance art direction should be part of everything that you do day-to-day. On the web art direction isn't just one person's job. Graphic designers or product designers or UX designers and web designers should all do art direction. General and product marketers can art direct too even a CEO can be an art director when they're concerned with how people feel while they're experiencing a business. Of course, art direction takes a good eye, but everyone can be taught. It takes practice. But no more than becoming an accomplished designer or developer. So do you need to convince your boss or your client is art direction should be something to take seriously. No, just do it. Bring art direction into what you design or develop every day and people are going to notice the difference. I hope that this episode of art direction for the web taught you about the importance of art direction. Now, be sure to watch all the videos in this course and find out more about this topic and more in my book. 3. Brand Values and Art Direction: In this episode, I'm going to teach you about how your organization's brand values can influence the art direction of your product or website. Some people still conflict branding within organisation's visual identity. They color palette, logo, tagline and typography, and perhaps its tone of voice. But branding is more than what people hear or see. It's about personality, purpose, and above all, about a relationship and organization has with other people. Now this isn't a course on branding. So what do I mean by brand values in the context of art direction, a good business of any kind depends on good relationships. In fact, Howard Schultz, who was twice the CEO of Starbucks, said that if people believe they share values where the company, they'll stay loyal with the brand. If you want to create lasting relationships with customers, you'll need to define your brand values clearly so people can feel an affinity with them. Many organizations start by basing their brand values on how they'd like to be perceived by their customers. They think of works like friendly, professional, reliable, and good value. But those words could apply to any business operating in the same sector. Now I know some shady people, but have you ever met someone who intentionally didn't want to be perceived as professional or trustworthy. Words like these, it becomes meaningless, is passionate about fish and chips or tax efficiency. Choosing these is your value is won't help to define you. You can trust me, I'm a professional. Now, plenty of well-known companies have clear brand values and these are different from company to company. For example, Adobe is genuine, exceptional, innovative, and involved. But I've struggled to see how those values are any different from any number of companies who make software and even some that don't. On the other hand, bill the bears values perfectly match the playfulness of that brand. They include diversity, collaborates and celebrate. Perhaps my current favorite set of values comes from Square space. They include be your own customer. Design isn't a luxury. Empower individuals and good work takes time. If you're the owner of wheel that an app on a website for a book in a fast car and he gets away driver, or would you want customers to say about your service? Now, don't overthink it. Instead, think about the three or four values. You want people to see a new organization for wheel man. They might be fast, that's quick and easy to use. Quick to get you away. Honest, because even criminals wants to know who they can trust. Reliable. No one wants to be left standing outside a bank, not with the salt off. Brand value should be clear and consistent throughout everything you do. But why should they be? Let's stick with Wellman and go with the knowledge. We know the best back road routes to escape down. That's named after the exam that every black cab driver in London must pass. Have courage to drive fast and get away clean, be adaptable. Because you never know what's around the next corner. Organizations brand values form that strategy for art direction. They help keep that strategy in mind when making decisions about design. How do those brown values translate into art direction for wheel man? Well, they should inform we'll man's messaging to customers about what the company does and why people should use them to get away. This is summed up in the straightforward tagline, gets away with it, which isn't to be confused with, gets away with us, which might be the tagline for a travel company. Value should also influenced the tone of voice of everything with all my rights, from the content of that website to the style of notifications and other micro copy in the app. Now, this is an ideal place for wheel man to show their very distinctive personality, including burner, email and said heist time, Wellman's brand values of knowledge, courage, and adaptability also influence the way they want people to feel when using their app or reading their website. They want them to be safe in the knowledge that Wellman drivers have the experience to get you to where you need to go. That's not jail they want people to feel reassured by their expertise, even though the word reassuring isn't mentioned explicitly. They want people to feel confident. Even if they don't say the word confidence. Both of these are implied an illustrated throughout everything that will man communicates and designs. Foundation styles, including a color palette, logo, and typography can also be influenced by brand values. Topography is particularly crucial for conveying the personality of a brand. Now people often say that typefaces have characters, but I prefer to think of them as having different voices. Every voice has its unique combination of tone and texture and Tambora images and how we display them also have an enormous impact on how people perceive our designs. Whether that be on a commercial, or an editorial website, or inside a product. So has whether you choose photography or illustration to bring your content and functionality to life. For example, on the Wellman website, I chose black and white photography for historical articles like this one about the notorious South London enforcer, mad Frankie Fraser or about this, about Amy Johnson, who was the first woman to fly solo from the UK to Australia. Her astonishing story deserves telling in a way which is as exciting as her long journey. Now I chose color photography for current-day content, including this Mini Cooper and these suitcases, both of which you'll need if you want to get away after a robbery, successfully translating brand values into art direction is essential for ensuring that any product or website reflects the organization who makes it. Have you defined brand values for your organization if you haven't spent some time before the next episode considering what you want your customers to say about your organization, product or service, and how you'd like them to feel about it. I hope that this episode of art direction for the web taught you the part that brand values can play an art direction. Be sure to watch all the videos in this talk. You can find out more about this topic and more in my book. 4. Deciding Your Design Principles: Welcome back. In this episode, I'm going to teach you about how to define your organization's design principles and how these can influence the art direction of your product and website. Now, a creative brief should tell you about the goals of an individual design project. But design principles are invaluable tools to help you maintain a consistent brand experience across products and websites. The process of deciding these principles can also be extraordinarily rewarding. It brings people from across an organization together and helps develop a shared understanding plus ways to judge whether a design reflects your organization's brand, goals and values. A few years ago, the owners of Smashing Magazine asked me to help them during the concept phase of their new website design. Redesigning a famous brand, particularly one which is so well known to its audience, is not a job I undertake lightly. After several weeks of workshops and dozens of design iterations, I delivered a set of concept designs and some ideas and prototypes, so that the Smashing Magazine team could communicate what they needed from a new designer a lot more clearly. Here are two of my concept designs for Smashing magazine. Then armed with my concepts, the Smashing team turned to Danmore and asked him for fully-fledged designs which felt right for Smashing Magazines, distinctive personality and their unique positioning. The team used words like community, quirky, and vibrant to describe their brand and wanted designs which were, in their words, turned up to 11. Clarifying what words like vibrant mean visually is something Dan does exceptionally well. To ensure everyone shared a common understanding, he created a page chock full of visual examples of those design principles. To use Dan's words, "The Smashing community is a vibrant one, so let's have a color palette that feels vibrant. Let's use bright reds and oranges and blues and then darker tones to offset them." Dan playfully represented this by giving rounded elements or radius of precisely 11 pixels. If you haven't spotted it already, he rotated their avatars and other features by precisely 11 degrees. These discussions around design principles help Dan to create a design that's distinctively Smashing Magazine. He applied their signature orange liberally, and he chose to typefaces, one for readability and the other for its quirky letter forms. The Smashing Magazine team also wanted to emphasize how their communities and content have dimensions, breadth, and depth. Dan lifted the design by introducing three-dimensional elements, for light sources and shadows. Whereas similar sites display small avatars of their authors, Dan chose to emphasize the people behind Smashing Magazine's content by using large photographs which he placed above, not below their writing. So is Dan's designed for Smashing magazine quirky? Hell, yes. Is it vibrant? Absolutely. Many well-known companies have now made their design principles available for us to learn from. Just like brand values, these principles are different from company to company. For example, Google's mission is to organize the world's information and make it universally accessible and useful. Their 10 things we know to be true includes; focus on the user and all else will follow. Fast is better than slow. You can make money without doing evil. The UK Government, Digital Services principles are intended for people building digital services for the gov.uk domain. They include build for inclusion, design with data, and do the hard work to make it simple. Now if you're the owner of Wheelman, what principles would you want to guide the continued design of the app and website? When I was designing Wheelman the single word principles I kept in mind, we're bold, fearless, and timely. The form your design principles take will depend on how much you want to clarify the meaning of your words. You might, as I did, just use a single word like fearless or you might expand that one word into a phrase to provide a little more clarity like make bold choices which get the job done. Don't be afraid to make tough decisions for our customers. Give people only what they need when they need it. You might also bring these formats together like this. So fearless. Don't be afraid to make tough decisions for our customers. Be careful though, don't use too many words as this can sometimes dilute the principle and it can increase confusion depending on your mix of design principles, it's not always going to be possible to address every principle. But even single principles can be an excellent tool for judging whether a design reflects your organization's brand, goals and values. Which one of these Wheelman designs best demonstrates my boldness principle. Boldness needn't mainly be about prominent colors or boldness in typography. It can also be represented through your choice of layout and layout which breaks with the convention of a full width jumbotron banner and uses a full high image instead, would also be a bold choice. Changing the typical style of inner navigation to both reflect the Wheelman brand and improve usability on small screens would also be a bold move. Of course, principles like bold, fearless, and timely won't be relevant for every organization. So you should spend some time before the next episode considering the best principles to guide your designs. Now, don't do this alone, because often the collaborative process of deciding on your organization's design principles can be just as valuable as the principles themselves. Design principle should influence the art direction, design, and development of every aspect of a product or website. That can only happen when designers and developers keep them in mind. I found that the best way to ensure that everyone involved with a design keeps design principles in mind, is to turn them into items like posters or postcards, which I keep on the wall of my studio and in the client's office. This is something that government digital services did really successfully and their posters make it obvious that in a field like ours, we can make tools as creative as our work. Now I hope that this episode of art direction for the web taught you the part that design principles can play in art direction. Be sure to watch all the videos in this course and find out more about this topic and more in my book. 5. Creating Audience Personas and User Stories: Welcome back. In this episode, I'm going to teach you about audience personas and user stories and how they can influence the art direction of your product or website. Now first, a quick overview for anyone who's new to writing personas or user stories. If you are a user experience designer, don't skip this episode. You'll no doubt already know about audience personas and user stories. But how do they relate to art direction? Plus my take on personas and stories is probably going to be quite different to yours. In marketing and in UX, we generally think about two kinds of personas, a buyer persona and a user persona. I'll begin by listing some facts about my first persona. I want you to meet Reggie. He's 35 and married. He's a former boxer and a nightclub owner, and he lives in Hoxton in East London. Now as well as a table, I can add a short biography which describes Reggie in more detail. I might say, Reggie is the co-owner of Esmeralda's Barn nightclub in Knightsbridge in London. He's several other diverse business interests, including a bodyguard and protection firm for Hollywood stars, including Frank Sinatra. Buyers are people you're selling to. Who you want to convince to buy your product or service, and you want to make it easy for them to part with their money. These are also often called marketing personas. A user persona is someone who consumes or uses the product or service you make. If you work in editorial or news, they can also be people who read your content. If personas can be mostly fictional, although they should be based on knowledge of real people who use your product or website. You might get this knowledge by watching people use it or by interviewing them. Next, I add more information about Reggie, his personality traits and how experienced he's in IT and social media and with software. I use a simple sliding scale to illustrate those attributes. Sometimes, a buyer persona and a user persona are the same person. To use a wheel man example, someone who wants to learn about arranging of fast getaway car is likely to be the same person who wants to get away in one. Personas give a name, backstory, and sometimes even a face to a person. When you create a persona, you can add any relevant personal or professional information. For example, age and maybe their gender if that's relevant, where they live, their job, if they have one, what their home or their work environment is like. Possibly their goals and frustrations or which news channel they prefer. Now, be selective and only include what you need. I've seen lots of personas which read more like many novels because they contain so much information. Most of it barely relevant if it's relevant at all. I like to keep my personas really short and simple. I constantly ask myself how the attributes in any persona might influence my art direction. After all, there's no reason to include information which isn't relevant. For example, is there age relevant? Or for wheel man that's more likely to be important or someone's gender. Because older people pull off robberies too. Where someone lives is important too. As I might need to avoid some cultural references or localize my copy writing for different countries. The news channels someone prefers will be more relevant if you're working on an editorial website. But less so when you're designing an app to help people get away. My own persona writing goal is to understand someone's personality and characteristics. Because understanding them will give me clear knowledge of how they might be feeling and help me to create better user stories. Although I really dislike the word user and I prefer the word audience. User Stories are fabulous for capturing design problems because they encourage you to think not only about a problem, but also the person who has the problem. That's why it's important to think clearly about your audience personas before you start writing user stories. Personas help you think about real people in real situations. They will help you create accurate user stories. When you write a user story, you should do it from the point of view of someone who wants to accomplish a task using your products or website. My user stories often follow a set format, persona plus need plus purpose. It's a person with a characteristic. Persona or who. What they are hoping to achieve. Need on what. Why they are doing what they're doing? That's the purpose. It's the why? This usually translates to as who, I need, or want to. So that, the why. I find a simple format keeps user stories easy to understand and unambiguous. But you can experiment with different story formats which suit your audience and helps your team. I would use that format to create two user stories for wheel man. Now, I know you probably won't be designing for people getting away after a robbery. But this format works just as well, no matter what job you're pulling off. Start with characteristics. Reggie, as someone planning a robbery. Now, add what Reggie is hoping to achieve. As someone who is planning a robbery, I want a getaway car to take me quickly and reliably from the jewelry store to my safe house. Finally, the reason for needing or wanting it. As someone who's planning a robbery, I want to have a getaway car waiting to take me from the target to my safe house. Because there's a chance that police may arrive on the scene quickly. Don't try and capture more than one problem in any one user story. The same persona might inspire more than one story depending on what their needs are. For example, for Reggie, as someone who is planning a robbery, I want a getaway car which can't be traced back to me or any of my accomplices because the police will use video surveillance of the robbery to try to catch me. Once you have a solid basis for a user story, reduce and refine it by removing any information which isn't vital to the purpose of the story. As an example, I can simplify the language of this story. As someone planning a robbery, I want an untraceable getaway car because police will use surveillance. I like to develop both personas and user stories in collaboration with other people as this helps me take advantage of the widest set of experiences and knowledge. Sometimes I collaborate with business owners, product owners, and salespeople. Other times I might include people from development or from marketing teams. Audience personas and user stories should influence the art direction, design, and development of every aspect of a product or website. But that can only happen when designers and developers keep them in mind. I have found that the best way to ensure everyone involved with the design keeps personas and user stories in mind, it's to turn them into items like posters or postcards, which I keep on the wall of my studio and in my client's office to remind everyone who we're designing for and the problems we're trying to solve. This is something that Mailchimp did very successfully. There posters make it really obvious in a field like ours, we can make our tools as creative as our work. I hope that this episode of art direction for the web taught you the part of the audience, personas, and user stories can play an art direction. Be sure to watch all the videos in this course and find out more about this topic and more in my book. 6. Designing a Customer Journey: Welcome back. In this episode, I'm going to teach you about customer journeys, and how these can influence the art direction of your product or website. Now, I always smile when I hear designers referring to someone using a product or a website as a journey. After all, buying a cable or paying a car tax online is hardly the same thing as getting to Mordor. Still, whether they are journeys or not, mapping a customer's experience can be a very helpful process to help you improve it. You don't need to be a wizard to conjure up a customer journey map. It's not a magical process. In fact, anyone can and should do it. Here is my five-minute guide to customer journeys and art direction. What is a customer journey? How do you map it? I think that Paul Boag has the best explanation, and he wrote, "A persona focuses on the person while a customer journey map focuses on their experience" Why make one? Again, I think Paul offers the best quote, "A customer journey map is a story designed to provide insights into a customer's journey." Customer journey maps gives you a view over the entirety of the customer's experience, and show you where there might be opportunities to improve it throughout direction. Journey maps can be powerful for our direction because they help you to understand not only what someone's trying to do, but also how they might be feeling while they're doing it. For example, how might someone feel about pressing a link in an e-mail or social posts and before arriving at your website for the first time, what could someone be feeling while they're signing up for your product or service? How may someone feel when they receive a confirmation e-mail about something they've purchased, or a booking they have made. Questions like these focus on the customer, and how they might be feeling, which is something that's often forgotten when focusing solely on business objectives like increased sales or sign-ups. A customer's feelings will probably change as they use a product or website. For example, when they see a link in a social post or an e-mail, they might be curious and interested. After finding out more about what a product or service can do, they might feel relieved to have found a solution to their problem, while signing up they could also feel excited. After making a booking or a purchase, we hope they're going to feel happy. A customer journey map needn't be a complicated diagram like this one. In fact, the best way to illustrate what a customer might feel is to show you a map I created for Wellman. I divided this map into the five-stages often mentioned in a marketing buyers journey. The first one is awareness. Someone goes from not knowing about a product or service to knowing that it's available. They might see an advert, a recommendation on social media, or they could receive an e-mail. Then considering they realize that they've got a need and that your product or service can help satisfy it. They considered whether or not to buy it. This is where you're going to need to do some convincing. Hey, you might consider not just their buying experience, but also what happens while they wait for an activation e-mail, or even a physical delivery. Retaining, someone uses the product or service. You want them to have a good experience so they remain a customer and go on to tell other people how much they like your product or website. Advocating, there's nothing nicer than a happy customer helping to sell a product for you by spreading the word and telling their friends. I might sometimes be more specific about a particular area of a product or website which in the case of Wellman, might include booking a getaway driver or a food delivery to a safe house. For my example in Wellman, I might map journeys like setting a heist time, picking your destination, maybe a car swap, a private airstrip or a safe house, choosing a getaway driver, agreeing to the take and then confirming the job. Before you begin creating your customer journey map, find out what information you already have about what people do when they're using your product or website. The most obvious place to start is by looking at analytics, as these will often tell you the most popular parts of your website or product. If you don't already have analytics installed, now's the time to install them. Social media is where many people first hear about a product or service. There are several tools including HootSuite, which is one of the best free social media listening tools, or TweetReach, or even Twitter's TweetDeck, which gives you useful insights into what people are saying. Data will only tell you so much though. I prefer talking with customers, and if I can't get in touch with them directly, I talk with salespeople or customer support staff who have contact with them every day. I found the best way to get people in an organization who will often disagree about the smallest things to agree on a customer journey map is by getting them together in a workshop, invite customers if you can, and anyone who influences the design of their experience including senior managers, because they often have the final say. Don't treat a customer journey workshop just like any other meeting. Instead, you should set clear goals and realistic aims for what you wants to achieve. Unless you product or website is incredibly simple, don't expect to create a map in just one session. Choose one step of your map. Perhaps awareness, and focus on that in one session. Work on the next step in the next workshop and build your map from there. During each workshop, identify what people are trying to achieve, what do they need to know, how might they be feeling. Think about the touch points they will encounter. For example, when moving from buying to retaining, touch points might include sign-up forms, payment pages, logins, or the on-boarding process. During the workshop, plot what someone is doing, the questions they're asking, what they're thinking, the touch points they are encountering, and how they're feeling. Do this on a basic customer journey map template like this. This template needn't be your finished product, is just a tool to organize the information you gather before you design your final customer journey map. Whatever your map illustrates, take care not to over complicate matters or confused people by including too much information. Your map should include only what's needed to describe what someone is doing and how you want them to feel. You should also design your customer journey maps in a way which makes understanding them easy and relevant for the people that need to use them. You can make them colorful or engaging. Your aim should be for people to pay attention to them so they keep how customers feel and every step in the journey are foremost in their minds. I like to think of customer journey maps as posters. They could hang on my studio wall while I'm designing, or on the walls in the client office. That way they won't be forgotten or unused. I hope that this episode of art direction for the web taught you the part that customer journey maps can apply in art direction. Be sure to watch all the videos in this course, and find out more about this topic and more in my book.[MUSIC] 7. Deciding How You Want People to Feel: Welcome back. In this episode, I'm going to teach you how you can decide how you want people to feel, and how this can influence the direction of your product or website. Now, back in episode 2 of this course, I suggested that our direction can be interpreted as using design techniques to intentionally evoke an emotional response from someone when they read an article or use a product or visit a website. I began in that episode by looking at two very different interpretations of a story about the DEA's longest running drug cartel case. One was from the Atlantic, the other from ProPublica. Those pages both contain the same written copy and many of the same photographs. The interpretation by the Atlantic is presented in an intentionally matter-of-fact manner, whereas at ProPublica, illustrations convey violence with an intensity that would have been difficult to stomach if they'd used photography. These illustrations make people feel tense and terrified and that's okay because readers should experience these emotions when reading about melting drug dealers and asset. When someone feels the way you intended when they read a story or use an application, you've succeeded in communicating your message or purpose. Communication is what art direction is really all about. These stories at The Atlantic and ProPublica were art directed with two very different goals in mind. The decisions taken by their designers were intended to support those goals. When I design a new story about a drug cartel, I need to layout the what, where, how, and why, who was involved and what occurred, where it happened, when the events took place, why they happened? I can stay those facts in a manner that's well, matter-of-fact. But there's more to telling stories than just relaying facts. When someone's reading about a Mexican drug lord, do I want them to feel calm, or do I want them to feel terrified? I've plotted those emotions on three scales. Do I want to read it to feel calm? No. Relaxed? Not a chance. Uncomfortable? Absolutely. I want them to squirm in their seats. What about agitated? Yes. I want them to feel frantic and wide-eyed and worked up too. I will want customers to feel relaxed when they're signing up to my product or service using their credit card. But when reading about a drug war, definitely not. I wouldn't want them to feel uncomfortable, while they're reading my Terms of Service. But melting people in acid. Definitely. There's no way I want someone to feel agitated while using a banking application. But when thinking about the drug-fueled violence on the streets of Mexico, you bet your bottom pacer what I do. What about encouraged? That cuts in when someone's learning how products or service solve someone's problem. They should feel motivated to find out more, driven even if the offering is compelling enough. Obsessed. When it comes to shutting down drug cartels, obsession is exactly the emotion I want to evoke. I asked myself, how I want someone to feel before I start art directing every new design. Of course, terror wouldn't be appropriate when I'm writing copy for a product notification. Your password is incorrect, you should be terrified. Instead, I choose a different set of emotions, more appropriate to the content or context. Male chimps voice and tone guidelines contain a helpful list of example emotions. They include negative feelings like anger, annoyance, confusion, and helplessness. As well as positive feelings like anticipation, confidence, excitement, and trust. We're not directing their version of the drug cartel story. ProPublica chose a more dramatic direction because they wanted people to feel appalled while reading it. Their choice of Tim McDonald's emotive illustrations of chaos and violence and death helps to stimulate those emotions and shift readers up the emotional scale from interested towards being appalled about what happened. If like the Atlantic, they chosen a more conventional photomontage, that needle might have moved less. Many magazines and newspapers have struggled to bring the quality of design and art direction from their print publications to the web. But ProPublica is an exception. They face the same editorial, creative, and technical challenges as other news organizations. But they've solved them by developing a process which engages art directors and designers early in the editorial cycle. For Lost Mothers, ProPublica not only used the dots grid as navigation to a story about each woman but also to illustrate just how many women have not been identified, as their art director Rob Weychert explained to me. The idea behind the design was not to shock people necessarily but to give you a sense of how little is really known or understood about what's going on. Each vignette also includes photographs of a lost mother's family and loved ones to give their story more emotional impact. People pay attention to powerfully actuated stories. They get noticed. An unbelievable story of rape, art directed for the web by ProPublica is designed director David Slate won a Pulitzer Prize for explanatory reporting. Now, this story is even more notable because it was written by two journalists. One was reporting from the point of view of the woman, the other from that of the police, and itself this isn't unusual. But instead of merging two voices into one, the editor kept them separate. As the art director, David recognized the two timelines and alternating voices made the story more powerful. We emphasize the distinctions through his design choices. The woman's story uses specially commissioned illustrations while the police story includes photography. Her story's always told on the left, there's on the right. With the introduction and epilogue that's relevant to both placed in the center. An unbelievable story of rape is a compelling story that's told more emotively, because of its art direction. By looking at some of the best editorial design on the web today. I hope that this episode of art direction for the web taught you the importance of evoking the correct feelings through art direction. Be sure to watch all the videos in this course, and you can find out more about this topic and more in my book. 8. Creating a Narrative: In this episode, I'm going to teach you about art directing the experience of your product and website, by talking about the process of creating a narrative. When he wrote, Art Direction Goes Digital, which was his chapter in the book, Art Direction Explained At Last, Khoi Vinn said, "Art direction is good storytelling." He went on to describe that throughout its long history, what we valued most in the practice of art direction is this; the ability to control the Myriad elements in a design in such a way as to produce a sustained, cohesive and distinctive narrative experience. Whether we write fact or fiction, sell or make products, the way we engage people, create desire, make them happy, and encourage them to stay that way is by creating narratives. If you're not the studious type, a narrative is a spoken or written accounts of connected events. It's a story. What's important about that definition isn't so much that an account is written or spoken, but that the events a story describes are connected. Those connections create pathways in someone's mind. While they're on those paths, you can influence how they feel throughout direction. Lessons on crafting narratives usually teach you that before writing your first word, you should decide on outcomes, a cast, backstories, and a plot. In this example of a design narrative, I'm going to play the role of CEO of watch company Panzera. They could be the author of this story. Every story and every art direction project should start with asking, what outcome do we want? How do we want someone to feel? Panzera watches are the best in their class. If I'm their CEO, I'd want people to feel happy to have discovered our brand and excited to purchase. I'd say, we aim to make learning about buying and then receiving our products are fabulous experience. We want to turn casual visitors into customers, and then into ambassadors for our brand. Who are our characters? Did I say characters? We mean our customers, or readers, or our users, they are mostly between 30 and 55 years old, and people who buy unique gifts for them, they have some disposable income, but not unlimited spending power. They're prepared to spend more because wearing a great watch is important to them. The watch they wear makes a statement about them, and they loved talking about it. You can think of these as user personas. Let me give you an example. Reggie is in his mid-thirties and he's the owner of a nightclub in Knight'sbridge, which is a fashionable part of London's West End. He often visits other business people and he wears watches partly as a symbol of his success, but also as a talking point. He's aware of our brand, and he's visited our website several times. What do we want to happen? Some narrative tutorials recommend flowcharts to keep track of a plot, in much the same way as I might map out a customer journey. Think of plot points as touch points. I hope you can see just how similar designing user experiences, are to writing stories. Reggie revisits us, and he sees our latest edition. He spent several minutes browsing photographs and reading. With only a few watches remaining, he decides to make a purchase. The checkout is smooth, and Reggie feels confident, even happy, and he smiles while reading the personal confirmation email that we sent him. A few days later, we deliver Reggie's watch and he takes a sharp intake of breath when he opens the box. Before he's even put the watch on his wrist, Reggie posts a photograph on his social media feeds. At his next meeting, Reggie can't wait to show off his new watch. All of this was art directed to make Reggie feel at first reassured, and then delighted that he's chosen to buy from the company. In that story, Reggie's already familiar with the brand, and that's no accident. The company has spent years art directing their social media channels. Everything they publish is intentional and immaculate. They publish photographs on Instagram regularly. These are all shot by professional photographers and are carefully art directed to maintain a consistent look and message. As well as the content and style of photography and video, art direction also influences the tone of voice and language that a company uses when writing on social and other marketing channels. Panzera has been making watches only since 2009, but watchmaking history resonates with their customers. Their vocabulary emphasizes words like Heritage concerning the company, and Modern, Vintage and Neo-classic whenever they talk about their designs. The website is well-designed and it's easy to navigate, but there's more to a compelling page than just an attractive design. Art direction helps ensure a website design fully supports a company's values through the choice and style of photographs or illustrations. It connects visuals with written messages to tell stories, and through them accomplish a company's goals for their website. Watches are an important talking point for Reggie. To appeal to people like him, the Panzera website emphasizes the most distinctive aspects of their time piece design. Copy focuses on their crown and hand designs, reinforced by close-up photography. The watch is only part of the story, though, equally important, is what people say about it. The company includes reviews and testimonials to increase the product's appeal. Some people might describe insights like this as psychology, but I'm no psychologist. To me, this is just knowing a little about what makes people tick, and of course, art direction. I hope this episode of art direction for the web taught you the part that stories play an art direction. Be sure to watch all the videos in this course and find out more about this topic, and more in my book. 9. Conclusion: Now, like my real man drive is it's time for me to make a speedy gets away. When I set out to make this course, I wanted to teach people about the importance of art direction for the web and how it can help people to tell stories which better connect with audiences. I wanted experienced art directors to know how their skills can be as valuable for the web as they are for the printed page. Above all, I wanted the web designers and developers to learn how to make art direction work for digital products or websites. Whether you design websites which run on platforms like Shopify or Squarespace, weeks or WordPress, or you handcraft every aspect of a digital experience. Art direction will make your site's more effective at communicating, persuading, and selling. If you develop products, art duration will make them more compelling and ultimately more enjoyable to use. I hope this course is inspires you to think about art direction, and how it can make your work and the web much better for everyone. Is art direction relevant for the web? Absolutely, it is. Do we have the technologies and tools to deliver art direction for any product and website? There's no doubt about that. You can find out more about this topic and more in my book. Art Direction for the Web, which is available from artdirectionfortheweb.com. That website also contains my recommended reading list of other books on art direction, books which have influenced me and my work for the web. I think I've played my part. Thanks for watching. The rest is up to you, and I'll see you on my next course.