Mobile App Design from scratch with Sketch 3 - Part 1 (UX Research) | Maxime Cormier | Skillshare

Mobile App Design from scratch with Sketch 3 - Part 1 (UX Research)

Maxime Cormier, Entrepreneur and Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (43m)
    • 1. Introduction

      2:34
    • 2. Sketch : the design software we'll use in this course

      2:48
    • 3. How this course works

      3:03
    • 4. UX and UI

      3:58
    • 5. What problem are you solving ?

      4:36
    • 6. Understand your users

      5:56
    • 7. Find the right solution and feature

      6:15
    • 8. Storytelling design

      4:13
    • 9. A bit of psychology

      8:07
    • 10. Part 1 Project

      1:00

About This Class

The key to creating a succesful app is to make something that people want and that works. And this is what design is really all about. That's why this course is not just about creating a pretty app, it’s about designing a product that makes sense to people and happens to be beautiful.

In this 3 hour class we'll teach you a complete design workflow that will allow you turn your idea into a fully designed and engaging mobile app using Sketch 3.

This course is taught with an example. Each lesson represents a step in the design process that will be applied to the app we will be building so that you have a clear comprehension of every design principles that will be discussed.

The course is divided into 3 parts, make sure you subscribe to all of them :

In Part 1, we'll focus on UX Research techniques that will allow us to make sure we'll be designing an engaging app, something that really works and makes sense.

In Part 2, we'll deal with the basics of UI design. We'll learn how to use Sketch and we'll design a first draft of your app, using mainly iOS standard elements. The key word here will be efficiency.

In Part 3, we'll take the time to go deeper into custom UIadvanced Sketch techinques, Icon Design and many other suprises by designing a final version of our app.

Transcripts

1. Introduction: Hello. Welcome to this course. We're excited to see you on. We hope you excited to. We're going to turn you into a top that's too big designer. And if fellow through it's only going to take a few hours, just a quick introduction before we dive in. My name is Maxim. Call me. I'm self taught designer entrepreneur. On also Teacher University in Paris. I created the first version of this coast. There was a huge success as the course that I would have dreamed to have when I started learning how to design by myself on for this new, updated and improved version of the course I've teamed up for the great forced designer. I was one of Maxim's first course students, and I totally fell in love with sketch. Since then, I use the stuff where every single day are essentially using fruit and designer for mobile labs websites, but also print an interior design. Our goal is to help you turn your idea into beautiful, functional and fully designed mobile app. That means that you not only know the ins and outs of sketch the best his own softer out there, but you also learn to think like a professional design. This course is project based. That means that will be building a real up on instagram elliptical from the ground up. Teaching you along the way I work for that you'll be able to use for all your future projects on will actually encourage you to work in a product of your own while following this cause. We'll start from the idea. Then we'll go through extremely useful UX research techniques in order to write user stories from there, will be able to design our first prototype of the yet well, then design a servant version of yet beautiful and functional. We'll even show you have to create up icon and how to showcase your app on the APP store and on the Web. Discourse is for entrepreneurs, programmers, designers, product managers, students anyone wants to build or improve about that, because knowing how to design is the key of making an amazing product on. If you're a developer, are entrepreneur. You can not only improve your skills, but you'll save a lot of time on a lot of money. And if you want to become a freelance designer, well, this is the beginning of a path that's very, very exciting on whether work is great under money. Very good. There is no perquisites for this. Course you don't need to know anything about design are designed self to us or we need to have is a Mac and Apple computer. So let's get started on Join us. See you on the other side. 2. Sketch : the design software we'll use in this course: hi guys. Before we dive in, I want to take a moment to say a few words about sketch. The design software will be using this course. If you've already used to design software in the past, chances are that it was one of Toby's product, probably for the shop on. You might be a bit surprised that we've chosen not to work with Full of shop. There is a very simple reason to that. Photo shop was not created for us. It was not designed for Web app design. I know some Web and mobile app designers still useful shop in their work on. That's actually what I used to do. But following the lead of many great designers are switched to sketch sketches, a great design app for Mac and Mike only on. That's the reason why you need the Mac for this course. It has been created specially for Weapon AB design. It is purpose built for user interface design, so every future is crafty to run those ideas. Some of them I've actually saved me hours of work compared to how is to work with photo shop. Only about 20% of four shop features are actually useful for your design. Everything else is not related to you. I so it can be quite frustrating to have to find your way through thousands of options and tools that are completely irrelevant. On the contrary, sketch is very simple and very intuitive, yet very powerful and very, very efficient for you. I design sketch is also entirely victor based on that makes our life much easier when we have to modify shapes on adapt element sizes. Exporting assets with sketch is easier than with foolish up, especially with mobile app design, where we have to exports assets for multiple resolutions, put a shop sex it doing. That sketch is also way lighter than for the shop in terms off hard drive space on memory footprint. If your computer is more than two years old, good luck for running finish up with more than two or three fives opened, and it's also weighed cheaper. Skitch is $99 that's it for foot shop C. C. You have to pay $25 a month, and it is so great that even Apple designers used it to design. That's kind of a good site, right? I don't have any affiliation with sketch, but Congress to them because they're very dedicated team that's constantly listening to user feedback on always improving software. That's already awesome. If you're still a bit skeptical, don't just take my word for it. Read the articles from great designers, including guys from Google, Apple, Facebook who have switched to sketch to have their opinions. You can find the links in description. Now let's don't load on install sketch. Good to sketch up that come. You can either buy it for $99 here or on the APP store, or you can start with a free trial. If so, click here and download it once it's downloaded. Unzip the file and now you can put it in your applications folder on Open It. That's it for this lesson. In the next one, I'll explain how the course works and how to get the most out of it too soon. 3. How this course works: Hey, welcome back in this video, I'll explain how this course works and how you can get the most out of it. But first things first on skilled share. This course is divided into three parts, each taught in an individual course. So don't forget to subscribe to the two of the parts. This one is the 1st 1 It's the U. S. Research section on. I'll explain in a minute what you learn in each section. Also, make sure you don't know the first used in this course that you'll need to follow along. Go to the class Project tab and click Student Vice. You only need to do that once you have all the fights for all the three parts of the course in there. Okay, let's go back to how the course works. This course will be taught with an example because there is no better way to learn thing to do. Each lesson represents a step in the design process that will be applied to the APP will be building on will use a new existing app, knots a fake AP as the example because design is in court. In reality, it will help us understanding how to build something that works well on that can be successful. We've chosen Instagram because it's one of the most successful labs in the world. It's very well designed on. We'll see why and how we'll work on the I was version of Instagram. Apart from a few conventions, designing for us and enjoy it is pretty similar. Once you've learned how to design for IOS, it will be very easy to design for Android to Don't worry, if you don't have an iPhone you don't need. One will start the course with the section about you exercise techniques that will help us make sure that we're creating something that makes sense and that people will use. This will allow us to come up with users stories that will turn into a first version of the APP, using only IOS elements. In this part of the course our men go, will be efficiency will discover the main features of sketch on will go through the entire process of AB design, were then spend some time discussing things like topography and colors before diving into more advanced design techniques. This will allow us to create a custom on beautiful app will go deeply into custom drawings , effects advanced functions on good practices and finally, with their care of the export, will prepare the app to be coded will design an icon on show you how to show you out of the world. What we're referring you is a complete workflow that will take you from the very start of the design process. Your idea to complete and beautiful design of your app. Your priority is to learn how to use a design software, then feel free to keep the U X section on. Start directly with the U I part of the course. But if you do, we strongly recommend that you take some time to come back to this section. It's always good to Challenger product on the U X section is dedicated to. If you create something that makes sense which ever path you choose, the best way to take this course is to apply the instructions given in each lesson twice. First on the sample app that will be building together on then on a personal project. That's how you really get the most out of this course. If you don't have a personal project, don't worry, that's fine. It won't prevent you from learning 4. UX and UI: Hey, guys, welcome back to the coasts. This section is dedicated to help you think about your part of before you start designing it. It's a crucial part of the design process, but it might seem a bit theoretical if what you're looking for right now is to learn how to use sketch on design the screens of your app. So if that's the case, you can skip this section and go directly to section free. You can come back to this one any time you want. However, if you want to make sure you're creating a nap, that makes sense. We in creature to Wash The following videos in this first lesson of the U. S preliminary work section are, say a word about interaction design on. Then I'll explain why you x means and why It's important. And this course, as would be designing an APP, would be building a software interface that means would mainly be working on interaction. Design interaction. Design is about shaping digital things for people to use. It's about helping people achieve specific goals through an interface. This could be with throwing money from an 80 aim. Taking a picture with your phone Oh, checking your emails so is different from industrial design, where the goal is to solve the problem by crafting a physical product that will be mass produced, taking into account material on production line constraints. And it's also different from graphic design, which is more men to be looked at rather than to be interacted with. All right, let me know. Introduce you to two concepts you need to understand you x a new I this then for user experience and user interface. You've probably heard this does before, but it's not always clear what the correspond to, and I want to make sure that the distinction is clear in your mind. UX user experience Design deals with the overall experience associated with the use of a product or service. It requires a good understanding of the user and off the system of the products the user interacts with you. I user interface is the specific interface of this product. It is the tool, the point of interaction between the human on a system. Therefore you. I is a part of you X. All right, let's borrow. Edley is example on pictures to illustrate this here. The problem is what is the best way to serve the content represented by the cereals to the customer? The whole user experience will include serving them into a bowl full of milk on allowing the user to read the serial from the bowl on. That is thanks to the interface, which is the spoon. Let's see what that means. If we take, the app will be designing. We have the you I, which is made off several you. Elements like the tab are clickable text, the E made and so on. So you are is what is displayed on the screen to accomplish in action, whereas you X answers a different question, which is why, like why is dispatched the home page? Why is the picture that big? Why do we have fire stabs that include a blue tap? All these decisions thes choices will be motivated by the research on the thinking will do before you start designing the interface on when I say research, I do not mean you alone in front of your computer or at the library. UX is about creating the best way to fulfill the need of the users. So the only way to figure that out is to talk to people to talk to the potential users to observe them. Good. You X relies on a good understanding of the users needs and personality, a clear view off the architecture and the way the product works with. At a minimum of this, we can't hope to craft the functional. You I This is why, in our workflow that you'll be able to use for all the future projects will start with some UX research techniques before diving in the design of the interface. Okay, let's wrap up in this lesson. We learned the difference between you eggs and new I on why in interaction design, we need to work on user experience first. If we want to build a great user interface on, that's exactly what we start doing in the next video, starting with the problem we want to solve. That's it. See you soon. 5. What problem are you solving ?: Welcome back with no further ado, Let's dive in the first step off the U. S. Research design is the art of solving problems on. You can't hope to craft a good product with a good design. If you don't understand what problem you're solving, the big risk when you have an idea is to think too fast. We think about how the product is going to work on look like on what cool features it could have. We all do it because it's exciting, but because we're doing that, we tend to overlook the root of the idea. The problem we're trying to sort. This is why did Mackler, funder of 500 startups famous startups incubator, often tell people will pitch him their ideas? Your solution is not my fucking problem on what it means is that is more interesting in a problem that really bothers people, that in a product idea that someone thought was cool, The purpose of this lesson is to help you make sure the problem Europe is trying to solve exists on to make sure you understand how it exists. The entrepreneur in me tells me to make a sign on here. These courses about design, not about business. But if you're entrepreneur, the two things are deeply linked. And if you're not an entrepreneur, well, you might become one sooner than you think. If you haven't heard about the Lean Startup by Erik Reece on Customer Development by Steve Blank, take a few minutes to read the resources Avlynn to in the description. The core of the lean startup and customer development philosophy is that everything you do in your work as an entrepreneur must follow the cycle hypothesis, test learnings and refine. And it's exactly the same thing for design. And this is how I encourage you to work. It's actually how we'll work on our problem. Let's that with the hypothesis. What is the problem we think we want to tackle? Let's pretend we're at the start off instagram a few years ago. The problem hypothesis for us will be that it's complicated to share pictures taken with your phone on social networks. Once we have that, we need to make an eye prosthesis about who has this problem. Okay, let's say college students because they use their smartphone lots. Andi also used social networks a lot, so how can we test that? Well, it's pretty simple. We're going to talk to these people to make sure that they really have this problem. And in the next video, I'll give you a few tips about how to talk to the potential users. Thanks to these conversations, the hypothesis would be very dated or invalidated. The insights will get during the conversations will allow us to refine the hypothesis. Maybe this problem exists, but for another category of people, or maybe these people have a stronger pain than the one we had identified. For instance, we could have learned that college and high school students don't really care about sharing pictures on social networks with their phones that just want to take funny pictures on Send them to their friends without having to fear that this pictures get out. Event on This could become something called Snapshot. But let's say that's not what happened. What happened is that Onley some of the people we interviewed really cared about. The problem with identified people will already take a lot of pictures on. We want to share them like foot bloggers or people who happen to love for technology, so we'll change the customer hypothesis on. We go to talk to more of these people to make sure this new custom, my hypothesis is right. And after talking to them, we might discover that what was really preventing them from sharing pictures taken with a smartphone is that smartphone pictures are not very pretty, and that's not really worth being shared. So the customer target is interesting, but only if we tackle another problem for them. The fact that smartphones picture look dull off course. That's not the way it happened for Instagram. Instagram is the people have a checking app called bourbon. However, if you look at Instagram's F A. Q, they did build their app with this problems in mind. Have a look here. One mobile photos always come out looking mediocre to sharing on multiple platforms. A pain on three Most applauding experiences are clumsy intact. Forever two and three are two components of a more general problem, so I've met the two to keep it simple. Don't try to solve more than one problem, or maybe two. If you have to use your focus and so will your app, and this is the best way to make it irrelevant. and clattered. Remember, good designers solve problems. Great designers solved the right problems. That's it for this lesson. We've covered the importance of fighting out. There are problem to tackle by talking to your potential uses on the art of refining and validating your eye purposes. If you're already working on a personal project, take a piece of paper on. Write down your problem hypothesis in less than 10 words. Same thing for your customer hypothesis. That's it. Pretty simple, right? You don't even need to go out to talk to customers. Yet the next lesson will talk about great techniques to get to know the users to create something that makes sense to them in a bit. 6. Understand your users: Welcome back to the course in this video. We'll talk about understanding the users talking to the people will use your app is crucial to validate your problem, but it also allows you to get to know them. And you really need to take some time to understand who they are, what the lives I like and how you product would fit in their lives. Like Henry, Ford said, if there is anyone secret of success, it lies in the ability to get the other person's point of view on DSI things from that person's angle as well as from your own. A good way of keeping your user in mind when you design your product is to use personas, a person that is basically a canvas that you feel with details about your targets. Profile. The canvas is made of four blocks. Facts. Pain, Behavior on goals The best way to use Barcelona is to first build a proto persona. The proto persona is your best guest. As to who the user is. It is the customer hypothesis in a more detailed way. So let's start feeling the canvas. As you might recall from the last video, our first hypothesis was that college students Stephen share pages from their phones because it's too complicated, so we'll fill facts and pains. Facts are factual, relevant informations about the user defining this also allow us to know exactly who we want to interview. Pain is the pollen hypotheses, So for now, we don't need to give too many details. Next up is the behavior that the user currently exhibits because it doesn't have our solution. So it keeps most of these pictures on his phone on shares, very few of them on. He sometimes sends pictures with this phone by text to his friends when he want to make sure they see them on. Finally, what goal is the potential user trying to accomplish through the behavior that our product will do better? The question we're trying to answer here is no what are they trying to accomplish? But why? It's the first step in the understanding of the users psychology on understanding the user . Psychology is a huge asset in design and business on. Did you know that Mark Zuckerberg's major and colors with psychology? So why are college students sending pictures to their friends by text? I think if a guess would be that they're trying to get feedback and approbation. You could put a lot of things about the user in the persona. So stay focused on informations really vented the problem on the potential. Partly working on, for example, they might be cases where the age old line of work of the users don't imply much. Why the fact that they have a specific device like a smartphone does. Okay, so once you proto persona is ready on, this shouldn't take more than an hour. You can proceed to the interview in order to validate the problem on the person. So here are a few tips for your interviews. Talk to targets. Fine people cry spun to you persona and get out of the building and go talk to them in person on one on one. Define your goals and keep them in mind. Hey, your goal is not to picture solution. You're not trying to convince anyone you want to make sure the parliament identified Israel on. You want to get to know your potential? Uses better. Get ready to hear things you don't want to actually help people tell you things you don't want to hear, ask open ended questions. This is really important when asking about the problem. Don't ask people. Do you have this problem? But rather, can you tell me about the last time you did X X being the action that would lead to the problem on Once the person answers you can add Okay on. Did you face any problems while doing that? Rephrase what people tell you. This is a great technique. It will allow you to make sure that you've understood what the person told you on. Give them the opportunity to add details. Look for insights on Make sure to write them down. They'll be useful to refine your persona. Unuseful When you start thinking about a solution once you've dated your problem, validate with currency. The best form of currency is off course money. If you can find people willing to give you money because they want you to solve the problem , even though you solution doesn't exist, this means the Poland is worth being tackled. But currency can also be email addresses or phone numbers from people will really want to hear from you. Once your solution is ready, we find your hypothesis on go test the new ones there's getting out of the building might take some time on. You might have to refine your hypothesis several times, but this is great. This will bring you a lot of insights. Once you've validated your problem, my customer hypothesis, you can go back to you persona and feed it with everything you've learned. So let's see what hours could be like The person is going to become your best friend, and it's always easier when friends of names, right? So what can I was Kevin, You can add photo or draw a picture if you like is not necessarily a college student is actually more likely to be 25 to work in a start up. He does own a smartphone and share speeches on Facebook from his computer, but most of the time they were taken with his real camera pain. Here we can add details by the problem. These details are clues about how we should solve the problem. Phone pictures on look good, but it doesn't always have his camera with him on sharing pictures complicated, and there's too much going on Facebook. Next up is behavior giving uses Photoshopped, but not for pictures taken with this phone on the next two were right, and we've also learned that the typical user puts pictures on photo networks like Flicker, but it doesn't really get his friend's attention there on. Finally, the goal for caving is indeed to get feedback and approbation and wants to cool or show. Is that artistic talents? With time, you probably have more than one type of people using your product, but for now, stick to one or two. If you're working on a two sided market, okay, we're done with this lesson. Will use your own work as a wrap up start by feeling you put a persona. You confined the canvas in the folder of this lesson on get out on talk to potential users as soon as you can, and remember to ask open ended questions on to rephrase what they tell you. Also, keep in mind that you have two goals to test the problem and to understand their potential users. Take notes on refining hypothesis until you validated them. If possible with currency, that's it. Have fun on in. The next lesson was that working on a solution to the problem on will turn your brain into a 90 a factory, seeing a bit 7. Find the right solution and feature: welcome back in this lesson, will brainstorm to find as many ideas of solution is possible before we pick our key feature, the one we will be working on. So once we've met, sure, we're solving a real problem for riel category of people. We can start thinking about a solution that means a product made of features. Most of the time. The solution ideas will come from the insights you get during the interviews you've made. So don't forget to write them down as you do the interviews. I'm sure you already have plenty of future jails. You were probably thinking about them even before validating your problem. Why? This is not really a good thing. Don't beat yourself up. It's what everyone does because it's what gets us excited, envisioning a product that millions will use right. The best way to deal with this is to write down all your ideas and keep thinking. Do not for yourself completely at the first ideas you'll get your probably missed the real gems that can come out off your brain. Try to be as exhaustive as possible with whole criticism, and don't hesitate to write down anything that comes to your mind. Let me give you a few tips to get creative. A good way to start is to take the man terms of a problem on do semantic exploration of each other. The's our two problems and these other men terms is what I usually do. I take a piece of paper. I draw stone more or less like this, with at least 10 branches on a write down one of the terms inside the sun on I forced myself to write at least one word for each branch. Sometimes it comes easily under foreign yourself. I didn't branches or so branches. Sometimes you have to force yourself to think on. These words can be now in verbs, objectives, whatever you like. Let's try with photo post a video on right 10 words related to the word photo. Put it now. So these are my words. There will surely be different from yours, but that's OK. Do the same thing for the other terms and put them in a table like this. The semantic exploration is meant to help you broaden your horizon. The outcome the worst themselves are not. What's more interesting about this step is to process itself because new ideas will spring along the way. Okay, let's go on. Another technique is to look at other digital or physical products that solve a similar problem. For instance, what do we usually do to showcase a printed picture? That's right. We put a nice frame around it on. Maybe we could put digital frames around the picture. Sticking with our phones next up is to look at common human behaviors when they're trying to solve a similar problem. What do people do when they want to look better? Well, they put on makeup or nice clothes. Can pictures were clothes or makeup? Not really. But maybe we can cover them with something. Also, think about what your target is already using. If we check out persona, we can see that our target owns a camera. On photograph is sometimes change lenses. Maybe we could find a way to add lances to smartphones. Ah, hardware software. Another great technique is to think about the key issues that affect the problem. Let's think about the other part of the problem. Sharing pictures from your phone is complicated. Why? Because photos take time to upload on even more time. If you have to go to every app you want to share it on, so it be great to have a place where you could automatically share them on the selected services. What you can also do is to pretend you're trying to solve the opposite problem. How would you do it if you wanted to make pictures look even less good? We could fix. Let them, for instance. So maybe there's a way to sharpen the pictures. We dig can also be interesting to brainstorm with monetization in mind. What would you sell that solved the problem? When did you know that Instagram first business model idea was to sell filters? So don't worry about repeating yourself. Keep writing. I don't hesitate to take a few breaks to him to your brain. Go take a walk on, then come back to your desk. If you use these techniques, you should come with a lot of solution. All feature ideas to solve the problem of identified your job. Now it might not be easy will be to prioritize these ideas to do that. Ask yourself two questions. Among these ideas, which ones would be the most efficient to solve the problem and which ones are the most feasible. Take a minute to look at this very interesting quote from the creator of Gmail on Google AdSense. Pick three key attributes or features. Get those things very, very right and then forget about everything else. By focusing on only a few core features in the first version, you are forced to find the true essence on value of the product. So once you have a prioritized list of ideas, picked the top one. This is the one the key feature. This doesn't prevent you from having other secondary features to make this one feature work . But this one feature will be what all your app will be focused on oriented towards. How can you choose this? Stop future? Well, I think by now you know the answer. Go talk to people on peach them your ideas Once you clear what you want, Future is Onley. Keep the sub features that you might have complete that I related and really, really needed to make that one feature up work. Draw a simple table like that to have a clear view of what you're building. Applying filters to photos to make them no good will be the one feature for us. It's very simple. You don't need to learn how to use any tools like you would with photo enhancing software's on its putting Charlie quite effective. Making for his beautiful is useless unless people actually see them. That's why our to set features will be to let people share them easily on social networks, but also to give the user of feed met of pictures on Lee. It's less Joses comported by what some people told us when researching the problem on refining our persona. So we'll have filters feed unsure. Okay, let's wrap up. What you have to remember from this lesson is that you must not wait to design and develop every future you've thought about to launch your product. At first, your product should be simple on focused on one feature. Your goal is to see how people react. If that works, you'll have plenty of time to develop all the extra futures you've dreamt about later. So go ahead its return now find as many solutions as you can and pick you co feature once you're done. One last thing. Don't get emotionally attached to a feature. This happens a lot and can cause you to waste a lot of time. Commit yourself to satisfy the user needs not to a specific feature. Okay, in the next lesson, we'll see how storytelling can allow us to design great app. So see you in a bit. 8. Storytelling design: Welcome back in this lesson will talk about storytelling design, which is a crucial step before moving on to designing the actual interface. One of the biggest things that has helped me is learning how to become a better storyteller on the power over story on by this, I mean, if you want to build a product and you want to build a product that is relevant to folks, you need to put yourselves in their shoes on. You need to write a story from their site, so we spend a lot of time writing what's called using narratives. This is a quote about Jack Dorsey, founder of Twitter and Square. Now that we know what we want to use is to be able to do with the app on that we understand who there are. It's time to start figuring out how they will interact with the product. In order to do that, we create using narratives for the product that will a straight every step in the uses journey. Through it, I refer to them as narratives or stories. The person that we've defined earlier will be the voice of the story. That means we won't be saying the APP should do X, but I us Kevin Do X. So remember to write you narratives using the active voice. There's two types of user narratives, one that's more generic, that says, as giving. I can take a picture on apply filter to make it beautiful. The other type of narratives is more detailed and explicit. It describes each step of the flow. For instance, I click the photo button to take a picture. Next story will be Aiken swiped it through the filter. When I click a filter, it alters the image accordingly. This second type of stories is very useful for many reasons. It allows you to make sure you have a comprehensive approach of the flow on that you're not forgetting anything. We also be very useful when cutting the app, especially if someone else is doing it for you. But it can be a bit tricky to do with that visual support. That's why we'll be using that type of stories as we build the first version of the APP in the next section. For now, we want to get a general sense of how the upward work describing the flow of the APP is a good premise before we start to create a visual draft on. It's also a good way of coming up with essentials of features we might not I've thought about in the president step. So let's describe what the user will be able to do with the up. The first step will be to write goal story, and you can use this template to do that as the user persona. I want to accomplish something so that some benefit happens. So for us it will be as Kevin. I want to take a nice picture of what I'm doing so that people can see that I'm doing something called Notice that the goal is something we found out earlier when talking to the potential users on that we put in the persona. The next step is to break this girl's story into smaller pieces, explaining what the user will do. So our goal story is again asked, giving. I want to take a nice picture of what I'm doing so that people can see that I'm doing something cool on. In order to do that, I'll have to follow this fellow. I open the app I take a picture. I apply filter to make it look good on the four worth being shed. I can add a description to my enhance picture. Andi. I can select on what networks I want to share it on. What I advise you to do is to use Busted right. It's story The gold story on the small stories on different post its on. Stick them to the wall. This way, you'll be able to move them around and modify them easily. While doing this. Don't hesitate to try a few different things and combinations on. Compare them to see which one would be better again. A good way to do that is to show you potential users to different possibilities. Also, try to remove as much friction on unnecessary steps as you can. One organizing your stories. For instance, he we could have asked the user to choose the filter before taking the picture. But asking the user to take the photo first is easier. He doesn't have to think making the first step of the flow very easy will maximize the chances of him completing the task. So we'll go back to selecting a future after taking the photo. All right, that's it for this lesson. Now take a piece of paper right the gold story off your core feature using this template on , then break down the flow step by step, using simple terms on Lee and the next video, we'll use a great tool that will allow us to take into account the use of psychology to make sure that we're building an engaging app. So sees him. 9. A bit of psychology: welcome back in this lesson. I want to show you how using a bit of psychology can help you craft an engaging up will do that by working on the feed narrative we saw earlier that one of the pains the potential users had was that pictures on platforms such as Twitter or Facebook are last in the massive amount of mission. On that, our solution to that would be to create a feed off foot was only let's think about that future and its narrative using a tool I like called the Hook model. These canvas was created by Nuri Al Was an entrepreneur and writer, writes mainly about business and psychology. There's a link to his blood in the description. It's full of great insights. He calls this canvas the hook model because this framework is designed to help you build a product that will get people hooked. It's mainly useful for consumer products, but can still lead to an interesting reflection if you're working on a beach view product. After all, be to be clients are humans as well. This canvas is made of four boxes. The trigger, the action, the viable reward in the commitment his canvas as every tool that I give you. And this course isn't the FISA downloaded. You can print it on use. Post its to fill it. Let me just make some space here so we can start feeling this canvas trigger is pretty self explanatory. It's something that triggers the use of your product for us. It's when a user sees or does something cool it wants to share with other people. This is an Internet trigger, because it's something the user feels that triggers the action. But before the internal trigger becomes effective, you usually would have to set up external triggers like notifications that would remind the user they can post to our app the photo as just taken. For instance, OMON action is that the user and ancestors picture on chairs it priest it forward. Next up is viable reward. This is where it gets really interesting. Studies have shown that when we worked to get reward, our level of dopamine is at its higher point. Not when we get the reward, but before that, why we're working to get the rewards. What gets us excited is that we're expecting something on. This is where it gets even more interesting. The same studies have shown that our level of dopamine goes through the roof when the reward is not predictable, when it's not always the same. In some cases, it can be powerful enough to shut down the areas of the brain associated with judgment and reason. While activating, the parts are situated with wanting and desire. Think about slot machines, for instance. Not knowing exactly what we're going to get gets us really, really excited. So what could be a great variable reward for us? Well, since people share pictures because they're looking for the people validation intention, the like mechanism seems perfect. It's very simple. It's a one click action from the viewers on it allows the user to see how much validation it gets in a very simple way on This is how our AB becomes an addictive game where the goal is to find the coolest thing to share, to get the more approbation we can. All right, so lax usually come with common, so let's not give the users and in frustration. The last books is commitment this commitment phase as two goals. I'm quoting Nuri al here. The first is to increase the odds that the user will make another passed through the model when presented with next trigger. Second. Now that the uses brain is swimming in document from the anticipation off the reward in the previous phase, it's time to pay some bills. The commitment generally comes in the form of asking the user to give some combinations off time, data effort or money. The commitment implies an action that improve the service for the next go around. Inviting friends stating preferences, building virtual assets on learning to use new features are all commitments that improve the service for the user. What we can do here is to redirect the user to his feed so that he sees other people's pictures and give him the opportunity like them is himself, waiting for people to like his pictures. So it would be more inclined to do the same for other people's pictures on. By doing so, he'll encourage this people to continue using our app. Seeing other people's cool pictures will also entice seem to post some more pictures of his own in the future, so there should be a good basis for our feed narrative. Okay, so the gold story of the feed will be asked. Kevin, I want to be able to see my friends pictures on give them feedback so that they know I'm giving them validation. I opened the app on access my feet off my friend's pictures. I can like my friend's pictures on I can come in on them. We can also updates our men action narrative and add. My picture is shared on my followers feed. That would probably be enough for the first iteration, but let's pretend for the sake of the course that we've done a few durations and gotten some feedback from the first users on. One thing we had not thought about is that our product works great when lot of people already in using it on that each user as many friends on the app. But right now, the first chooses feel quite lonely on their not getting much feedback. So a solution do that could be to allow the users were using the app, but we don't know each other to see each other's pictures. This will be the explore section. Let's try to narrative for that as Kevin. I want to be able to see other people's pictures on Give them feedback. I can access interesting pictures from people were not my friends. I can like the pictures and I can't comment on them. Let's use what we've learned with the hook model to make this story but more interesting being published in this interesting pictures from other people section could also be a variable reward, a kind off deck. But reward if we say that you have to get a high number of likes to get this reward. This will entice people to take very cool pictures to invite their friends to use the app so that they can like their pictures on to interact a lot with people in the So let's a bit . The main action. My picture is published to the explore section. If I get a high number of likes In the case of Instagram, there's two more main stories here they are, but there's no need for us to spend too much time on these right now. It's impossible at this stage to be sure that you have all the stories because things will evolve as you design, but also because you have to actually flow through it in a using to face to see what's missing, assume that you'll be uncovering good chunk off new stories while designing the user interface. Also, keep in mind that even if we've organized narratives in silos, users will actually jump around back and forth between these different sealers. What's great about this process is that it's not only a way for you to understand what you'll be designing. It's also where to prioritize and organized work when you or someone in your team will actually be coding the app on a giant screen. Methodologies used user stories as the center of the gun ization off the development of the products. So that's cool. A final quick word on making user or potential users bright. This narratives, um, reasons why it's interesting. Once you've pitched them your solution, they might have very different mental representation of it on they might think about things off lows that you haven't thought about. They would also phrase the stories in their own domain specific language on make comparisons specific to the dumbing on. Finally, they will have a nave approach because they won't think about technicality when you might be referring yourself because of that. But you cannot just rely on that as detour AM said. Good design is innovative. Andi. I'm sure you've heard what Henry Ford supposedly said. If I had asked people what they wanted, they would have said Faster horses. That's it for this lesson. It's your turn to write your stories using the hook Middle if you can. Off course you're up won't necessarily have the same Collins and features that every app has a feed or profile. For instance, try to keep as few columns as possible. I wanted to give you a general overview off Instagram's flow, but at first, Instagram didn't have all this. Remember to focus on Onley what's really necessary to make your core feature work? 10. Part 1 Project: All right. Congrats on completing the first part of the course. I really, really hope you enjoyed it on. If you have done these day to leave us a review, that'd be amazing. And just in case to leave a review is how you do it. Just click on three dots here on day, leave a review, and there you go to recommend this class. Yes. Okay, So your project for this year X research section is to come up with the basic user stories for your one feature, the one that your APP will be focused on. So in order to do that, you can use all the tools who studied in this section to use a persona, the brainstorming techniques for their solutions, the hook model, um, and then upload the final goal story on the detail steps off the story for you Key feature Exactly what we did for our app. I remember to use this template for the gold story. That's it, guys. See you in part two of the course there's going to be really exciting. Will start using sketch to design the actual interface of Europe. See you very soon.