Storyboards in UX/UI Design

I have the tools that I can give you to teach you and teach you how to My name is Kay Carmichael, and I'm a storyboard artist with 10 to 13 years experience in the film and animation industries. I am the go between the director and the rest of the cast and crew who need to know exactly what they're shooting for, exactly what they need.

And it's very difficult for one director to be able to individually tell 300 people what they need to be doing and hope that everyone has the same picture in their mind. So to get over that, we literally draw the picture for everybody to communicate. And you can only imagine how much time and money that saves everybody and saves the production. I believe that So I hope that you will join us and I will be able to park these tools and these storytelling concepts to you to help you become a better storyteller in your day to day.

Thank you for listening and I hope to see you there.

Brainstorming is a group activity where  people come together to share ideas and   think creatively to solve problems or  generate new concepts. The goal is to encourage free thinking and creativity without judgment or criticism, allowing participants to share any idea that comes to mind no matter how unconventional or seemingly impractical. The aim is to *spark creativity and explore various possibilities* which can later be refined or combined to develop more practical or innovative solutions.

Brainstorming sessions often involve structured or unstructured discussions, note-taking or visual aids to capture and organize the ideas generated by the group. So, how can you structure a brainstorming session? Define the goal. Clearly outline the problem or objective. Create a diverse group. Gather people with varied perspectives. Encourage participation and free thinking. Generate ideas without criticism. Build on ideas. Combine, refine or expand on suggested thoughts. Set a time limit. Keep the session focused and efficient.

And lastly, document and evaluate. Record all ideas and assess their feasibility later. You can spend some time after the session to categorize, reduce and analyze.

I have the tools that I can give you to teach you and teach you how to My name is Kay Carmichael, and I'm a storyboard artist with 10 to 13 years experience in the film and animation industries. I am the go between the director and the rest of the cast and crew who need to know exactly what they're shooting for, exactly what they need.

And it's very difficult for one director to be able to individually tell 300 people what they need to be doing and hope that everyone has the same picture in their mind. So to get over that, we literally draw the picture for everybody to communicate. And you can only imagine how much time and money that saves everybody and saves the production. I believe that So I hope that you will join us and I will be able to park these tools and these storytelling concepts to you to help you become a better storyteller in your day to day.

Thank you for listening and I hope to see you there.

I have the tools that I can give you to teach you and teach you how to My name is Kay Carmichael, and I'm a storyboard artist with 10 to 13 years experience in the film and animation industries. I am the go between the director and the rest of the cast and crew who need to know exactly what they're shooting for, exactly what they need.

And it's very difficult for one director to be able to individually tell 300 people what they need to be doing and hope that everyone has the same picture in their mind. So to get over that, we literally draw the picture for everybody to communicate. And you can only imagine how much time and money that saves everybody and saves the production. I believe that So I hope that you will join us and I will be able to park these tools and these storytelling concepts to you to help you become a better storyteller in your day to day.

Thank you for listening and I hope to see you there.

Wireframing is like creating a blueprint for a website or app. Imagine you want to build a house before the builders start. An architect draws a simple sketch showing where the rooms will be, where the doors and windows go, and how everything connects in the same way when making a website or app. Wireframing is the first step. It's a basic, no frills outline of how the pages will screens will look. It helps designers and developers plan with things will be placed like buttons, images and text. It's not about the colors or fancy details.

It's more about the structure and layout, like arranging the rooms in a house. Wireframes help make sure everything fits together well before the actual building or coding begins. Creating a wireframe during a UX project involves several steps. Understand goals, know the project goals, and user needs. Sketch ideas roughly sketch layouts on paper or digitally create low fidelity wireframes. Use a tool to make simple grayscale wireframes showing basic structure and placement.

Get feedback, share wireframes. Gather feedback and make adjustments. Refine and iterate. Make improvements based on feedback. Focusing on functionality. Create high fidelity wireframes and colors. Fonts and images for a more detailed look. Test and validate. Conduct usability testing and refine further. Finally, ease and hand off complete high fidelity wireframes and handoff to the design and development teams. Wireframing helps to plan and visualize a user friendly design before diving into the details.

User stories are the actual tasks that are written on the cards or sticky notes in your Kanban board. In Agile methodologies, these are often small  enough that they can be done in a matter of hours or sometimes a day or two. Many teams write them from the perspective of the user. So, you may end up seeing things in the form of: 'As a _____ I would like to _____ so that I can _____.' To fill in those blanks just a little bit,

'As a *user type* I would like *some goal or action*, so that *outcome*.' And an actually useful example would be something like: 'As a *job applicant* I would like to save my *resume information*, so *I don't have to re-enter  it every time I apply for a new job*. The idea here is that the engineer who is implementing this user story knows not just what the *description of the feature* is but *what the outcome is  and why the user would want that outcome*. Sometimes the user stories are accompanied  by various types of design deliverables.

Also, some teams don't phrase the user stories in exactly this way. You're going to have to adopt the patterns of your team or work with them to come up with something that works better for you.

Sometimes it feels like there's nothing that other teams love more than jargon. And some of it's really confusing. When we talk about agile methodologies, we're going to be using a lot of specialized terms. If you end up on an Agile team, you'll want to recognize these things because many of them get used every single day. Well, we're not done yet. Once we learn something, we're going to go back and improve

the product based on what we learned and then we'll do it again. And then we'll do it again. That is iteration, and it's pretty much the core of Agile. Truly Agile teams are extremely collaborative, which is great. Most designers I've talked to claim to love collaboration, but it's

obviously one of the areas where I see designers struggle kind of a lot. Not like that. That's how you'll know if your team is actually agile or just using it for branding.

When you design a user interface, skills like visual design, user testing and prototyping are critical. But when you design a complex experience like a buying process, an onboarding sequence, really anything that includes multiple steps over time. Journey mapping is an essential tool. This course will teach you how to use journey mapping in your own work to design holistically and also to identify gaps and opportunities in complex products. It will also help you streamline your team's design efforts.

You'll begin by learning about the power of journey, mapping and design and the different variations that you can use. We'll also cover how to gather data in your journey mapping process and how to make sense of it using a perspective grid. There'll be practical tips on how to create different types of journey maps and how to set up and run a journey mapping workshop by the end of this course. You'll have the knowledge, methods and hands on practice. You'll need to use journey mapping in your own work. The course also includes several downloadable templates

that'll give you a jumpstart in your own journey mapping projects at the end of each lesson. There are multiple choice and open ended questions that are graded personal by industry experts. You'll also have the option to create a practical design project. This will give you invaluable hands on experience that you can add to your portfolio at the end of the course. You'll gain an industry recognized course certificate which is trusted by leading companies around the world, and that will make a great addition to your LinkedIn profile or your design portfolio.

So are you ready?

I have the tools that I can give you to teach you and teach you how to My name is Kay Carmichael, and I'm a storyboard artist with 10 to 13 years experience in the film and animation industries. I am the go between the director and the rest of the cast and crew who need to know exactly what they're shooting for, exactly what they need.

And it's very difficult for one director to be able to individually tell 300 people what they need to be doing and hope that everyone has the same picture in their mind. So to get over that, we literally draw the picture for everybody to communicate. And you can only imagine how much time and money that saves everybody and saves the production. I believe that So I hope that you will join us and I will be able to park these tools and these storytelling concepts to you to help you become a better storyteller in your day to day.

Thank you for listening and I hope to see you there.

Personas are one of these things that gets used  in very, very many ways during design. A persona is a rich description or description of a user. It's similar in some sense, to an example user, somebody that you're going to talk about. But it usually is not a particular person. And that's for sometimes reasons of confidentiality.

Sometimes it's you want to capture about something slightly more generic than the actual user you talked to, that in some ways represents the group, but is still particular enough  that you can think about it. Typically, not one persona, you usually have  several personas. We'll come back to that.   You use this persona description, it's  a description of the example user,   in many ways during design. You can ask  questions like "What would Betty think?"

You've got a persona called / about Betty, "what would  Betty think" or "how would Betty feel about using this aspect of the system? Would Betty understand this? Would Betty be able to do this?"   So we can ask questions by letting those personas  seed our understanding, seed our imagination.   Crucially, the details matter here. You want to make the persona real. So what we want to do is take this  persona, an image of this example user,   and to be able to ask those questions: will  this user..., what will this user feel about  

this feature? How will this user use this system  in order to be able to answer those questions?  It needs to seed your imagination well enough.  It has to feel realistic enough to be able to   do that. Just like when you read that book  and you think, no, that person would never   do that. You've understood them well enough that  certain things they do feel out of character. You need to understand the character of your  persona.

For different purposes actually, different levels of detail are useful. So I'm going to sort of start off with   the least and go to the ones which I think are  actually seeding that rich understanding.  So at one level, you can just look at your  demographics. You're going to design for warehouse   managers, maybe. For a new system that goes into  warehouses. So you look at the demographics, you might have looked at their age. It might be that on the whole that they're   older. Because they're managers, the older end. So  there's only a small number under 35. The majority  

are over 35, about 50:50 between those who are in  the sort of slightly more in the older group.  So that's about 40 percent of them in  the 35 to 50 age group, and about half   of them are older than 50. So on the whole  list, sort of towards the older end group.   About two thirds are male, a third are female.  Education wise, the vast majority have not got   any sort of further education beyond school. About 57 percent we've got here are school.  

We've got a certain number that have done basic  college level education and a small percentage   of warehouse managers have had a university  education. That's some sense of things.   These are invented, by the way, I should say, not  real demographics. Did have children at home. The people, you might have got this from some big  survey or from existing knowledge of the world,   or by asking the employer that you're  dealing with to give you the statistics.   So perhaps about a third of them have got children  at home, but two thirds of them haven't. 

And what about disability? About three  quarters of them have no disability whatsoever.   About one quarter do. Actually, in society  it's surprising. You might... if you think   of disability in terms of major disability,  perhaps having a missing limb or being   completely blind or completely deaf. Then you start relatively small numbers.   But if you include a wider range of disabilities,  typically it gets bigger. And in fact can become  

very, very large. If you include, for  instance, using corrective vision with   glasses, then actually these numbers  will start to look quite small.  Within this, in whatever definition they've  used, they've got up to about 17 percent with   the minor disability and about eight percent  with a major disability. So far, so good. So now, can you design for a  warehouse manager given this? Well,  

you might start to fill in examples for  yourself. So you might sort of almost like   start to create the next stage. But it's hard. So let's look at a particular user profile. Again,   this could be a real user, but let's imagine  this as a typical user in a way. So here's Betty Wilcox. So she's here as a typical user.  And in fact, actually, if you look at her, she's   on the younger end. She's not necessarily the  only one, you usually have several of these.  And she's female as well. Notice only up to  a third of our warehouse ones are female. So  

she's not necessarily the center one. We'll come  back to this in a moment, but she is an example user. One example user. This might have been  based on somebody you've talked to, and then you're sort of abstracting in a way. So, Betty Wilcox. Thirty-seven, female, college education. She's got children at home, one's  seven, one's 15. And she does have a minor disability, which is in her left hand. And  it's there's slight problem in her left hand.  

Can you design, can you ask, what would Betty  think? You're probably doing a bit better at   this now. You start to picture her a bit. And you've probably got almost like an image   in your head as we talk about  Betty. So it's getting better.   So now let's go to a different one. You know, this  is now Betty. Betty is 37 years old. She's been a   warehouse manager for five years and worked for  Simpkins Brothers Engineering for 12 years. She didn't go to university, but has studied  in her evenings for a business diploma.

That was her college education. She has two children  aged 15 and seven and does not like to work late.   Presumably because we put it  here, because of the children.   But she did part of an introductory  in-house computer course some years ago.   But it was interrupted when she was promoted,  and she can no longer afford to take the time.   Her vision is perfect, but a left hand movement,  remember from the description a moment ago,   is slightly restricted because of an  industrial accident three years ago. 

She's enthusiastic about her work and  is happy to delegate responsibility   and to take suggestions from the staff. Actually,  we're seeing somebody who is confident in her   overall abilities, otherwise she wouldn't  be somebody happy to take suggestions.   If you're not competent, you don't. We sort of see that, we start to see a   picture of her. However, she does feel threatened  – simply, she is confident in general – but she   does feel threatened by the introduction of  yet another computer system. The third since she's been working at Simpkins Brothers. So now, when we think about that, do you have a better vision of Betty?

Do you feel you might be in a position to start talking about..."Yeah, if I design this sort of feature, is this something that's going to work with Betty? Or not"? By having a rich  description, she becomes a person. Not just a set of demographics. But then you  can start to think about the person, design for the person and use that rich human understanding you have in order to create a better design.

So it's an example of a user, as I said not  necessarily a real one. You're going to use this as a surrogate and these details really, really matter. You want Betty to be real to   you as a designer, real to your clients as you  talk to them. Real to your fellow designers  as you talk to them. To the developers around  you, to different people. Crucially, though, I've already said this, there's not just one. You usually want several different personas because the users you deal with are all different.

You know, we're all different. And the user group – it's warehouse managers – it's quite a relatively narrow and constrained set of users, will all be different. Now, you can't have one persona for every user,   but you can try and spread. You can look at the range of users.   So now that demographics picture I gave,  we actually said, what's their level of education? That's one way to look at that range. You can think of it as a broad range of users.

The obvious thing to do is to have the absolute  average user. So you almost look for them:   "What's the typical thing? Yes, okay." In my  original demographics the majority have no college   education, they were school educated only. We said that was your education one,   two thirds of them male – I'd have gone for  somebody else who was male. Go down the list, bang   in the centre. Now it's useful to have that center  one, but if that's the only person you deal with,   you're not thinking about the range. But certainly you want people who in some sense  

cover the range, that give you a sense  of the different kinds of people.   And hopefully also by having several, reminds  you constantly that they are a range and have   a different set of characteristics, that there  are different people, not just a generic user.

I have the tools that I can give you to teach you and teach you how to My name is Kay Carmichael, and I'm a storyboard artist with 10 to 13 years experience in the film and animation industries. I am the go between the director and the rest of the cast and crew who need to know exactly what they're shooting for, exactly what they need.

And it's very difficult for one director to be able to individually tell 300 people what they need to be doing and hope that everyone has the same picture in their mind. So to get over that, we literally draw the picture for everybody to communicate. And you can only imagine how much time and money that saves everybody and saves the production. I believe that So I hope that you will join us and I will be able to park these tools and these storytelling concepts to you to help you become a better storyteller in your day to day.

Thank you for listening and I hope to see you there.

Cross-functional teams, unlike silos, have all the people necessary to build a specific thing together. Let's look at an example. Imagine you're on a team that is supposed to build the onboarding flow for a new app that helps connect job applicants with jobs. You can't build the whole thing with just designers. Or with just engineers, for that matter. I mean, you probably could do it with just engineers, but it's a terrible idea.

A cross-functional team for this onboarding work might include a few engineers, perhaps some for the front end and some for the back end. Might include a designer, a researcher, a product owner or manager, maybe a content writer or a marketing person. In an ideal world, all of these folks would only work on this particular team. In the real world, where we actually live, sometimes folks are on a couple of different teams and some specialists may be brought in to consult. For example, if the team needed help from the legal department to explain some of the ramifications of a specific decision,

a cross-functional team would have a dedicated legal expert they could go to. But that legal expert might also work with lots of other teams. In agile environments, the cross-functional team generally sits together or if remote, has some sort of shared workspace. They all go to the required team meetings. They understand the goal of the team and the users. They're experts, or they soon become experts, on that onboarding flow. Contrast this to how it might be done in a siloed environment. In that case, you might have different people assigned to the team depending on need, which can seem really flexible.

Until you realize that you end up with five different designers working on the project all at different times and they all have to be brought up to speed and they don't really understand why the other designers made the decisions that they did. Same with the engineers. And do not get me started on legal. Silo teams tend to rely more on documentation that gets handed between groups. And this can lead to a waterfall project where project managers or product managers work on something for a while to create requirements, which they then hand off to designers who work on designs for a while

and then they pass the deliverables on to engineering, who immediately insists that none of this will work and demands to know why they weren't brought in earlier for consultation. You get it. By working in cross-functional teams instead, the people embedded on the project get comfortable with each other. They know how the team works and can make improvements to it. They come to deeply understand their particular users and their metrics. They actually bring engineering and even design and research into the decision making process early to avoid the scenario I described above.

I have the tools that I can give you to teach you and teach you how to My name is Kay Carmichael, and I'm a storyboard artist with 10 to 13 years experience in the film and animation industries. I am the go between the director and the rest of the cast and crew who need to know exactly what they're shooting for, exactly what they need.

And it's very difficult for one director to be able to individually tell 300 people what they need to be doing and hope that everyone has the same picture in their mind. So to get over that, we literally draw the picture for everybody to communicate. And you can only imagine how much time and money that saves everybody and saves the production. I believe that So I hope that you will join us and I will be able to park these tools and these storytelling concepts to you to help you become a better storyteller in your day to day.

Thank you for listening and I hope to see you there.