Como aplicar Ideação (Ideate) em design | Bootcampinho UI/UX Design

Do you want an example of how I apply ideation in my design projects? So, without further ado, come with me! I'm here again with that little Amazon Web project of ours.

I'll scroll down here and in “Tasks and Processes”. . .

Look at how many things I did in this idealization phase of my project. I created a user flow, site map, menu page structure, wireframes, sketches, but I'm not going to show you that here in Notion, because Notion is not a very good tool when you start to get into that part of wireframes, prototypes, ideas and everything in between. Especially because a good part of these steps take place here, in a good old notebook, guys.

Can you see here? I did most of my sketches directly in my notebook. By the way, I use these notebooks for everything, if you see, I'll try to show you, I don't know if it will work very well, but here are a lot of sketches of all kinds of things, for everything I'm going to do, I sketch it, I create flows, there are some Santa Clauses here, some wireframes, so, for me it works very well to always have a little piece of paper and a pen in my hand because when I need to come up with a quick idea, to get an idea out of my head, what works best for me is having a pen and paper to do some sketches and drafts with.

In this Amazon Web project specifically, I also made some sketches on the iPad. There was a day when I went out, I went to a cafe, and then I made a bunch of sketches, I wrote down a bunch of ideas while being there. I divided the paper sheet into a thousand pieces because my handwriting is lowercase, guys.

So, for me, I always divide any paper into a thousand pieces, because otherwise I only use half of the papers, including digital ones, look at how much I used, it seems that I used a lot, right? Like all the rest of the paper is all empty because my handwriting is so tiny. In addition, I also made some other sketches here, they are also well sketched, but look, it's not very elaborated or anything.

So, in this project specifically, I didn't proceed to high-fidelity wireframes from that. Because, since I didn't have to present it to a client, or rather, I didn't have to validate it in a more formal way, since it was my own project, I ended up working based on well-drafted wireframes. If it was a real official project, that I had to present to a client, I would take several of these wireframes and sketch them there, leaving them at medium fidelity, at least.

I'm going to show you some examples on the screen so you can have an idea of ​​what I'm talking about and based on that, I could also do other things. And another cool thing I did now, here on the computer, was the matter of, for example, the site map. I defined more or less what the base structure of my project would be.

For example, the homepage would contain the map, the gallery, data and surveys, status, the error page, some of these things were very similar, but I also made some changes. For example, that base was basically this menu here, with the difference that I added the live part later on, but the matter of exploring, the gallery, status, surveys, all of that remained. That was the basis for me to create even the login part here, which I put there as a user area or something like that, wanna take a look?

I put it here, that from the homepage you could go to all these screens here, as well as to the user area. So I mapped all of this out and that helped me, because when I went to make the drafts, for example, you see here, this draft is very similar to what I have on the original site because this is where I had this idea, it was here that I found the line I wanted to follow, but before that, I had already made several of those drafts, on the iPad itself that I didn't like so much. And I kept sketching until I found ideas that I thought worked best.

I also did it, to try to validate these wireframes a little bit, to see if it would work or not, or at least to get an idea. For example, I took those personas that I had created, for example, Maria Alice, who was a biologist, her objective was to find out on the website how deforestation is going on in the Amazon. And I made a very simple flow here.

For example, she would have to enter the home, from the home she would go to the status page and on the status page, she would have alerts and graphs. So, here, when she comes to the home page, for example, she comes here, she's on the Home page, she accesses status, oops, she accesses status, and here, she already has a lot of data about deforestation. So, that would be the way she could explore it.

So, these user flows help determine how the user will behave on your site. They can serve to for example, start validating these ideas, does it work? Does it not work?

As well as for you to have a notion of, "wow, my user, he needs to be able to do this on the website". "How will he be able to do this on the website? " You know, when you bring the persona into this Ideation part, it also helps you to create solutions based on your target audience, based on all that research that you developed, because all these solutions that you develop in this stage of Ideation, they are all based on everything that you've heard, that you've studied, that you've thought and that's why I think it's cool, I honestly think it's kind of complicated to divide UI and UX too much, because if only one person does the research part and the other does just the interface part, it's lacking, it needs someone who is familiar with both worlds.

I think that it is not mandatory for everyone to do everything, especially in larger companies, the research steps are much, much, much more extensive and the interface steps are also much more intense in terms of details, more care, design systems and several other things that we will talk about a little later. So, they need to be separated, but it is important to maintain a good communication between the teams, because even the person who is not directly involved in the research has to have an excellent notion of what is happening, what is already known, which is not known, because otherwise, this starts to generate broken processes. That's why it's very important for you to focus on research so that when you reach this stage of ideation, your ideas, first you're going all out, okay?

At first, you go like crazy, do what you have to do, but then when you filter them, when you think about them, does it really make sense? Is it consistent? Then you start to understand if it really relates to all that research you've already done.

And of course, guys, you already know that we couldn't leave this class without what? Alfred's Challenge. Alfredinho is very cute here and your challenge is the following: you will have to choose at least one, I suggest up to three, solutions to your problem.

Think about it like this, when you choose this solution, for example, it would have to be something that would solve that problem you had. In the Define phase you found a problem that needs to be solved. Always remember to base it on your objective, on all those materials you created, and now you have to understand what the solution will be.

What will solve this problem. Out of all those wireframes, research and everything else, those ideas that you've come up with, select at least three, at least not! Up to three solutions to your problem.

My suggestion: select the solutions that you think are really “Oh, I believe this is the best solution”. Solutions like, “Ah, this solution is worth testing later”, because this will serve as a basis for later in the next steps, we will develop these solutions that you choose, they will be developed and then later we will also talk a little bit about tests, okay? After you've chosen at least one to three solutions to your problem, you'll need to make wireframes to represent each of those solutions.

And when I say wireframes, I don't mean these as drafted as I did, ok? Because these here I made them in a lot of hurry, in the midst of loads of craziness in my life. But do some research, I've already shown you some examples of wireframes, search for wireframes there, Google it, see the kind of styles there are.

My suggestion: your wireframe needs to have at least enough detail so that you can have an idea, for example, of "how many types of titles I will use in my project? " "Which elements are the most important? " What is the most important thing about each screen?

Thinking about an action that the user is going to do, what is important for them to be able to do on this screen? So this element already has to have some form of highlight. And the important thing about this is that your wireframe will serve as a base, as a guide for when you actually create the prototypes of your project.

So make this wireframe carefully, so you can have it as a base so that it can really help you in the next steps, when you are actually going to create your project, okay? And now I ask you: are you convinced that the solutions you selected from all your ideas, are you convinced it is a good solution? If you are convinced that you have selected good solutions, I invite you to click on this little card to go to the next lesson with me, which is where we will start talking about Prototyping, this crazy world of interface design and there's a lot for us to explore there, okay?

If you're still not convinced about your solution, you know, make some more drafts, some more ideas, more wireframes, I'm sure the cool solution will come up, alright? I see you in the next lesson. Click on the card.