The Importance of Testing in Mobile App Development: A Step-by-Step Guide to Ensuring a Smooth User Experience

As a developer, testing is an essential step in ensuring that your mobile app is user-friendly and functions as expected. In this article, we will walk through the process of creating a full-screen presentation, identifying potential issues, and iterating on the design to ensure a seamless user experience.

To begin, let's start with the layout of our app. We want to make sure that our app has a clear and intuitive design that guides the user through the various screens. In this case, we have a stock details page that is crucial in determining whether or not a user will invest in a particular stock. The user will click on the "InVEST" button, enter the amount they wish to invest, and then proceed to the next screen.

However, upon further inspection, we realize that our current flow is incomplete. We need to add additional screens to guide the user through the investment process. To do this, we return to our design and create a new layout that includes the "Proceed" button. When the user clicks on this button, they are taken to the summary page, where they can review their investments.

On this summary page, the user will have the option to enter their secret pin and proceed with the investment. However, we notice that the "InVEST" button is not active on this screen. Upon closer inspection, we realize that there is an issue with the navigation destination for this button.

To fix this issue, we go back to our design and make some changes. We set the tap event for the "InVEST" button to navigate to the successful investment page. When the user clicks on the "Proceed" button, they are taken to the summary page, where they can review their investments. If they click on the "Go back home" arrow, they will be taken back to the homepage.

However, we also want to make sure that our app handles different scenarios correctly. For example, if the user clicks on a recent transaction, such as a withdrawal, they will be taken to the transaction details page. The user can then complete the transaction and return to the homepage. We also want to ensure that our app is accessible from all screens, including the bottom navigation component.

To achieve this, we add an "invest" link at the bottom of the screen that takes the user to the investment page. This way, even if they click on the wrong link, they will still be able to access the investment feature. We also want to make sure that our app handles different outcomes correctly, such as when the user clicks on a link and is taken to a new page.

In this case, we create an arrow at the bottom of the screen that takes the user back to the homepage. However, we realize that this arrow is not active and needs to be fixed. We set the tap event for this arrow to navigate to the homepage, ensuring that it functions correctly. By following these steps, we can ensure that our mobile app is user-friendly, intuitive, and handles different scenarios correctly.

Creating a full-screen presentation

As I come back here, I will see that I have that layout. And that sorted. Now when I come back here, you will see that I have that here. So let's go back to our full screen presentation. So if the user likes what they see here in the stock Details page, the user will go ahead to click on the InVEST button here. And when the user does that, the user will enter the amount that they would like to invest in that stocks with. When the user does that, the user will go ahead to click on the Proceed button here.

Now that flow is not created. So I would come back to our design here, I would click on this Proceed button here, click on prototype. And now let's see what the problem is. So I came here and I clicked on this connection link here. And I changed this from on drag to on top. Now when I come back here, and I click on the Proceed button here, you will see that we are taken to the Summary page.

Now this page will be the page where the user will see a summary of the investments that the user is about to make. And if the user is OK with this, the user will go ahead to enter their secret pin here and then click on the InVEST button. Now the InVEST button is not active also outcome here and out see the problem for that.

So I would click on invest here. And I would select the connection flow here. And as you can see here, there is an undo drag event here, outcome here. And I'll delete that on drag event here. And I'll just leave this set to tap now. But the tap event, there is no navigation destination.

So I would set this. First of all out to take note of the screen here. This is the successful investment page. So I would come here and I would go to the successful investment page. And when the user clicks on the Proceed button, they will be taken to the summary page. The user can then enter their secret pin and proceed with the investment.

The importance of testing in mobile app development

Testing is a crucial step in ensuring that your mobile app is user-friendly and functions as expected. It involves identifying potential issues and iterating on the design to ensure a seamless user experience.

In this article, we walked through the process of creating a full-screen presentation, identifying potential issues, and iterating on the design to ensure a seamless user experience. We also discussed the importance of testing in mobile app development and how it can help you create a user-friendly and intuitive app.

By following these steps and incorporating testing into your development process, you can create a mobile app that is both functional and enjoyable to use.

Conclusion

In conclusion, testing is an essential step in ensuring that your mobile app is user-friendly and functions as expected. By creating a full-screen presentation, identifying potential issues, and iterating on the design, you can ensure a seamless user experience. Remember to incorporate testing into your development process to create a mobile app that is both functional and enjoyable to use.

By following these steps and incorporating testing into your development process, you can create a mobile app that meets the needs of your users and sets your app apart from the competition.

"WEBVTTKind: captionsLanguage: enIn this course you will improve your user interface and user experience design skills  by building a mobile app. Instructor, Joseph Brendan is a great designer and great teacher.  Hey, guys, my name is Joseph, Brandon. And in this course, I am going to show you how to design  a mobile app from scratch. Now, this mobile app will be a stock investing mobile app  that users can use to invest in the stocks of companies that they would like to invest in.  So here is a demonstration of the app that we are going to design. Now over here, we have  the splash screen of the app, which is what's going to show up when you launch the app. Now,  let's go to the next page here. Now, this is the page where the user will have to select  their next action, which is either to log in as an existing user or to get started as a new user.  So I'll go ahead and click on get started, just like a new user would do. And here on this page,  the new user will be required to sign up to this application with an email address, a phone number  and a password. Now, when the new user doors that the new user will be taken to this page, where  the new user will have to enter a verification code that's been sent to the phone number of that  new user. Now, when the phone number of the new user is verified, it means that the new user is  now a registered user on this application, and the next thing the user is going to do is to click on  the Proceed button here. And when the user does that, the user will be taken to the homepage of  the application, which is this page here. And here on the homepage of this application. Over here,  the account balance of the user will be displayed here. Also, the user will have a button here  that can be used to fund the account on this application. And right over here,  the user will have a list of recent transactions that they have carried out on this application.  Now coming down here, the user will see a banner here that they can click on to get a referral link  that can be used to invite friends to have an account on this app. Now, at the bottom here,  we have the navigation section of this app. Currently, we are on the homepage of the app.  Now let's navigate to the InVEST page, which is the page where the user will have the features  that they can use to invest in stocks. So I'd come here, and I'll click on invest. When I do that,  I'll be taken to the InVEST page, which is this. And over here on the InVEST page,  you can see that we have a display of cash and assets owned by the user.  And right after that, over here, we have a list of top stocks that the user can invest in.  And also, we have the investment portfolio of that user over here, which is a list of all the  investments that the user had made on this app. Now let's say the user is trying to invest in one  of the stocks listed here, let's say this one, yeah. Now, if the user clicks on it, the user  will be taken to the details page of that stock that they clicked on. And on this details page,  we are going to have information about the stock and the company that owns the stock.  Now if the user likes what they see here, the user will go ahead to click on the InVEST button here.  And when the user clicks on that button, the user will be required to enter the amount that they  wish to invest in that stocks with. Now when the user enters the amount and the user clicks on the  Proceed button here, the user will see a summary of the investment that they are about to make. And  when the user is okay with what they see here in the summary. The user will be required to enter  their secrets pin here, and then click on the InVEST button here. And when the user does that,  it means that the investment has been successful. So this app that I just demonstrated here is  what we are going to design in this course from scratch. Now before we start designing this app,  I would love to break down the stages of our workflow for this project, so that you can  understand In the execution process of designing products that are actual business solutions.  So here are the stages of our workflow. First things first, the stakeholders of this project,  which is the owner of the project, or the company we are working for,  will present us with a problem that they would want us to design for. Now, when they present  these problems on us, they are also going to tell us about the users, which are the people facing  the problem that they want us to design for. Now, after that, the stakeholders will state  their expected goals for the project. Now after the stakeholders presents a problem and states,  their expected goals to us, the next stage of our workflow will be for us,  the UX designers to empathize with the users. Now after we empathize with the users patient problem,  we are going to create what we call a problem statement. And after creating this problem  statements, the next stage of our workflow will be the stage where we will have to come up with  ideas that can be best business solutions to the problems highlighted in the problem statement.  Now, when we are able to get an idea for the problems in the problem statement,  the next action will be for us to design that idea into a testable prototype. And after  designing that idea into a testable prototype, we will go ahead to test the design to be sure that  it is able to solve the problems in the problem statement. So let's get to work. Now outcome here  in figma. And I'll use a fig jam file to walk on all the analytical parts of our workflow.  So let's create a fig jam file. And to do that, come here and click on the new fig jam File button  there. When you do that, you have created a junk file as easy as that. And I'd like to mention that  if you are new to using fie jam, you have nothing to worry about. It's a really simple tool to use.  Just follow along, and you'd see that at the end of this course, you would be good with using  feature. So I'll close this. And the next thing I'll do after creating a fifth gem file is to give  the fifth gem file a name. So I'll call this stocks, big jam, you can call it whatever you  want to call it. Now after giving this junk pile in him. The next thing to do is to outline the  stages of our workflow here in peach jam. So let's do that. So first things first out, zoom into 200%  outcome here to zoom in and out Select Zoom to 200% here. And when I zoom in to 200% out,  use a square shape here to write down a headline for our workflow. So I would  keep this there, I would select the text to now so that I can write my text. And I would say,  workflow stages, then outcome here, and I'll align the text to the left. And I'll change the color of  the rectangle to this. And that. Okay, so the next thing I'll do is to have sticky notes,  were out outline the workflow stages in. So to create a sticky notes in peach jam, I would  come here and now select the sticky note tool here. When I select it out, come here and out,  click on the big jam Canvas to have this. Now let's select this. And let's expand the width  to align with our sticky notes. So first things first, I will change the color of my sticky notes  to this, then I'll click on this Add text placeholder here. So that I can write down  all of those workflow stages that I talked about. So I would like to make this a list. And I'd like  it to be a bulleted list. So I would come here and I would select the bulleted list property  here. Then I would write down the first workflow stage, which is this, it says stakeholders present  the problem and the users facing the problem. Now I'll create another list item, which is going to  be the next stage of our workflow. And that's going to be where the stakeholders will define  the goals for this project. So I would say define goals. Let's come here. Let's create some space  here. Now let's outline the next stage of our workflow. After the goals are defined,  we view X designers will empathize with the users. So let's come here. Let's create the space also.  Now After we the UX designers empathize with the users, the next stage of our workflow will be  where we are going to create a problem statement. So I would say, creates problem statements.  So let's come here, let's create the space. Now after we create a problem statements, the next  stage of our workflow will be the stage, where we are going to come up with an idea that can solve  the problems listed in the problem statement. Now, after we come up with a best idea that can solve  the problems in the problem statement, the next stage of our workflow will be the stage where  we are going to design that idea into a testable prototype. So I would say design prototype here.  And after we design that idea into a testable prototype, we are going to move over to the  next stage of our workflow, which is going to be the stage where we are going to test  that idea that we have designed into a prototype. So I would just call that test and  have that spaced. Now we have outlined our workflow stages here. So just to make this better,  I would select all of these and I would make all of the text bold. To have that outcome here,  I would select this text, and I'll make it bold also. Now zoom back to 100%. To see what we have,  and this is okay, so I'll use the hand tool, which is this, you can come here to click on it to  select it or just press the H key on your keyboard to have it selected. And now grab and shift a  canvas to this point. So now we have outlined our workflow stages here right. Now the next thing to  do is for AWS to outline all of the actions that will be taken on that each of this workflow stage.  So this means that we are now going to break down each of these stage one after another, so that we  know what actions to take at each of these stage and how to optimize for our results. So I would  select the Move tool here by clicking on it or by pressing the V key on my keyboard to select it.  And I would come here, I would select the square tool there so that I can create  this shape like this. And over here, I would write a text inside this shape. And that text will be  this first stage out select all of this text here, then I'll use CTRL. C, if you are using a Mac,  its command C, I would use that to copy that text. And I'll paste it inside this question like this.  Now expand this to this point. Now this is the first stage of our workflow right outcome here  now. And I'd have a sticky note here, right under that. Now in this sticky note out write out what's  going to happen at this stage, which is the first stage of our workflow. Now this stage is the stage  where the stakeholders will present the problem to us. And also let us know about the users that  they want us to design for. So in this course, I would like us to assume that we have a stakeholder  somewhere or we have a company somewhere that wants us to design an app that you can use to  invest in stocks for them, right. So I'll paste this in here in this sticky note,  which says users find it really hard to invest in stocks using existing investment apps due to  information overload and complex presentation of information on the apps. Now, who are the users,  the users are stock investors in Nigeria. So this so having this here means that the stakeholders  have presented us with a problem and the users facing the problem. So this is sorted.  So let's change the color of the sticky notes. Something like this to differentiate it from  this one here. And let's come here. Let's change this, to that to differentiate it also. So this  is the first stage of our workflow. And we have seen what's going to happen here at this stage.  So let's look at the next stage here, which is the stage where the stakeholders will define the goals  of the project. So I would come here, I would select this and now duplicate it to duplicate  is Ctrl D. If you are using a Mac, its command D. So I'll duplicate this and our habits to here.  I will take out this text inside this shape. And out writes define goals there.  I can have in brackets saved by stakeholders. So I'll keep this here. Now outcome here also out  duplicates these and out habits, they're right on the dish shape, which is a square shape,  right. So inside the sticky notes, I'll take all of these out and out. also assume that  we have stakeholders somewhere who sent us the goals. That's the ones for this project.  So let's assume that the stakeholders sent us this as their goal. And it says, research and help  us us simplify every task needed to make a stock investment. So what we have here so far is this,  the stakeholders have presented us with a problem and B users facing the problem. And they have  gone ahead to define their expected goal for this project. And the expected goal is that they want  us to research and help users simplify every task needed to make a stock investment. So let's move  over to the next stage of our workflow, which is the stage where we the UX designers will have to  empathize with the users facing the problem. So I would come here, I'll duplicate this,  I would have this here. And I would say empathize. Now I have this here also. And I'll take out all  we have here. And at this empathize stage, this is actually the stage where we the UX designers  will now get to work. So what do we do at this stage? What are the actions  that we need to carry out at this stage, so that we can say that we have properly empathized with  the users facing the problem. So what we are going to do is to interview the users  face to face or send out surveys digitally to the users. The purpose for that is so that we  can understand the problems from the perspective of the people facing the problem. Now after that,  we are going to create what we call user personas, all under this empathize stage. So out, make this  a list, just like this, to have that organized properly. And when we are done with the empathize  stage, by carrying out these two actions here, the next thing we are going to do is to move over to  the next stage of our workflow, which is the stage where we will have to create a problem statements.  So I would come here, I would have this here. And I'll change that to create problems statements,  and have this stay here. So at this stage, where you the UX designer will be needed  to create a problem statements, what you do to create a problem statements, it's easy,  just state the problem of the users with all you have gathered from the previous stage,  which is the empathize stage. So after you have interviewed the users to understand the problems  from their perspective, and you have created user personas for each of the user, what you  do is you'd use all of that data to properly state the problem that the users are facing.  Now when you create the problem statement, which is you stating the problem properly,  the next thing you do is to move to the next stage of our workflow, which is the idea stage. Now,  when you get to the idea stage, let's have this here. When we get to the idea stage,  the actions that you take at the idea stage are simple actions. All you'd have to do with this,  launch a brainstorming session, then during the brainstorming session,  vote for the best idea, when you vote for the best idea, select the idea with the highest votes.  And there you have gotten an idea that you can then take to the next stage of our workflow,  which is the stage where we are going to design that best idea into a testable  prototype. So before we go there, let's select this and let's make it a list like this.  Now, let's come here and let's look at the next stage here, which is the design prototype stage.  And when you get to this stage, what are the actions that you need to take for you to properly  design a workable prototype, we are going to look at the actions now. So out have this the here I'll  take all of these out. And the actions that we are going to take to properly design a prototype are  all of this. First things first, we are going to create an information architecture for the  best idea that we got from the idea stage. When we create that in commission architecture, we  are going to use that information architecture to create what we call a low fidelity prototype. Now,  after we create that low fidelity prototype, we are going to test the low fidelity prototype.  And when the test is successful, we are going to go ahead to create a high fidelity prototype  for that best idea that we got from the idea stage. Now, after we create the high fidelity  prototype, we are going to move over to the next stage of our workflow, which is the stage where  we are going to need to test that high fidelity prototype. So I would come here, I'd have this  here, I would say test prototype. And I'll bring this here, I can just say usability testing here.  And that's all. Let's come here, let's make all of these illest. And that's okay. So what we have  here is a proper breakdown of our workflow. So I like to connect all of this so that we understand  that these stages are to be followed one after another. So I would select the connector tool  here, you can see where my mouse cursor is on, click on it to select it, I would come here out,  select this point, click hold and drag. And I would connect with this other point here,  I would select this also connected here. I'll do that for all of these other items. Also,  I would have all of them connected. So we are going to design our products by following the  breakdown of this workflow. So now that we have outlined our workflow stages, and we have broken  down all of our workflow stages like this, the next thing we need to do is to start executing  each of the actions that we have outlined here, one after another. So let's get to work. So the  first stage of our workflow here is the stage where the stakeholders will present us with the  problem and the user space in the problem, right. And as you can see, that stage is sorted, because  I assumed that a stakeholder presented us with this problem and the users facing the problem.  So this stage is sorted. Now over to the next stage, which is the stage where the stakeholders  will state their expected goals for the project. And that is sorted also, as you can see here,  I also assumed that the stakeholders has stated the expected goals to us, which is to research  and help us simplify every task needed to make a stock investment. Now over to the next stage,  which is the stage where we the UX designers will get to work. And that is the empathize  stage. And under the empathize stage here, these are the actions that we need to take. The first  action is to interview the users face to face, or send out surveys digitally to the users. Now  in this course, since this is a lesson, I can't show you how to set up a face to face interview.  But I'll show you how to create a digital survey using Google Forms. So let's do that.  So I would come here in my browser, and I would open a new tab, then come here, I would click on  this menu icon here so that I can access my Google Apps out scroll down and out, click on forms here.  And when I do that, I would come here and I would click on Blank there, then a blank form will be  created for me. Now I'll give this form a title. I can call it stock app UX survey. And that's its  outcome here also, and I'll give the form a name. So I can call the form stock up UX survey also,  or you can give it any name at all that you want to give it. Now the next thing I would  need to do is to have a form description just to describe what the survey form is all about.  So outcome here, and I'll have this and it says this survey is carried out by best  technologists. And it is aimed at improving the experience of users who want to invest in stocks  from an app without having complex steps. Now you can come up with a better description when you  are doing this in real life. Now after that out, start passing in the fields that I want the users  to give me a response to, and the first field out have here will be an email field. I'd like  to collect the email address of everyone that will take part in the survey. So that's going to be my  first field here. So to collect email addresses outcome here. I'll click on settings here.  Then I'll expand responses here. You can see the responses section here, I'll expand it.  Then in front of this collect email addresses option here, I'll turn on this toggle button,  just like that. And that's sorted. Now when I come back here, you will see that we have an  email field here, which is going to require the user to enter their email address here.  And as you can see, there is a red Asterix there, showing that this is a mandatory field,  which means that anyone taking this survey must have to enter their email address.  Now let's move over to the next question that we are going to ask anyone taking the survey?  And that's going to be us asking them to enter their full name. Yeah. So I would come here,  when I type that in, I would change this from multiple choice to shut answer just like that,  then I would come here and I would turn on this toggle button to make this field a required field,  meaning that anyone taking this survey must have to enter their full name. And that's  sorted. So I would come here and I would click on the plus sign here to add another question.  Just like that, then this question will be country of residence. Now, this is important, because  coming from what the stakeholders presented us as a problem and the user space in the problem,  we could see that the stakeholders are actually trying to solve a problem for people living in  Nigeria. So it is important to ask anyone taking the survey from where they reside. So if someone  from Germany takes the survey, by mistake or happenstance, then it means that when we  are collecting the data from the survey, we are actually going to ignore that person's imputes.  Because the person is not based in Nigeria. So that's why it's going to be important to ask  this question. So I would come here and I would make this required also. Now make sure this is  set to short answer also, then I would come here and I would click on this button to add another  question. Now this question is going to be us asking anyone to can be surveyed enter  their age. And this is also important, because usage of apps, and the experience behind the usage  of apps differs by age range. So I would ask this question, and I would set this to short answer,  then I would make this a required question. So I would go ahead and add another question option  here. So that I can ask my next question, which is going to be us asking whoever is taking the survey  to enter their profession? I would keep this short answer. And I'll make this required. Then I'll add  another question here. And this question is going to be us asking, have you invested in stocks from  a mobile app? Now this is going to be a yes or no answer. And Google Forms automatically suggest  this because I have a question mark at the end of the question. Now outcome here, and I'll click on  yes as my first option. And I'll click on No as my second option, and that's going to be fine. Then  I'll come here and now make this is a required question. Then I'll add another question here,  which is going to be select the goals you always love to achieve when investing in stocks from a  mobile app. Now, I'll have that in brackets. Same select more than one. Now outcome here,  and I'll make sure this is a checkbox option. Now mimicking this checkbox option is because I want  the person taking the survey to select more than one answer. So I would come here,  I'll type in my first option, which is going to be invest quickly. My second option will  be found my wallet with more than one option. The third option will be withdraw my dividends  quickly, the fourth option will be easily access transaction history. And the final option here  will be to save time. So this is me asking anyone taking this survey to tell us what they would  love to achieve more when using a mobile app to invest in stocks. So these are all the options  that they can choose from and from the answers they select. We the UX designers will understand  what to focus on when designing and what not to focus on when designing. So I would come here  and I would make this a required question also. And that's fine. And I'll add another  question here. Which is going to be me asking anyone taking this survey this question it says  select the frustrations you face when investing with the app you are currently using to invest  so out also good Give them the option to select more than one answer here. And I'd have checkboxes  selected here. So the first option here will be complex and unnecessary graphs, the second  one will be long time to invest. And the third option will be excessive ambiguity of information.  The fourth option will be on friendly user interface. And the final option will be difficulty  in funding wallets or accounts. Now, this is us asking whoever is taking the survey to tell us  the problems that they have with any investment app that they're currently using. Now from what  they would select here, we the UX designers will understand the problems to tackle and what to  completely avoid when designing our own investment up. So outcome here and I would make this a  required question also. And the final question, or the final request out have in this survey is  to have the person taking the survey to upload their picture. Now, this is not going to be a  mandatory field, we are going to make it optional if they like the upload if they like they don't.  So I would come here out, click on the plus sign that add question. And I'd come here and select  File Upload. Now outcome here, and I'll click on Continue. And I would come here and I'd say upload  your image. And I would make sure this is not set to required. That's because I want it to  be optional. And that's fine. So at this stage, I'd like for us to preview this survey to see  how it will look like when it is sent out to the people facing the problem. So I would come here,  and I would click on this button here, you can see where my mouse cursor is on, when I click on it,  I would have a preview of the survey. And this is it here. It looks okay. So let's come back here.  And let's click on send. When you click on Send, you'd have this pop up show up here. Now you'd  come here and you'd edit this message, just in case you want to send this as an  email to whichever person you want to send it to. So you would come here and you'd say, vest,  technologies there, you put in your own company's name, best technologies, has invited you to  fill in a survey for UX research, or whatever you want to say there. And that's fine.  Now this option is only when you want to send this survey form an email directly to people,  you would come here and you type in their email address. Let's say you type this in,  you would use comma then type in the next email and the next email and the next email. Now,  if you don't want to send this as an email, you have the option of sending this also adds a link.  Now this option will make it possible for you to put this link up on your social media or send it  through WhatsApp or send it through any other app to the public so that anyone that stays in Nigeria  can stumble upon the link and take the survey. Now to do that, come here and click here. When  you click there, you'll see the link here. Now come here and click on this checkbox that says  shorten URL. When you do that, you'd have a shorter link. Now you'd come here and just copy  this link. When you copy it, then you can post it on LinkedIn, you can post it on Twitter, you can  post it anywhere you want to post it, you can send it to anyone. And when they click on the link,  they will be taken to the survey form for them to take the survey. Now when they take the survey,  you will be having the option to see the responses here. All you do is come back to the form,  click on responses and you'd see all of the responses over here. Currently, I have zero  responses. So what's going to happen is out take this survey myself, I would take it twice, so that  I would have two responses. And I'll use those two responses to continue our research process. Now  take note in real life, you'd have more than two responses. So I'll pause this video here. I would  go ahead and out. Take the survey myself twice. So I have taken the survey by myself twice. And these  are my responses. As you can see here we have this field that says who has responded and these are  the emails of the people that have responded and these are their full names and all of that now,  this summary tab here in the responses section will just give you a full summary of all the  responses. Now for you to attend to one response at a time, come here and click on the individual  tab appear. When you do that, then you can come here and select the individual responses based on  their email addresses. Currently, this email is and@xyz.com. And, and all of these responses here,  all of these answers are the answers of this particular user. If you want to see the answer  from any other user, come here and select that with the email of that user. If I select  chicks@xyz.com, you will see that I would have all of this show up here. Now, as you can see here,  this is the email of chooks. And this is the full name of trucks, trucks, EK, and the country and  city of residence is Nigeria, Enugu, the age is 24. The profession is importer. Have you invested  in stocks? Yes. Have you invested in stocks from a mobile app? Yes. Select the goals you always  love to achieve when investing in stocks from a mobile app. And Chuck said to invest quickly to  one my wallet with more than one option to easily access transaction history and to save time.  Now, the next question here is select the frustrations you face when investing with  the app you are currently using to invest. And chucks says, long time to invest complex  and unnecessary graphs, excessive ambiguity of information and non friendly user interface.  Now, for the other user, which is n, you can see the email of the user here and the name of the  user is M for lucky. And the country and city of residence is Nigeria Lagos. I know in my initial  survey form, I did not include city of residence, actually. But I just had to include that so that I  can target the particular location where the user is staying. And the age is 24. The professional is  mural artist. Have you invested in stocks? Yes. Have you invested in stocks from a mobile app?  Yes, select the goals you always love to achieve when investing in stocks from a mobile app and MCs  to invest quickly to find my wallet with more than one option is the access transaction history save  time and for this question here and select long time to invest complex and unnecessary graphs,  excessive ambiguity of information and non friendly user interface. Now at the bottom here,  you would also see that the date of submission and the time of submission is recorded. So I'll  come back here. And I'd also like to let you know that you can, you can export this response  to a spreadsheet. Now, I would advise you that if you want to do that, come here, click on summary,  then click on create spreadsheets. When you do that, you'd have this option to select,  create a new spreadsheet or select existing spreadsheets. Now, if this is your first time,  just create a new spreadsheet. Now I'll keep that now out, keep that selected, come here and out,  click on Create. When I do that, I'll have a new tab launched. And as you can see, all of my  responses has been exported into the spreadsheets. Now you can also choose to come here and make your  analysis from the spreadsheets. And that's okay. So after you create your surveys and send them out  and the users or the people that you sent them out to send in their responses, you would go ahead  to create what we call user personas for each and every user that sent in a response. So at  this stage, I'd like us to see how to create user personas and take notes. Creating user personas is  an action you take while you're at the empathize stage. Now just understand that this empathize  stage is the stage where you get to know the users better and understand their frustrations better.  And that's because it's only when you understand a problem better that you can come up with a better  solution for that problem. So let's go ahead and let's see how to create user personas for each  of the user that sent in a response to our survey. So I would come here now. And I would select the  text tool here. And I'd have this here, I would say user personas, I would keep that selected.  I'll change this text from a normal text to a sub heading text. And I'd make this bold, then I would  come here and I'll change the color of this text to that. So this is going to be our user persona  section. Let's duplicate this. Let's come up here. Let's call this section, workflow break down.  However you want to call it, it's fine. That's okay. So I'll just scroll down to the user persona  section. And the first thing I'd have here is the image of the user that I want to create a  persona for. So I would come here, I would select the square tool here to have a square shape here,  which I am going to use to place the image of that user in. Now this is necessary, whether the  user sends in an image or not, you can just have these here, if the user does not send in an image,  then you leave this blank, go ahead and do the rest. But if the user sends in an image,  then you place the image in here. Now there's one way to place an image  into a shape here in feature, all you have to do is keep the shape selected, right click on it,  then go to plugins and use the Unsplash plugins for that. So I would come here,  I would launch that plugin. And I would come in here and I'll type in African woman. So I can have  an image of an African woman show up there. So I'd come here and out select this. And that's okay.  So the next thing to do is to have all of these details about this person who has this image.  Now the name here is an felucca, the country and city is Nigeria, Lagos the age is 24  Professional mural artists. Now, over here, I would say an is a mural artist  resident in Lagos, Nigeria, and is also a stock investor who invests in stocks with existing stock  investing apps in Nigeria. And this is like his summary about her personality. Now, I'll go ahead  and out highlight her frustrations with the existing investment apps that she used in Nigeria  and out also highlights the goals that she aims to achieve with an investment app. So outcome here,  now have this here, outpaced this. And over here, these are the things that she wishes that she had  as an experience with an investment app. And these are her current frustrations. Now all of these  details about an was gotten from the response that she gave us when she took this survey that  we created. So you can see how this connects. So let's go ahead and let's create a user persona for  the other user that took the survey. So that is going to be chooks. So I would come here,  I would have this shape here. And I would run the Unsplash plugin on that shape. And I would type in  African man. And I would go with this here. And that's okay. So I would have this hair for chooks.  This is his name, and his country and city, age, profession, and all of that out also highlight  his goals and frustrations. And that's fine still. So what we have done so far is this,  we have concluded the empathize stage, we have gotten to know about the problem from  the perspective of the users. And we have created user personas for each user that took our survey.  So we are going to move ahead to the next stage of our workflow here, which is the stage where we  are going to create a problem statement based on all we have gathered during the empathize stage.  Now this really makes sense because you can create a better problem statement when you  understand the problem better. And the way to understand the problem better is to empathize  with the people facing the problem. And that's what we have done. So let's go ahead and let's  create a problem statement based on what we have learned. So I'll duplicate this outcome here,  I'd say problem statements. And for me going by all we have learned from the empathize stage,  this is my problem statement. My problem statement states that users are frustrated with  existing investment apps, as a result of excessive ambiguity of information and complex steps. These  consents negatively affect the experience of these users. Now, this is my problem statements and  this is the problem that our try solve. So, if we come up here, you will see that we have empathized  with the users and we have created a problem statement. So the next stage of our workflow is  the idea stage, which is the stage where we have to come up with an idea that can solve the  problems that we have in the problem statement and what actions are we to take at this stage.  So at the idea stage, the first thing we are going to do is to set up a brainstorming session  where we are going to invite other designers, product managers, business managers Lawyers,  software engineers, and so on and so forth. Now, when we invite all of these people, we  are going to present them with enough information about the problems in the problem statement, and  ask them to come up with ideas that can possibly solve the problems in the problem statement. Now,  when each and every one of these people that we have invited, come up with an idea,  the next thing to do is to read out all of these ideas to everyone and call a vote for the best  idea. Now, the idea with the highest votes should be selected. And when that is done, it means that  you are ready to move to the next stage of our workflow, which is the stage where you'd have  to design that idea into a testable prototype. So before we move over to this stage here, I'd like  to come here out also highlights that this stage is the idea stage. This is the idea stage. And  since this is going to be a brainstorming session stage, and obviously I can't have  a brainstorming session here in this lesson, it's going to be something that you'd set up  with the people you want to set it up with, beat on Zoom discord, beat real life, anyhow, you want  to set it up, that's fine. So I'll just highlight this stage here. And what I'm going to do is,  I would assume that I conducted a brainstorming session offline, just so that we can learn better.  And I'd also assume that during that brainstorming session, we arrived at an idea. So I'd have this  here selected idea. And I would paste this as our selected idea. Now this is the selected idea for  this course, it says Create an investment app where graphs are represented with text, where  users will have the option to fund the account and wallet via bank transfer or their debit cards,  where recent transaction history will be easily accessible. And were plain and easy to understand  English will be mostly used. Now if you look at this idea, you'd see that this idea  solves the problems that we have in this problem statements. And this problem statement was gotten  from all we learned during the empathize stage. And we were able to learn all we learned during  this stage because we created a survey form and sent out the survey to use us so you can see how  everything connects. So now that we have an idea that we can use to solve the problem, the next  stage here is the design prototype stage. And at this stage, the actions that we need to take all  of these First things first, we need to create an information architecture for this best idea that  was selected during the idea stage. So I would come here, I would scroll down to this point.  And I would have this here, I'd say information architecture. Now before we create the information  architecture, let's understand what an information architecture is and why it is important  to create one. So the information architecture of a mobile app is the way you organize and arrange  information on the mobile app that will help the users have that mobile app to accomplish their  task on that mobile app without a bad experience. So it is in the information architecture,  that you will decide what features and what information we exist on each page of the app,  and each step of the app. So let's go ahead. And let's create an information architecture  for this idea. Now, the way to start creating your information architecture is to first of all,  define the goals of the users who will use the app, then define the task that the users  have to complete to achieve their goals on the app. So outcome here, and I'd have this here.  So this here is the goal of the user to invest with a good experience. Now the user task here  are the actions that the user will have to take to achieve this goal. Now, what are the task,  the user will have to sign up to the application as a new user or log in as an existing user  then fund their account or their wallet, then use the fund that they have in their account or wallet  to invest in any stock of their choice. So if they can accomplish this task, this task  and this task, it means that they have achieved that goal on that app. So after defining the  goals of the user and stating the task that the user has to complete to achieve that goal,  we are going to go ahead to create our information architecture flow, and for the sake of time out,  speed up this process, and I'll explain it so that you can understand. So what we have here is our  information architecture flow. And our zoom in so that I can break down this flow one after another  and also show you how to come up with a flow like this. This is the start point of the flow. This is  where the user launches the app. So when the user launches the app, the user will have two options,  one to sign up and want to log in. So let's go with the signup flow here. Now, if the user is  trying to sign up, the user will be required to sign up with their email address, phone number  and password. And after this step, the user will have to verify their phone number. Now, after the  phone number is verified, the user will be taken to the homepage of the application. When the user  gets to the homepage of the application, the user will have all of these options here. And the first  route or the first option here will be the menu icon, which will be on the homepage. The user will  also have the account balance displayed on the homepage, the user will have a fund account option  that they can use to fund the account still on the homepage. And still on the homepage. The recent  transactions by the user will be displayed there on the homepage. Now, still, on the homepage,  we are going to have a referral banner. Still on the homepage, we are going to have an invest route  that the users can take if they wish to invest in stocks. Now still, on the homepage, we are going  to have a transact option, just in case the user wishes to deposit or withdraw. So all of this is  on the homepage. Now let's look at the flow of the first item here, which is the Menu icon. Now if  the user clicks on the menu icon, which is on the homepage, the user will see all of these options,  recent transactions, card management, investment portfolio request statements and settings. Now,  just for the sake of those who don't know what a menu icon is, if you go to an app or a website,  using your mobile phone, you would always have this icon here at the top that when you click on  it, you'd have a drop down or you'd have a menu bar sliding from the left or from the right now,  that's what we call the Menu icon. And most mobile apps have that. So this is going to be all that we  show up when the user accesses the menu icon route now for the account balance, or that's going to  show a base available balance. And that's all. Now for the fund accounts option. This is the flow,  the user will have to choose a method. And this is important for the experience. Because  from our user research, it was clear to us that the users actually want an experience  where they would have the option to fund their account with more than one option. So when they  choose a method, then they would go ahead to find the account with that method that they have  chosen. So that's what the fund accounts route right now for the recent transactions route.  All the user will have when they access a recent transaction will be the transaction details.  And that's okay. Now we have the referral banner option here. And when the user access the routes,  they would have a referral promo code that they can copy you know and send to a friend to join  the app for all of that and all of that. And that's fine. Now we have the InVEST route here.  When a user accesses this route, the user will see a list of stocks that they can invest in  and will also see their stock portfolio that they had invested in. So if the user access one of the  stocks that's been listed, the user will see the detail for that stock. And if they like what they  see in the detail, they will go ahead to invest. And that's a good flow. So if you come here,  we have this route here, which is the transact route. When the user accesses this route,  the user will have the option to make a deposit, which is also like funding the account you get.  And the user will also have the option to make a withdrawal from the account. So this is just  the basic information architecture flow for this app. And it is always important for you to create  this information architecture, so that you will understand and organize the steps that the user  will take on the app. It is also important so that you can also streamline the core features that  each page Your app will have. Now if you remember, that was the signup proud, the login routes is  still the same, because all you have to do here to login is just enter your email address and your  password, then you'll be taken to the homepage. Still, when you get to the homepage, every other  theme is the same. So that's that if you have any questions on the information architecture here,  draw my attention to it. And I'm there to help. So if you come here now, in our flow breakdown,  you'd see that under the design prototype stage, we have created our information architecture.  The next action at this stage is to create a low fidelity prototype of the best idea using the  information architecture. Now before we do that, I'd love to explain what a low fidelity prototype  is. So a low fidelity prototype is a dummy version of your final design for an app. Now,  the question you may ask is this, why do we need to design a dummy version? Now this is it.  Designing a dummy version is important because at this stage of trying to figure everything out,  your design, and your design process can be subject to lots of changes, and imputes from the  stakeholders. Now, it's just like building a dummy house first, before you build the main house. Now,  if you use paper to build a dummy house first, before building the main house, it's going to be  a lot easier when the owner of the house comes to make a correction or comes to make a change.  Since it's a paper, you don't have much to lose, all you have to do is just tear it and put it  back in seconds. But if you go ahead to build the main house first, and the owner of the house comes  and says, Okay, I don't want this design here, I don't want that there, it means that you'd have to  break down that part of the house and rebuild that part of the house with all of the resources that  you have put into building that part of the house. And that's going to be a lot more hectic compared  to you using a paper to just build a prototype or a model of the house. So that's basically  what a low fidelity prototype is. And that's why it is important for you to have a low fidelity  prototype, then take that to the stakeholders for correction and changes and imputes and all  of that. Now, when the low fidelity prototype has been accepted and agreed on, then you can go ahead  to design the real app itself, which is the high fidelity prototype. So let's go ahead and let's  see how to create a low fidelity prototype of our best idea. So we are going to do that using  a figma design file. So I would come here, I would go to figma. And I'll create a new design file.  And I'll call this stock investment app. And out come here and out, rename the page one to low  fidelity. And this page is going to contain all our low fidelity screens. So let's go ahead and  let's start. So to design low fidelity screens is easy. And it is easy because you don't need  a design system for that. Like you don't need a style library. To do that. You don't need a  component library. To do that. You don't need all of that, all you have to do is focus on the  user task. So if you come here, you'd see that our user task on this app is to sign up a login  on your account or wallet and invest. And if a user accomplish all of these tasks, it means  that the user will achieve their goal on this app, which is to invest in stocks. So we are going to  design a low fidelity screams around these user task. So let's come back here and I've picked  my design file. And let's see what it is to create low fidelity screams, all you have to do is select  the frame tool, then go with any template of your choice, I would go with iPhone 13 Promax,  and not have that. So the next thing I'll do is to just come here. And since this is going  to be the splash screen, I'll just have this logo stay here out align it to the center,  horizontally and to the center vertically, then I would go ahead to create the login screen,  the signup screen and all of that. And actually, the way I like doing it is this, I like to segment  the screams into categories using the user task. This section or this segment should  be four authentication screens. So I'll go ahead, speed up this process and have other screens here.  Then I'll explain how I came about all of that. Now before I do that, I may have missed something  here. I know some people who are new to fit jam may not understand how these connectors are  created. Now all you have to do is use the connector to select it, click on the point, then  you connect it anyhow, you want to connect it, you can take your connector anywhere,  connect any shape that you are trying to connect, and that's fine. And when  your connector is created, you can actually play around with it, you can click on it to select it,  grab the points, take it up, take it down, anyhow, you want to play around with it, it's fine.  Now you can also select the connector and change the color of the connector, just like this. So all  of these connection lines were created using the connector tool here. So let's go back to our figma  design file. And out pause this video here and come back with all of our low fidelity screams,  then I'll explain further. So what we have here are low fidelity screens for the authentication  task. So let's zoom in. As you can see, here, we have the splash screen, which is this. Now  after the splash screen, we have this screen where the user will have to choose that authentication  action, which is either to login or to sign up. Now to create this button here, you don't need to  use an auto layout or any of that, all you just have to do is select the rectangle to like this  created anyhow, you want to create it, then come here, select the text to and you can just say  login or sign up or whatever you want to have. They're just like this. That's how I created  this. And I did not have to come up with a color. And it's advisable for you not to use colors when  creating your low fidelity screams. And that's because if you have colors chosen, it may distract  the stakeholders when you are presenting the low fidelity screams to them at this stage,  all you should focus on is the user experience. So having colors or making the low fidelity  screams look good, may distract the stakeholders away from the user experience. So that's how I  came up with the buttons there. And here also, this impute fields, I just use the rectangle,  the rectangle to create a rectangle shape there, I added a stroke. And I took out the field color  and I had that then I had a text inside there saying email just like that. And this button,  we know how to do that. I duplicated all of this. And I had one more field here for the phone  number. And my button is still here. Then here we have this field for a verification code. And over  here I have the Verify button that Okay, so all of the screens here are for the authentication  task. Now let's scroll down to the next task, which is going to be the fund wallets task. And  that task actually will happen from the homepage. So that's why I created a low fidelity  version of our homepage. So you can see that we don't have too much of  information here. So if I scroll down, you'll see that I have the fund accounts pop up action here.  Now this element is going to show up when a user clicks on fund accounts here. When they do that,  this pop up will show up for them to choose the method that they want to fund the account with.  And that's okay, so this is easy to create, just have a rectangle like this and have your  text inside of it. Then the background of this navigation section is also a rectangle  that I had across the screen like this, and I changed the color to something like this,  just like that. That's easy. So over here, this is a rectangle also with a text on it. And I have a  rectangle here with a corner radius of 16 px. And that's okay here, we know how to create a button.  And this is just text. Now for this icon here, I got that from an icon plugin, I used the feather  icons plugin to have that sorted. So this task is complete, we have the font accounts button here,  which if a user clicks on it, you will have this pop up show up like this. Now let's move over to  the next task on our app. And the next task here is to invest. So if I come here, and I scroll  down, you'll see that I have this screens for the InVEST task. Now this is the section for that we  have this page here we have this icon we have this text here. Now I have this section which is like  the list of stocks to invest in. I have this search bar here. I have this search field here  which is also easy to create. All you have to do is create a rectangle give it a corner reduce of  let's say 16 Or let's say 816 is a lot. Then come here take out the the fill color and give it a  stroke Hello, and you have that, then you have a text inside there, that's really easy to create,  then I have the list of stocks here. So I just have a rectangle here also with this text on top  of it. So it's also easy to create, all you have to do is just have something like this,  then give it a canary use of 16, then take the color down the beats to this point, then have  your text written on top of its plot away, then keep this here, then have this plus 234 percent.  They're all any number that you're okay with. So that's how I created this. And if you scroll down,  you'll see that we have the your stock portfolio section, which has this also, we know how to  create this. And over here we have the navigation section. And that's okay. So the next page here,  let's zoom out a bit. The next page here is the stock Details page. Now, this is all assuming that  a user is interested in this stock here, you can see where my mouse cursor is on. So if a user is  interested in this stock, and the user goes ahead to click on it, this details page will show up  for the stock showing the details of that stock and the company that owns the stock, you'd have  the company logo here. And you'd have the stock percentage and all of that there, you'd have the  interest for that stock, minimum cap volume, about the company, the valuation rank and all of that,  then you'd have an invest button here. And I think by now we know how to create all of the elements  here. Now, if a user clicks on the InVEST button, they would go to this page where they would have  to enter the amounts that they wish to invest in that stocks with. And I believe on this page here,  we know how to create all of the elements that we have here. Now, if a user clicks on  the next button here, after entering, the amount they wish to invest in that stocks with the user  will be taken to the next page here, which is going to display the summary of the investments  they're about to make. Over here, they would have the amount that they typed in here, display here,  the minimum cap, the interest value, and so many other details, and so many other details that are  not listed here. Now, if the user is okay with that, the user clicks on the Proceed button, and  the next page that user will be taken to is the success page indicating that that investment  is successful. Now the user will have the option to click on the back to home button here. And  that's that it means that that task, which is the Invest task has been successful. So for us  to properly present low fidelity screens like this for testing and for impute and for opinions. And  for all of that. For us to properly do that, it means that we need to make a prototype of this  low fidelity screens, so that we can present them properly for testing and for imputes from  the stakeholders. So let's go ahead and let's do that. I'll click on the prototype option here.  So let's start with the splash screen. So out select out, click on the splash screen  to select it. When the splash screen is selected, you'd have this point here, all you have to do is  click on it, hold it and drag it to the screen of destination. So I would want the users to go  from the splash screen to this screen here. Now when I connect this splash screen to this other  screen here, you'll see that figma will bring up this interaction details card for us. So that we  can set the mode of our interaction. So over here I have the On Click event. And the action  for that onclick event is a navigate to action. So what this means is that when the splash screen is  clicked, we are going to navigate to this screen here, which is iPhone that in Promax two, this  is the name here actually, you can actually it is advisable for you to rename all of your screens,  that's the best way to do it. So this practically means when the splash screen is clicked on,  navigate to this other screen, which is this one here. Now we have an animation section here that  we can set the animation of that transition or the animation of that navigation. So  currently to set instance, I can come here and set this to smart animate,  then set this to ease in and out and out. Set the animation delay time to 800 milliseconds,  just type in 800 there and press the Enter key on your keyboard and figma will add the milliseconds  for you. Now this animation settings is optional. The most important thing here is that we have set  the event and the action that will be triggered by that event, then we have sets to destination frame  for that action. And that's okay. So that's sorted. Now outcome here, out, click on this  button. And I will say, okay, when a user clicks on this login button, they should go to the login  screen, which is this. Now for the Interaction Details, ugly with set like this. This is the  setting we had before now. So I'll leave it set like that. Now, for the sign up button. When a  user clicks on the sign up button, it means the user is a new user. So I would like that user  to be taken to the signup page, which is this one here. Now, when the user goes to the login page,  and the user enters their email and their password, it means that they would have to  click on the login button. And when they click on the login button, I'd like them to go straight to  the home page, which is this. Now remember, for a user to log in, it means the user is an  existing user. Now, when a user selects the Sign Up option here, it means the user is a new user,  and the user will have to enter their email address, phone number and password right.  Now when they do that, it means they would have to have their phone number verified first. So  when the user clicks on sign up, the user will be taken to the verification code page.  And when the user's phone number is verified, the user will then be taken to the homepage. And  that's fine. So you have seen that we have created the authentication flow. So let's come over here  on the homepage, let's work on the next task. Now the next task is to fund the accounts, right.  And to fund the accounts, the user will have to click on the fund accounts button. Now when  they do that, we are going to want a pop up to show up on the screen. And that pop up should  show this card here that will that will require the user to choose the method that they want to  fund their accounts with. Let's come here in our Interaction Details. Over here, it's an  On Click event. That's okay. Now, over here, we have the Navigate to option. And that's not what  we want, we want a popup to show up on that same screen, we don't want the user to leave that page  that the user is on, we want the user to still stay on that page, but have a pop up show up. So  how do we make that happen, we are going to change this from navigates to to open overlay.  When we change it to open overlay, we are going to come here and select the center option, because I  would want this pop up to stay at the center of the screen here. So over here, I would keep this  selected, which is closed when clicking outside and out. Also keep this add background behind  overlay options selected, then for the opacity of the background overlay out, keep it set to 25%.  Now for the animation, you can still keep it set instance or come here and select any other option  of your choice. So that's okay. And we are okay with that. Now, if a user selects bank transfer  or debit card, they will be taken to another page where they would have to process that transaction  method. So you can also come here, if you don't mind, let's click on Design, you can come here and  duplicate this page and and create a low fidelity screen for that you can call these bank transfer.  And you can have whichever element you want to have here. And you can go ahead to have  the debit card page also that the user will go to when they select the debit card option here.  But that's not the point here. So I'll take this out. Now we are done with the fund wallet  task. So the next task is the Invest task. And this task will happen from the homepage.  It is when the users go to the homepage, that they would click on this invest option here for  them to go to the InVEST page so that they can invest in stocks. So from this homepage here,  outcome held click on prototype. From this homepage here, I would select this invest button  here. And I'll create a connection to this page. And that's okay. So when a user clicks on that  invest button at the navigation section there on the homepage, that user will be taken to this page  here, which is the Invest page where the user will see the list of stocks that they can invest in and  their stock portfolio. So if a user comes to this invest page, the task we want them to complete  is to invest So let's say the user is cool with this stock here and the user wishes to invest  in this stock, I would select it, then I would create a connection  like this. This means that when the user clicks on this stock, the user will go to the stock details  page for that stock. And when the user is okay with that stock details that the user sees here,  the user will click on the InVEST button here. And the user will go here to this other page,  where the user will have to enter the amount that they wish to invest in that stocks with.  And when the user enters the amount they wish to invest with, the user will click on  the Next button, which will take the user to this page here where the user will see a summary  of the investment the user is about to make. And when the user is okay with all the user sees here,  the user will click on proceed and the investment, which is the task  will be completed. So what we have here is we are done creating a low fidelity screens. And  we can present a low fidelity screens for testing now. So how do we do that, I would come here,  I would select the splash screen, because that's where the whole journey starts from right? When I  select it, I would come here, and I would click on this presents button here to have that presented,  a new tab will be launched for that. So I would come here, and I would click on the Enter full  screen option here you can see where my mouse cursor is on. Now, this is the presentation,  I would present to the stakeholders, which are my employers or the owners of the app. So I will  take this presentation to them to demonstrate the user experience that I have come up with that will  enable the users to accomplish their task on this app. So I would go from here, I would click on  this screen. And I'll explain to the stakeholders at this point that existing users can click on  login. And new users can click on sign up. So I would demonstrate these as a new user, I would say  okay, when they click on sign up, they would come here enter their email, phone number and password.  When they click on the Sign up button, they would have to enter a verification code. And when they  are verified, they would go to the homepage. Now, if they want to invest, it means they have to fund  the account. So I would click on the fund account button to demonstrate to them that in this case,  now we have a bank transfer method and debit card method, I would say okay, if the users go ahead  to fund to fund the accounts, then it means the users are ready to invest. So for them to invest,  they would come down here and click on the InVEST button there. When we use that those that the user  will see list of stocks that they can invest in. And if the user chooses to invest in any of the  stock, let's use this, for example, they would click on it, when they click on it, the user  will be taken to the stock details page for that stock. And when the user is satisfied with the  details of the stock, the user will click on the InVEST button here, then the user will be required  to enter the amount they wish to invest in that stocks with when the user does that, the user will  click on the Next button here. And when the user clicks on that next button, the user will see a  summary of the investment they are about to make. And if the user is satisfied, the user clicks on  the Proceed button here and the investment will be successful. And when the user is done,  the user clicks on back to home, and the user will be taken back to the homepage. So a presentation  like this will really reveal the experience that the user will have using this product. So if  your low fidelity prototype has been accepted by the stakeholders, it means that it is now  time for you to go ahead and start the process of designing your high fidelity prototype, which is  going to be like the real design version of your app, or the final design version of your app.  And it is at that stage that you'd focus on themes like colors, typography, effects, components,  library style library, and all of that. So in this course, let's assume that our stakeholders  gave us a pass for these low fidelity screams and they are okay with it. Let's assume that our  stakeholders now want us to go ahead to design the real version of the app. So what do we do? Let's  click on Design. Come here. Create a new page and call this Hi Fi deleting. So at this stage,  I'd like to welcome everyone to the most interesting part, which is the part where we  start building our designs from scratch. So first things first, I'll go ahead to create  my style library. And I will start by creating my typography styles. So I will do that using  the Material Design version to guide. So I would come over here, I would go to material.io.  And when I come here out, click on Design. When I click on Design out, come here on the left side,  and I'll click on typography, then I would select the type system. And when I do that, I would come  here. So the first thing that I would have set is the typeface or font family that I want to use  for this project. For this project, I would love to use the rubric font family. So I would come  here, and I would select it here for headlines and subtitles, then I would go ahead to select  it here for body and captions, just like that. Now I'll use the data here in this type scale  to create my typography styles. Now let's start with creating headline textiles for this project.  Now since this is a mobile app project, I won't see the need to have a headline one text,  same for the headline to text. So I would go with the headline for textile as my own headline  one textile just because this is a mobile app design and this size of text is going to look  too big for a mobile app. So I would come here out click on headline for and I would use these  details here. So I would come here I'll create a frame here where my textiles are going to stay in  so I would say headline one a duplicate this out say headline one bold. So outloud say  headline two now this is me getting everything set before I start applying the details that  out get here from the type scale generator. So outcome here out, duplicate this and out see  headline to bold and out come here out have this out see a headline three. And this is going to  be headline three bold, and that's going to be that for my headline textiles for this project.  Now I'll go ahead to have my body textiles. So I would come here out, prepare this for body large.  And I'd have this be a body large bold textile, then I would go with  body small here. And I'd have this as Bodhi small bald. Now this is my own style. And this is my own  pattern. I am not saying this is the standard out there. I'm just doing this because this is what I  feel will give me the best design. Now come here. This will be for my button text and I'll have a  caption text. So after having all of this set out, come here out select the headline one text here.  And I will use the headline for textile here in material design. Just like I said I would use this  for my headline one textile. So the font family sets Rubik, the width is set to Normal, which is  regular, the size is set to 35. And the letter spacing is set to 0.25 px. So I would go ahead and  I would have all of these sets. So I would come here keep this selected, how to set this to Rubik  and how to set this to regular and for the letter spacing out come here and out set this to 0.25 px,  and for the size out set it to 35 px. Now I'll use these same settings for this headline one text for  the headline, one bold text, the only difference will be that this is going to be a bold text and  this is going to be a regular text. So I would select this. Now to set this to 35.  I would set this to beak and I'll keep it set to bold like I said, and I'll make this 0.25 px  and that's okay, so I'll go ahead and now do same for headline to headline three body large  body large bowed down to the caption text. Now for the headline to text here, I would come here  in material design and I would use the headline five textile for my own headline to textile. So  the font families Rubik, the weight is normal, the size is 24. So I would set the size to 24.  And for the weights out, keep it set regular and for the font family. I'll keep it set to  Rubik. Now the letters business zero px, so I can just keep it set at 0% or just come in here  and type in zero px, and that's fine. I would use the same setting for the headline to bold,  but the difference will be that this is going to be a bold text So I would come here, I would set  this to 24. Send this to Rubik. Keep this set to zero, keep the letter spacing set to zero,  and then keep this sets bold. So I can have that. Now for my headline three text. If I come here,  I'll use the headline six textile here for my own headline pre text. So I would keep this set Rubik,  this set to medium size set to 20. So I'll keep the size set to 20. And for this, I'll keep it  set to medium and outside this to Rubik. Then for the letter spacing, it sets 0.15 px. So I would  come here, I would say 0.15 px. And that's going to be cool. Then for the headline three bold,  I would have the same sentence there. But the only difference as usual will be that  this is going to be a bold text. So I would come in here, outside this to rubik cube assets board.  And for the size, I think it's 20 px, and for the letter spacing is 0.15 px. So I'll type that in.  And I'll keep this set to 20 Just like this. And that's okay. So for the body large text,  come here and use the body one textile here, you can see that the size is 16 px,  the width is normal, and the letter spacing is 0.5 px. So I'd come here, keep this here, I would set  the letter spacing to 0.5 px outsets, the weights to regular and outset these to 16. And  out set this to Rubik and that's okay, for the body large board, you know what to do already,  how to set this to 16, set these to 0.5 px, set this to bold, then set this to Rubik.  And that's it. So I'll go ahead and out, have my body small text here. And if I come here and  material design out, use the body to textile here material design for that. So I'll keep it set to  normal set the size to 14 and the letter spacing to 0.25 px. So I would have this set to 0.25 px,  I'd set this to 14, out set this to Rubik, and I'd set this to regular. So I'd have this here.  And this is going to be 14 0.25. And this is going to be Rubik. And that's sorted.  Now for the button text. I'll keep this here. If you come here, you'd see that the button text here  has a size of 14 px and a letter spacing value of 1.25 px with a weight that is set to medium. Now,  over here, material design to the button text is all in uppercase. But in my case,  I won't have my text stay in uppercase. And I think in material design version three,  the button text is not represented in uppercase. So I would go ahead and I'd have this set of 14.  And the letter spacing is pretty big. So I would have that set to 1.25 px. And  this will be set to medium with the font family sets to Rubik. And that's what we have here.  Now for the caption text, it's going to be set to 12 px with a letter spacing value  of zero points for PX and a normal weight. So I would come here, I'll keep this here.  And now I have this sets regular, this will be 0.4 px. And this will be set to 12 Just like this.  And the font family will be set Rubik. So this is going to be a caption text. So at this stage,  what I'll do is I'll go ahead to save all of these styles that I have created  to my style library. And I think we all know how to do that by now. So I would  speed this process up, I would select this column here, and I would call this headline one out go  ahead fast forward this part of the course and come back. So this is it, I have created and saved  the textile that I would need for this project. So I would come here and I would rename this frame  typography styles, just for better documentation, you know, now when I click on my empty canvas,  you would see that I have all of my saved textiles over here. Now let's go ahead and let's create a  color styles out. We'll name this frame to color styles. I'd save that now out create my color  styles based on my meat. I want to make use of the Material Design Guide to create my color styles.  And that's because you can actually do that. You can create your color styles your textiles you  can create any of your styles without using the Material Design Guide And you can actually mix it,  you can create your textiles with the Material Design Guide and have your color styles created  from your own inspiration. So outcome here, I'd like to have a background color here.  So I'll use this my background color, or have a text stay at the top here to indicate that this is  for my background color, I would select this text and I would make use of one of my saved textiles.  So I'll go with the body large text there. So for my background color style, I'd like to use  this color. And that's good. Let's zoom into this point. So we can see clearly, and after  having a background color, I'll duplicate this use this here, I would love to have a surface color.  And for my surface color, I'd like it to be this color here, you can use any color of your choice,  this is my own choice. So I'll duplicate this, and have this day here. And this time,  I'd like to have a surface text column, you can call this an on surface color, actually.  So I'd like to have a surface text color, which is going to be the color that I'll use to write  text on the surface color. So I'd like this to be white. Actually, I know this may not be visible.  But I'd like that to be whites just like that. So I would duplicate this. Now for us to make this  visible out, select it and add a shadow effect. The next color that out heavier, we called the off  text column. And that's my own choice, I'd like to have another color for my text. So I would use  this shade for my off text color. And duplicate this. And I'd have another color here, which is  going to be my error column. And obviously, this is going to be a red color. So I'll use  this shade of red for that, then I'd have this here. And I'd like to have a second surface color.  And I'd like that color to be just like this. And that's fine. So I have selected all of the  color styles that I would want for this project. So I would go ahead and I would save all of these  styles to my style library. And I think we all know how to do that. So I would select this column  here. And I'd call that background color, I would speed up this process and I would come back to it.  So as you can see, I am done creating and saving my color styles. And these are my color styles  here. So that's sorted. The next thing I'd like us to do is to go ahead and create the grid style  that we are going to use for this project. So to do that, I would use a mobile layout, I would use  the iPhone pattern Promax layout, so I would have the iPhone 10 Promax layout here, I would rename  it to mobile grid style out zooming to this point, I'll keep it selected, then I'll add a layout grid  property to it, just like that, then I'd have this big column grid. Now I have the count before I  would have the margin be 16 out have the gotta be 16. And for the color out go with something like  this. Now, we are sorted for the column grid. So I would go ahead and add a row grid property to it.  I'll keep it selected still come here. Now to add another grid property that outset,  as a row grid property, just like this out, set the count to 800. And out set the stretch  to center out set the gutter property to zero out come here, I will set the height property  to eight. And that's because I want the space between the row lines to be eight px, then outcome  here now change the color something like this. And that's going to be okay for me. So I would  keep this selected. Come here. And I'll save this grid style as my grid style for this project. So  I'll click on style there. And I'll call this mobile grid style. You can call it whatever you  want to call it. Now we have three styles saved to our style library, we have our textiles, we have  our color styles, and we have agreed styles. So I would like for us to go ahead and create shadow  styles for this project. To do that, I would come here out have a frame here. Then I would  rename this to shadow styles, when I renamed that to shadow Stiles out have some rectangles  right inside that frame. And the rectangle is just to display the shadow effects and how it's going  to look like. So I'll keep that selected. I'll make the corner radius to have a value of eight.  I'll give it this column. And I'll duplicate this and have this here. I'll just have three  shadow effect styles. So I'll keep that there and outcome here in material design. Now,  go to the homepage out, click on the Search icon there and I'll type in shadow. When I press the  enter key out, have these results show up. So I would come here, I would click on this link here,  that's going to take me to material design version one, bear out make use of the recommendations that  they have there for creating shadow styles. So I would click on that link. Now come here,  and I would use this shadow recommendations that's under the sketch section. So I want to go with the  one DP elevation table here, I'll scroll down, and I'll make use of the 16 DP elevation table.  So I'll use these values here to create my shadow styles. So I'll create a key shadow and an ambient  shadow. Now on that key shadow, you can see that we have two types of key shadow styles. We have  the Umbra key shadow style and the penumbra key shadow style. So I'll create an ombre key shadow  style first, and for that the Opacity value is set to 14. So I would come out keep this selected,  I would add an effect property, and I would set the Opacity value here to 14, and the X property  is set to zero with the Y property set to 16. So outcome here for the Y property out set this  to 16, the X property has already set to zero. Now the block properties 24, and the spread properties  too. So for the block property out, set it to 24. And for the spread property out set it to.  And here we have our umbrella key shadow effect. So I would go ahead and create for the panel,  Brad key shadow effect and the MPs shadow effects. So I would speed up this process also, and I'll  come back when I'm done. So these are the shadow styles that I have created. So I'll go ahead and  out, save them to my style library, the way to do that is pretty easy. Select this rectangle there,  then come here in the Effects section, click on that style icon there. And you can call this  whatever you want to call it out call this light shadow out cold this other one here,  mid shadow, and out cold this peak shadow and that's okay. So far, I have my textiles created,  I have my color styles created, I have my effects styles created and I have my grid styles created.  Now at this stage, we are ready to start designing the components for our app. So I would like us  to go ahead and start that. So the method I would like to use in the designing of our components  will go like this, I'd like for us to design our components based on the user task of this  app. Now the first task I'd like us to look at is the authentication task. So for this task,  I'd like us to design all of the components that will be needed to complete this task.  So let's come up here, let's have a text here, I would zoom in to 200. And I would have a  text here, this is going to be the section where I would have all of my authentication components. So  I would come here, I would select this textile to have that there. So for the authentication task,  we have the login form and the signup form. So for the login form, which components do we have there,  we have the input field, and we have the button. So I would go ahead to design the input field.  So I would come here, I'll just say, inputs. Now this is going to be my placeholder. So I would  come here and I'll use the body small text for that. And I would keep it selected, then create  an auto layout on it. Now when I create an auto layout, and it out, add the fill color, like this,  then I'll just stretch it to this point. Now I'll still keep this auto layout selected,  come here and make sure that the content of the auto layout is aligned to the left. And that's  fine. Now for the corner radius property, I would give it a corner radius value of eight to have  that now outcome here and I would rename this to impute field. Now while this is here, I'll select  the background color for the input field itself, then the text here, I'll give it this off text  color here. And I'd like this input field to have a stroke color, which is going to be the color of  the off text also. So I can have this. Now this is sorted, we are done with creating a imputes  field. This impute field is what we are going to reuse for the collection of emails, passwords,  phone numbers, so I'll go ahead keep it selected and out, come here and click on Create components.  Now the next thing to create will be our button components. So I would come here and I would have  this text here and for that text outcome here now to select the button text for that Now I'll keep  the text selected and I'll create an auto layout on the text. Now outcome here, for the Button Auto  Layout out, make sure the padding around items value is set to 16. Now, same happened for this,  the padding around items value for this input field is also 16. So take note of that. Now for  this button components outcome here now give it this color, which is the surface color. Now for  the text, their outcome here, and I'll give it the surface text color, which is white. Now outcome  here, I would select the button auto layout, come here, now align the content of that auto layout  to stay at the center. Still keep it selected, come here and give it a corner radius of eight.  And there we have our button components created. So I would come here out, rename this to button,  then come here and click on Create components. And there we have created our button components. Now  the next component I'd like for us to create here under the authentication task will be the input  field, but the users will have to impute their verification code in now that input field will  not look like this, it's going to look different. So I'd like for us to go ahead and do that. So  I would come here, out of habit text here, let's just say zero. And I'll keep the number selected,  then go ahead and create an auto layout on that number. Now I'll keep the auto layout I just  created selected, come here and align the content of the auto layout to stay at the center of the  auto layout, then I'd come here and add the fill color to that auto layout. Now I'd come here, I  would select the pencil. And I'll just draw a line horizontally, then I'd click on Done. And this  line I just created here will be grabbed and taken into that auto layout that has that number zero.  And you can see that the line is placed here. Now what I'll do is this outcome here, inside this  auto layout, now I would select this straight line that I created, which is called vector one here,  when I select it, I would come here and now change its horizontal resizing value from fixed width to  fill container. So that I can have that now I have a problem here, the padding around value for this  auto layout is really big. So I would select the auto layout outcome here and I would set it eight.  When I set it to eight, it's going to look like this. Now I'd like it to be like this,  because if I am placing these components on my screen, I would most likely increase the width.  And as you can see, when I increase the width, the number zero just stays the way it is. But  the line itself stretches across the container, which is actually what I want. So this is okay,  now, now seems the verification code will be a four digit verification code, I like to have this  component go into four places. I'll go ahead and do that. So I'll keep this component selected.  And I'll create another auto layout on top of it like this. Now this auto layout that I just  created is called prim to out, keep it selected, come here and now it sets its direction property  to horizontal direction. When I set that to horizontal direction, I would come here  and I would set the padding around items value to zero, just like that. Now outcome here now expand  the frame to auto layout. Now just so that I can access the frame one Auto Layout inside of it. Now  when I select that frame one Auto Layout inside of it, I'll duplicate it. And you can see that I have  duplicated this into four places. Now I'll come back here how to select the frame to auto layout,  and how to set the spacing between items value to zero, just to have this now let's check to  see if this auto layout itself is a responsive auto layout. So I'll keep it selected still an  outcome here and I'll try to expand it. And as you can see if I expanded horizontally, the layout  itself is not responding to that expansion. So I would Ctrl Z to go back to how we were before.  And at this stage, what I'm going to do is this out, select the individual sub Auto Layout inside  this main Auto Layout out select this one, which is frame one outcome here now to set its  horizontal resizing value to pill container. And I'll do that for all of them just like that. Now  when I select the frame to auto layout now and I increase the size horizontally, you will see that  it's all responsive. And that's what I want. So I would keep this here, I would rename these two,  verification imputes keep it selected, come here and click on Create component and that's sorted.  So at this stage, I'd like for us to go ahead and create our authentication screams. So let's  create a section for that. Not a page actually. I'd say authentication screams authentication Hi  Fi screens just like this. So I would come here, I'd have an iPhone that in Promax screen here,  and I would rename this, make sure you rename your layout at this stage. So I would rename  this to splash. And we all know what the splash screen is. Yeah, that's the screen you see,  when you launch an app for outcome here, I'll change the color of the splash screen to this.  And on the splash screen, I'd like for us to have the logo of the brand. And the logo of this brand  is really easy. It's just VXS t, just like that. So I would keep the text selected outcome here,  now go with the headline to bold, and I'd work with this. So I'll keep that text selected,  come here and align it horizontally and align it vertically. And that's okay. So this is our splash  screen. So after the splash screen, the next screen to create will be the screen where the user  will have to select the authentication action. So I will duplicate the splash screen, I'll  take this out. And I'll change the color of this screen now to this, then come here and rename it  of selection. You can call it whatever you want to call it. Now over here, out, bring in the button  components out, go to my Assets panel out, bring this in and out, align it to the center  horizontally, now expand it to this point. Now for me to expand it properly, I would need to  apply my grid style on this layout. So I would come here and now apply my mobile grid style here.  So that I can use this as my guide to properly expand these buttons. So I'd like the button  to take up two column grids. And that's what I have here. So I would come here, I'll change  the text to login. And I would bring in another button components here. And I'll change these to  get started. Now outcome here, select this button components and change its color to this  just to make a difference. So I would keep this here. And I'll keep this here.  And that's fine. So I would select this, and now align it to the center vertically.  And I'd bring this in place this Get Started button right under this login button. But I'll  use the row grid to ascertain the space value out give to that. So I have 1234 rows here,  and it's into four places is 32. So I have a 32 px bottom margin space between this login button  and the get started button. Now I think the row grid is not really visible. So I would come here,  I'd go to my row grid saved style, I'd click on Edit style out, select rows and out,  increase the opacity of that color to 20. So this is sorted, this cream is sorted. Now if the user  goes ahead to click on the login button here, it means the user will go to the login page, right.  So I'll create that now. So let's zoom in. Let's take this out. And let's click on layers  and change the name of this frame to log in page. And what I'll do is this when I zoom in,  I'll bring this here. So what I'll do is I'll just have logo stay here, out, come here now to select  headline to bold, that's too big out GUI headline three board, that's okay. So out align it to stay  at the center horizontally, and I'll bring it down to this point, then I'll change the color to this.  Now what I'll do next is to have my login form created. And I'll do that with my input field  here, which is this. Now I'd like this input field to stretch from here to here, just like that.  Now, this input field would have a label here. So I'll just give it a label here that says enter  email address. I'll keep label here. Now the space between this liberal and this input field is 16 px  have two row spaces between this label text and this input field. Now for the input field, I'll  change the placeholder text from inputs to enter email address. That's okay. So I would come here,  I'd have another input field here, which is going to be used for the password. So I'll change the  placeholder here to enter password. And I'll give this input field its own label or duplicate this.  And first of all, I would say okay, the space between this input field and this liberal text  should be 1234568 times six is 48. So I'd like a 48 px margin space between this input field and  this liberal text. So that's sorted. Now I'd like a 16 px space between this liberal text and this  impeach field. So I would come here and I'll edit this from enter email address and password. That's  okay. let's align this properly. So the next thing I'd have here is the login button. So I'll bring  a button component here. And for this button components, I'd like to have your margin space  here of that two px. So it's going to be 1234. So I'll bring this here, place this there. And  let's zoom out, let's stretch this to this point and stretch this to this point, then I'll change  the text of the button to login. Let's see how it looks. Okay, this doesn't look really good,  the spacing is not really consistent. So I'll zoom out. And I'd have the space between this label  text and this input field to be 32 px, actually, so it's going to be 1234. So I'd have that stay  there. And I'd have this stay here. Then I'd have 123456, which is 48 px. So let's see. Hi, looks.  So this looks okay. Now, I like us to have a text here, which is going to be the forgot password.  txt, forgot password. So let's keep this here. And let's have that stay 16 px away from this input  field and 16 px away from this button component. So I would select the text, and I would make sure  it is a body small text. And that's okay. So I'll just zoom out, you can see that we have that. So I  would go ahead and create the signup page for our authentication task. So I would come here, I'll  click on layers, and I would rename this to sign up page. And if you come here, the only difference  we are going to have here is the fact that we are going to have an additional input field to collect  the user's phone number. So this means that I'll take this out for now, take this out for now.  And I'd have another placeholder here, which is going to have a margin top space of 32 px,  which is 1234. I'll bring this here and out, bring in an input field, which is going to stay here,  then out, stretch the input field to this point. Now I'll use this second input field to collect  the user's phone number. And I'll change the placeholder here to phone number, then I'll use  this thought imputes field to collect the user's password, just like that. Now I'll go ahead and  I'll bring in a button here. And this button is going to have a 48 px margin top space,  it's going to be 123456. I'll bring this here. And I'll change the text here to sign up. So I'll zoom  out, I'll keep this selected out, stretch this to this point and out, stretch these to this point.  And that sorted, so we have created a login screen and our signup screen. Now when the users click  on the Sign Up button here, the users will be taken to that page where they would have to enter  the verification code that was sent to their phone number. So we are going to go ahead to create that  page. So I would come here and out rename this verification page. And I'll take all of this  out over here. After the logo, I would have a rectangle that's going to be that's going to  be this big. I like the rectangle to be 48 px tall rectangle, just like this out, zoom out,  or have this here and out, stretch the rectangle to this point. And I'd have the  rectangle have this background color. Now on this rectangle, I would have a text that says  a verification code has been sent to just like that. So I'll keep this text here. And I'll use  a body small text for that, then out align the text to the center horizontally, then I'll keep  this text aligned to the horizontal center of the page, just as the like this. And that's okay. And  that's okay. So I'll go ahead and bring in that input components for the verification  code. But before I do that, let's change the color of this text. So I would come here,  and I'll give you this color. Then I'll click on the Assets panel now and I'll bring  in this component. Now for this component, I'll keep it selected First things first, I'll change  the color of that components out, select the individual items inside the components. And now  change these to the background color that we have. Just like this. And that's okay. Now for the lines  that we have, I'll change the color of all those lines to this. And for the numbers. I'll change  the color of the numbers to this. And that's okay. So I would keep this selected. Now increase  the width to this point. So let's zoom in. So now we can organize this properly. So I will keep this  here and how to snap the heights. This points just like this. So I'd have a placeholder text there.  That's going to say enter very occasion code, just like this. And now change the color of  that text to this. So let's go ahead, and let's change the color of this label text that we have  here to this, change this to this, come here, change this to this and change this to this. Now  for the Enter password text here, I'll change this also. And for the Forgot Password text,  I'll change this. And that's okay. Now, let's go back to our verification code page. And let's  have this button come up to this point. So it's going to be 123456. Out keep this here, and I just  have a verified text, just like that. So at this stage, we have created a verification page for our  authentication task. Now when the users click on the Verify button, we are going to need a pop up  that would show up on the screen to let the users know that their verification has been successful.  Now, how do we create that pop it simple outcome here, I would select the frame to now creates a  pop up just like this. Now the reason I'm creating this here is so that I can use the width of this  layout to set the width of this pop up. Now the definite way to do this is this, if you come here,  and you select this page, you will see that the width is 428. Now the margin space on this layout  is 16. Here, and 16 here, which is 32, right, so to get the container space here, and use the width  of the container space for this, my pop would be me subtracting 32 from 428. So I would just select  this outcome here, I would say four to eight minus 32. And that's going to be the width for my pop.  And this is it as easy as that. So I would come here and I'll give it a corner radius of eight,  then I would go ahead and I'll give it this background color, when I give it this background  color, then I'll have a text right inside that layout that's going to say, pull number verified,  or whatever you want to say. So I would come here and I would select a better textile. For that,  I would go with the body large textile just like this out, align it to the center horizontally,  now out bring in the button components here and out have a Proceed button here that the user will  click on to go to the homepage. And we are done creating this. So I would select this, go to the  Layers tab and out, call this verify popup just like that. So that pop up is going to show up when  the user enters their verification code here and click on the Verify button. So I'll grab this now.  And I'll place it here. And that's fine. So at this stage, I'd like to say that we are done with  creating all of the screens that we need for our authentication task. So this is going to take us  to the next task of our app. And that task is actually the fund task where users will have  to fund their wallets or their accounts so that they can invest. So I would come here, and I'd  have this here. I'll change this to fund accounts. So all of the components that are heavier will be  the components that will aid the user to fund their accounts on this app. So let's go ahead  and let's do that. Now what you need to take note of is this, for a user to fund the account,  the user will have to go to the homepage of the app first, right? Because it is from the homepage,  that dude see the fund account button. So what does this mean? This means that we need to create  components for the homepage and have our homepage sorted first, before we handle different account  routes. So let's go ahead and let's do that. On the homepage, the first component that we are  going to have will be a card components that will display the balance that we have in our account.  And it is still on that card components that we are going to have the one account button. So let's  go ahead and let's create that. So I would have a text here is going to say primary accounts,  I would keep that text selected. And I would set the typography style to body small boat. Now let's  zoom in to 200. So this is it. Now outcome here and I'll create another text, which is going to  be like the account number or the account ID I would say this and I'll keep that selected also.  Now I would set this to body small. So now I would select both of these, and I'll create  an auto layout on the both of them. Now when that auto layout is created out make sure that  the padding around items value is set to zero for now. Now outcome here How to select this text and  how to set its horizontal resizing value to fill container out, select this here, and how to set  its horizontal resizing value to fill container. And for the height outcome here and out sets  the height property here to auto height to make it balanced. Now we have this created  to outcome here, I'll add a fill color to this. Now, I'll duplicate this, I'll bring this here.  And I'll change this text to account balance, or let's just say available balance. Actually,  that's not the account balance, I would say available balance, and here I'll write down the  available balance, that's fine. So I'll keep this here also. Now, what I'll do is I would select  these two auto layouts, and now add an auto layout on the both of them for this new auto layout that  I have created, I would come here and I would set the spacing between items value to 24. And out  select this auto layout that inside this new auto layout, and how to set its horizontal resizing  value to fill container. And I'll do that for this also. Now I would select this new auto layout and  add a fill color of white to it to have this now you can see that this is actually responsive.  And that's okay. Now, I'd like to bring in a button component and place it inside this  auto layout so that that button will be used for the font accounts action. So I would come here  and bring in a button component here, then how to select that button component in the  in the design tree here, hold it and grab it into this frame seven auto layout,  which is our auto layout. And you can see that the button component is placed inside this auto  layout. Now I'd like this button component to look different. So I would keep it selected.  Come here and I would set its top padding value to eight and its bottom padding value  to eight. So I can have this now change this text to font accounts, just like this. And that's okay.  Now I'll go to the feather icons plugin. And I look for an icon that out place on the right side  to make the components just look better. Let's come in here, let's just type in home.  I'll bring this in actually bring this here and replace it here. Now I would select all of  these and I'll create an auto layout on all of them. Now a new auto layout called frame eight  has been created. Now inside this frame eight auto layout, we have this auto layout here  and this icon. So I would select this auto layout now that's inside the frame. It's auto layout. And  now to set the value for its horizontal resizing property to fill container. And I'll leave this  set to fixed we know how to select the frame. It's Auto Layout now, which is a main Auto Layout now,  and I would come here and I would set the spacing between items value to 24. When I do that, I would  come here and add a fill color to this. Now add the fill color to the auto layout to have this.  And the final thing I'll do here is to come here and set the padding around items value  to 16. When that's done, I'll give it a corner radius of eight. To have this now I can expand  this to this point like this. And you can see that this component is responsive. And that's that.  So let's go ahead and let's play around with the colors of the elements on this component.  So I would select this text here, and I'll give it this color, I would select this now give it  this color do same for this and do same for this then for this out select the icon itself,  and that's fine. So I would rename this to balance card, or whatever you want to call it. I will keep  it selected and now click on Create components. And here we have our components created.  So on the home page Still, I'd like to display a list of recent transactions that's been carried  out on the app. So let's go ahead and let's create a component that's going to serve that  purpose. So I'd come here out create a text out call that deposit come here now to select the  body large bold text then I'd come here now create another text and I'd have this which is going to  be a dates that deposit happened. So how to select these two text and how to create an auto layout on  the both of them. Now how to select this text inside the auto layout and how to set its  horizontal resizing value to fuel container. Now do that for this also. Now out select  the auto layout and how to set it spacing between items value to four. And that's okay. Now for this  deposit text. I'll change the color to this. And for the date here. I'll change its color To this,  and that's okay. So I'll keep this here. And the next thing I'll do is to have a frame here,  that's going to be 48 by 48. I'll keep it selected and out, give it a corner radius of 100.  To make it round, then I'll go to the feather icons plug in and out have an icon there,  that signifies incoming, which is this, I would select this icon now,  and I'll place it on top of this 48 by 48 px frame that I created. When I placed it there,  I would come here now to set its constraints value two center for the horizontal axis and  center for the vertical axis. And that's okay. Now select this frame, which is now a circle  and out set its color, let's set it to green like this. And for the icon, outset, it's colored this  and that's okay. Now for this frame, now that I have created, I'll bring you to our PC here,  and how to select all of this and out create an auto layout on the both of them. Now for this  new auto layout, I would come here and I would set it spacing between items value to 16. And I would  come here now to set its alignments value to the center just like this. Now out keep it selected to  come here and add a fill color to it just like this. Now I would come here now and I would create  this text. And this text is going to be a body large bold text, I would come here and  create another text, which is going to just like display the balance out keep that selected and  out make it a caption text, just like this. Now to select both of them, create an auto layout on the  both of them and sets the spacing between items value to for now to select the text inside the  auto layout now and how to set its horizontal resizing value to feel container to have that  and that's sorted. So I'll select this now and I'll give it a fill color of white.  Now for the color of the text out set this to something lights like this. And this will be  something like that. Now what I'll do is I'll select all of these and I'll create an auto layout  on all of them. First things first out align the content of the auto layout to stay at the center,  then I'll add a fill color to the auto layout to have this now for the spacing between items value  of this new auto layout. Now, I like to set it to 76. And that's okay. Now for the padding around  items value, I'd like to set this to eight. And that's okay. Now let's check to see if this auto  layout is responsive. As you can see, it's not. So let's sort that out. And to sort it out is really  easy. I would select this frame here, this auto layout here, I would select this auto layout here.  And I'll set its horizontal resizing value to fill container. Now when I set this to fill container  out, select the auto layout that's inside it, which is frame eight and out set its horizontal  resizing value to fill container also, now I'll make sure all of these sets of field container so  I'll select the items to be sure that they are also set to feel container. Now when I select  the frame 12 Now, which is our major frame, you would see that this is now responsive.  And that's okay, so I'll keep it selected, come here and now set the corner radius value to eight.  And I have this I'd like to duplicate this to have a withdrawal component where the circle is going  to be red and the icon is going to be different. So I would set the position of this icon to let's  set it to 180. That's the angle position. That's what I'm setting here. Or you can call it the  rotation property of that icon. So I'm setting it to 180 degrees. And I'll change this with roll.  Then you can change all of these details. If you want to change them out, select the circle itself,  which is this frame, and I'll change the color to this and that's okay. So outcome here out,  select this out, rename this to withdraw our card, keep it selected, make it a component,  okay, that's supposed to be deposit card. So out select this column here and out,  rename this to deposits card. Keep it selected. Come here and click on Create components.  Then select this. Rename this to weave Travel Card, keep it selected and make it a component  and that's sorted. Still on the homepage. We are going to have a banner that will be used  to copy referral links. So I would go ahead and out creates that. So I'd have this text here.  that's going to see invites your friends out, keep that selected. And I would go with this  textile here, which is the body large bold textile. And I'd have another text here,  that's going to be invite your friends with this pack code. And I'll go with the caption textile  here. And that's cool. So I would select this, when I select it, I would create an auto layout,  and outcome out sets the spacing between items value to eight, then out, select the text items  inside this auto layout and how to set these to fill container. And I'll do that for this  also. Now the next thing I'd like to do is to have a frame layout here, that's going to be  48 by 48. And I'll keep it selected still out, give it a corner, reduce value of 100, then come  here and give it that color. Now I would go over to the feather icons plugin and Outlook one and I  would look for an icon I can use on that. So I like to use this icon here, I would select it,  or bring it here and place it on this frame layout. Now when I placed there, I would make sure  it's at the center, then I'd come here now to set its horizontal constraints value to center and its  vertical constraints value to center. And that's okay, now select that icon, then I'll set its  color to this. And that's okay now to select all of this creates an auto layout on it. So I would  come here and I would align the contents of that auto layout to always stay at the center. Now I'll  keep this auto layout selected, and I'll give it a fill color which is going to be the background  color like this. Now, I would select this auto layout that is inside this main auto layout. Now  as you can see, it's the brim 12 auto layout that has this text, when I select it out, come here,  and I'll set this to fill container. And when I select the main auto layout, now you'd see that  this is a responsive auto layout, which means we are good to go. Now for the spacing between  items value of this auto layout, I like to set it to 24. And for the padding around items value,  I'd like to set it to 16. To have that, then come here and set the corner reduce value to eight.  And here we have a component. So I would keep this selected. Now rename this to refer our banner,  then come here and click on Create component to make it a component. And that's okay. Now on  our homepage, we have one final component, which is going to be a very interesting components to  create. And that's going to be the navigation components on our homepage, which is going to  be at the bottom. So let's see how we can create that components before we put our homepage screen  together. So I would come here and I would get the home icon from the feather icons plugin.  I'll type in home there, I'll bring this in. Now I'd like to zoom in at this point so that you  can see clearly, when I placed this icon here, I would come here and I would create a text.  And I'll call that home. Now for this home text, I would create an auto layout on it. And I would set  the padding around items value for that auto layout zero, then set its alignment position  to the center. Now select the Home text that is inside this auto layout. And now to set its  horizontal resizing value to fill container. Now out keep this text auto layout here,  then I would select the Home icon and that text auto layout. And I will create an auto layout on  the both of them. Now this auto layout is frame 15. What I'll do now is I would come here and  I would set the spacing between items value for this auto layout to for when I do that,  I would come here now to set the alignments of the contents in that auto layout to always be at  the center. Now outcome here and how to select the Home auto layout and how to set its horizontally  resizing value to fill container. And that's okay, just stretch this and it's going to be sorted.  Now at this stage. What I'll do is this out have a frame layout here. That's going to be 48  by 48. And I'll grab this pre empting Auto Layout now and I'll place it on  this 48 by 48 px frame layout, make sure it's at the center. When I place it at the center,  I would select the frame 16 frame layouts, which is our 48 by 40. It's layouts now and I would make  it an auto layout. Now when I make it an auto layout, I'll bring it here and I'll rename this  to Home link. Now after I rename it to HomeLink outcome here and now set its alignment  to the center so that the content of that auto layout will always be at the center. Now the  padding top value is set to three out, set it to four, just so that we are going to have even  numbers all around, I would set this to four also, and this outset four, and this outsets. Four,  just to have this. So at this stage, what I'd like to do now is to have other navigation links.  So I'll keep this home link Auto Layout selected, and I'll create another auto layout on top of it.  Now this auto layout that I just created has a padding around items value of 16. Yeah,  I'll leave it set to 16. Because actually, that's what it's supposed to be now outcome here out,  expand this new auto layout, and how to select the Home link or to layout and I'll duplicate it  like this into three places. And that's because I want to have just three items  there. Now outcome here, I'll change this from home to invest. And I'll change this from home  to transact. Let's select our frame 16. And let's add the fill color to it to have this. So if I  expand the frame 16, you'd see that the icon and the text is just that it's not responsive. So I'd  like to change that. So to change that out, select this home link sets these to fill container,  select this, do that also select this and do that also. Now when I select frame 16, and I increase  the width horizontally, you would see that this text wrap into the next line is actually fixed.  So for this icons, let's go ahead and let's change this icon to a better icon and these two are  better icon. So I would come here, I would go to the feather icons plugin. And I would like to have  this icon. So I'll bring this here. And I would come in here and I will trace the auto layout that  has that you can see it's still called Home link, I'll change that to invest link, when I change it  to invest link, you'd see that to have the home icon inside here. So I would come here now,  I would select this bar chart icon now. And I'll take it inside the InVEST link auto layout. Now  place it right inside here. And you can see that it is here at the bottom. So I would select the  Home icon and out, delete it with the delete key on my keyboard, then come here, grab this invest  icon, hold it and take it upwards like this. So I'll go ahead and I'll do same for the transact  link here. So I'll keep this selected. Come here out, rename this to bottom navigation,  keep it selected and click on Create components and that components has been created. So at this  stage, we can go ahead to make use of all of these components in designing our homepage. So to design  our homepage, out, come here out, select the frame to and I'll bring in an iPhone fatin Promax frame  here. Now zooming to this point, now I would select this iPhone 13 Pro Max frame, rename this  to home. When I do that, I would come here and how to apply the grid style on it. And when I do that,  let's zoom in to 200. out go ahead and I would bring in the menu icon using the feather icons  plugin. So I'll use that one there. Now whenever you bring in an icon and you want to place it  into a layout, make sure the icon is inside that layout here in the design tree. As you can see,  currently, this icon which is aligned justified is not placed inside this layout, which is our  homepage. So what I'll do is I would come here in the design tree, click on it to select it,  hold it and drag it into the home layout. And as you can see it is now inside the home layout. So  I would come here, and I'll place this here. So I would count it row spaces from the top 1234567 and  eight. And that's okay. So I'll have a text here. So I can come here and I can say hi and for laka.  Now I'd like to call your attention to something important. And that is the fact that as you can  see here, I have the name of the user written here, which is N for lucky. Now the question you  should ask is this, how did I arrive at displaying the name of the user here when in the signup form,  I did not collect the name of the user. If you remember, in my signup form, I only collected the  email address the phone number and the password of the user, which means that the app itself does  not have a record of the name of the user. So the question you'd ask, which is no malice. How did I  arrive at displaying the name of the user here? Now this is going to be your first  assignment in this course, because I'd like you to come here in the authentication section here  and refactor the authentication flow here. To collect the name of any user that's signing up  to this app. Now I'll leave this open without giving you a guide on how to do that. I'd like to  see your thoughts process on how to refactor this authentication process with the best experience.  And also with the fact that you would collect the name of any user signing up to this application.  If you think coming here and adding another field for the name collection is fine, go ahead and do  that. If you have another idea that can make the experience better, go ahead and implement that.  Now when you implement the name collection in the authentication task here, go ahead tagged me  on social media for my comments. That's your first assignment in this course, then I can have another  text here. I'll bring this here. Now the next thing I'd like to have here is the balance card.  So I would come here in the Assets panel, and I'll bring this component in like this. Now,  I'd like to have four row spaces between this text and the balance card. But before I do that, I like  to keep this balance card selected, then come here and apply my shadow style that I saved. So it so  I would go with image shadow like this. Now let's zoom into this point. And let's make sure we have  four row spaces. And that's okay, let's zoom out. Now what we are going to do is to stretch this  to this point. And that's going to be successful because our components is a responsive component.  So nothing is going to break. And this is okay. So I would come here at the bottom here, out,  snap this to this roll line. And that's sorted. So the next thing I'm going to have here is a text  that's going to say recent transactions out, keep that selected and out go with a body large bold  text. So I'll make sure I have 1234 Group spaces there. And that's sorted. So I'd have that there.  And I would select a different color for that. I'll go with this. Now for this also out have  this color set this now just in case I forget to set the color of the text as I proceed, you go  ahead and do that. So I would select this icon also now change the color to this, that's okay.  Now right on that this will be sent transactions text out have those transaction cards there.  So I'll bring this in, which is the opposite cut out, give me the shadow style outcome here. I'll  give it a meet shadow style there. Let's zoom out to this point. And I'll just stretch this to this  end here. And I'll make sure this snaps properly too. And that's not going to be a problem because  a component is responsive. So let's look at the space in between this card and this text out  zooming, you can see we have 123 I'll make this four. Let's zoom out. Okay, that's actually too  far away. So I'll bring this here, I'll have two row spaces. Okay. So I would have this one here.  So I'd have two spaces from this text to this card. And if I select the text,  you'd see that I have one row space and two space before this card. And that's okay. So what I'll do  now is I would go ahead, I'll duplicate this. And when I duplicated, I'd make sure I have just one  row space, which is SPX, I'll bring in this other one, which is four, which is for a withdrawal  event. Outcome. Yeah, I'll give it a meet shadow out, zoom out and out, snap this to this points.  And I'll make sure it's just eight px space. So I'll bring this here and that's okay.  Now I'll have just three recent transactions here. So I'll go ahead and bring in this referral banner  and upload it here. So I'll make this snap to the end also, just the other point, now zooming,  and I'll make sure I have a consistent space in here. So I'll have a 48 px margin space over here,  which is going to be six row spaces, right. So I'd have 123456. So I'll bring this in place here.  So I'll zoom out, and at this point, what I'll bring in will be a bottom navigation components.  I bring it up let's see here. Let's zoom in and let's make sure this is properly placed.  As you can see I have properly placed this so I would keep it selected. Come here and I'll change  the fill color to this out select this, change the fill color to do this, select this select  this I'll change the fill color to this now select the icon itself now change the fill color to this  or do that for this also. And I'll do that for this also. Now for the text out select the text  and I'll change the fill color to this and that's okay. Now for the text color of this navigation  link. I like the text color actually to be pure white so that it can be really present there.  And I think this is better. And that's it. So we have just designed our homepage now using the  components that we created. So I would also advise that while designing, it's also good most times to  test what you're designing, so I would select this column here, and I would click on present  to see how this is going to look like actually. So this doesn't look good like this,  I like to present this inside an iPhone device. So outcome here, click on prototype,  click on prototype Settings and select a device here, which is iPhone 13 products.  When I do that outcome, help select this layout once more, and I'll click on present again,  that's going to sort it. And this is what we have, this looks good, you can come here and present  this in full screen just like this, to see it better. So let's go ahead and let's keep designing  our application. So I'll press the Escape key on my keyboard to go out of that full screen display  and not come back here. So the next action I'd like to design for will be the action of the  user clicking on different accounts button. So when the user clicks on the fund accounts button,  I'd like to display a pop up that will allow the user choose the method in which they would like  to fund the account with and that's easy, because we have actually created a pop up  before. So I would come here, I'll duplicate this pop pop, and I'd have the Pop Pop stay here.  And right inside this pop up here, I would have one button here, which is going to say  bank transfer. And I'd have another button here that's going to present the option to fund the  account with a debit card. So I'd have this the here and now expand this to this point.  Now expand this to this point. I'd also keep this here and expand this to this point. Now to expand  this to this point, I'll keep it selected and how to center it horizontally. So outcome here,  I'll bring this downwards. And I'd have it textured that's going to say select method.  So I'll change the color of that text to this. And that's going to be cool. So I would select this  pop now, and I would rename it from verify pop to bond method pop up, keep it selected, and I  would make it a component. And that's going to be it. So when the users click on bond account here,  they would have this pop pop show up asking them to choose the method in which they would like to  fund their account with now let's say the select the bank transfer method, they will be taken to  the page where they would have that happen. So for that out creates that page now. So I would come  here, I'll duplicate this, and I would rename it bank transfer, when I rename it to bank transfer,  I would come here and I would take all of these outs. And I would also take  the bottom navigation out also. So what I'd have here is an icon that will direct the users back  to the previous page. So I would go to further icons. When I come here, I would scroll down,  and I would select this icon for that. So I'll take this out. And I'll bring this here. And  as you can see, this icon is not inside this layout. That's why this smart guy is not active.  So I would come here, I would select this icon and I'll take it into these layouts,  just like this. Now when I select it, and I move it around, you'd see that the smart guide is  active. So I'll make sure that I have it spaces from the top 12345678. And that's correct. So  I will keep that icon select and I'll change the color of the icon vector to this. And that's okay.  The next thing I'd have here is a title for this page. That's going to say bank transfer, you can  call it whatever you want to call it. So I'll use the headline three bold text for that. I'll keep  that there how to center this horizontally actually, to be sure it's at the center  horizontally. And that's fine. Now I'd come here, and I'd have bits here. So I would have these  details here. So what I'll do is I'd make sure I have 1234. Okay, I'd have it's row spaces there,  I'd have 12345678. So what we are going to have here is the destination account details where the  user should make the bank transfer to so here's the account number. Here's the account name and  here is the bank name. And that's it. So I would come here and I'd have a button component here,  out align it to the center and I would stretch it to this point and stretch it to this point also,  I would have 123 456. So I have seven, and eight. So I'd have a two row spaces there. Now what I'd  have on this button will be copy account number. So the user can just click on this button to copy  the account number here. So I have sorted the routes for funding the account on this app with  bank transfer. So let's go ahead and let's create the page where the user will use to fund the  account with their debit card. So outcome here, so I will change this debit debit card, or align  this to the center, that's okay, I'll take this out, then I'd come here, I'll take this out also,  then I'd have all of this here. So I would have it row spaces from this icon also. So let's zoom  in so that we can count better. So I would have 12345678. I'll keep this here. And I'd have one  two, I'll have that there. out, zoom out. So this is going to be the page that will enable  the user fund their accounts on this app with a debit card. So what we have here is,  the user will enter the amount and have the option to select that they want to use  the existing card that they have on this app, or they would like to add another card. So let's fix  some alignment issues here. Let's keep this there, come here and keep this here also, then come here,  balance that's there. And keep that there. Also, I would also come here and make sure that this  is sorted also here. So for the action of adding another card, we are going to see how to do that  as we proceed for now let's go ahead and let's have a button component here, align that to the  center horizontally, keep that there, keep that there, then for the text out, say font accounts.  And that's that. So if the users click on the font accounts button, they would have this pop  up show up for them to choose the method they want to use, when they select the bank transfer method,  they would have this page show up, if they select the debit card method,  they would have this page show up also, they would have this page show up. Now, if the user  clicks on this fund accounts button, when they want to fund the account with a debit card,  the user will be taken to another page, which is going to indicate that the account has been  successfully funded. So I'll duplicate this to have that there. Now, before we work on that page,  I'd like to change the name of this page from bank transfer to debit card transfer. Now for this page  here, out, rename it to transfer successful. Come here, I'll take all of these outs.  I'll take this out also. And I'd have a frame here, which is going to be 100 by 100 frame,  that's how it's going to look like that's quite small. So I'll make this 240 by 240. And  I'll just work with this. So I'll give it this color. And I'll give it a corner radius of 200  to make it a circle. And I'll go over to the feather icons plugin. And over here in the  feather icons plug in out bring in this icon, and that icon will be placed on top of this frame.  Now go ahead and use the Scale tool to scale that icon to this point, just like this. Now, when you  scale the icon, make sure that the constraints of that icon is set to the center horizontally  and the center vertically. So I would come here now I would select this icon and I'll change  the color of that icon to this when our habit text here that would say count funded successfully,  or you can have whichever text you want to have they that's fine. So I would come here and I'll  change the color of this to that. So after that, I would have a button component here,  that will redirect the user to the InVEST page. So I would say invest. Now when they get this page,  they would have the option to click on the InVEST button here to go straight to the InVEST page  where they can invest. So that's the next page we are going to look at we are going to look at  creating the InVEST page where users can invest in stocks. So to create that page, it means that  we need to create the components that the page will need. So let's go ahead and let's see how  to create the components for that page. So for the InVEST page, the first component I would have  there will be a little card component that will be used to display the cash amount that the user  has. So I would come here and I would create that. This is the fund accounts component section here.  So I would have the invest component section here. And to create that card, I would have this here,  I would say cash. And I'll use the body small textile for that. And I'd have an amount here,  just any amounts. Okay, so I would use body large bold here, then I'll just select the both of them,  I would create an auto layout on the both of them, make sure the padding around items value  is set to zero, then I'll come here and I'll add the fill color to it. To have that now select  the cache text and set the horizontal resizing value to fill container and do that for this or  that text on the here, which is the amount of cash that the user has. Now when that's sorted,  select the auto layout, and then come here and set the space in between items value to for now,  I'll go over to the feather icons plug in, and I'd look for an icon that I can use to represent  cash there. So I would scroll down and I'll look for one of the icons here. So I am going to make  use of this icon here, I would select it, I'll bring it here, then I would select both of these  and out create an auto layout on the both of them the outcome here. And I would make sure  that the alignment value for this auto layout is set to be top left corner of the auto layout.  So I would keep this auto layout selected, I would add a fill color to it. And I would set  the spacing between items value to eight, then set the padding around items value to eight,  then come here and I'd have the corner radius value set it also. So over here, I would select  this auto layout inside the main Auto Layout now. And I would set its horizontal resizing value  to feel container. And when I do that, you will see that this component will be irresponsive  components just the way I want it to be. Now let's go ahead and let's set the colors for this.  So I will set the color of this to that now set this to this now for this icon out set the color  of this icon to this. So I'll keep this here, I'll duplicate it, when I duplicate it out, go ahead,  change these two assets, then I'll leave the value here just like this, or you can change it if you  want to change it. Now the next thing I'd like to do is to take out that icon and have another  icon there. So I would go to further icons. And I would have this selected for that. So  I'll bring this here, let's go to the Layers tab here. And I would select the briefcase icon here,  which is this, I would select it here. And I'll take it into the frame 19 Auto Layout,  just like this. And you can see that it is staying here on the right side of the auto layout,  I would grab it and I'll take it to the left side. Now I'll select this one, and I'll delete  it. And I have that. So I would select this icon now and I'll change the color of this icon. And  this is sorted. So I would rename this to cash card, whatever you want to call it is okay.  And I would rename this to assets card. And that's okay. So I would select this, make it a component,  select this, make it a component. So let's go ahead and let's create the other components  that we are going to need on the InVEST page. So the next component, our need on the InVEST page  will be an input field component that the user can use to search for top stocks that they would  like to invest in. So we have an input field here already created, it's already a component. So what  I'm going to do is out duplicate it, I'll bring it down here. And I'll keep this here. Now when you  duplicate the components like this, the duplicates will be a child components. Now, I wouldn't love  to work with this as a child components. So what I'm going to do is out out keep the components  selected, right click on it and out select detach instance. Now when I select detach instance,  you would see that this is back to a regular auto layout. So I would come here, and I would change  the name to such impute field, then what I'm going to do is I would go to further icons now bring in  a search icon, which is this out, grab it and drop it inside this auto layout, which is the search  input field auto layout. Now the issue is this. I want this search icon to be smaller than this,  because it's quite too big. And as you can see it has increased the height of the impute field. So  I'll keep the icon selected. Come here, and I'll set this to 12. And I'll set this to 12. And that  I have that now I think 12 is too small outside this to 16. And out set this to 16. And that's  sorted. So the next thing is this, I'd like this icon to stay on the right side of this  impute field. So how do we do that? Just select the search input field auto layout. Come here.  Click on the alignment and padding property. then change this property from packed to space between,  and that's going to be sorted. Now let's change the color of that icon. I'll change it from black  to this. Now I can select it now and make it a component. And as you can see, it can be used  just the way you'd like it to be used. So let's go ahead and let's create the next component that  we are going to have on our invest page. So the next components will be the components that will  display the list of stocks that are available to invest in, in this app. So let's come here,  let's have some space here, I'll use the brand fetch plugin. To pull up the logo of a brand,  I'd have this Come here, I'll type in dangoty, or press the Enter key on my keyboard. And I'd have  this here. So I would select this out, click on it to select it, and I'd have it there in my canvas.  So I'll bring this here, and I'll make it a 24 by 24 frame logo just like this. Now when I make it  24 by 24. The next thing I'd love to have is the price of this stock, I would have that out select  the caption text for that, then I would have this, then I would have this, make sure I use  the caption text for that also, then I'll create an auto layout on this and I'll set the padding  around items value to zero. Now out select the text inside this auto layout and set its  horizontal resizing value to fuel container. Now, I'd like to have an icon here that will indicate  decline or increase. So I would go to the feather icons plugin. And I would bring this icon in,  and I place it here. Now I'll make this icon a 16 by 16 icon just like this, when I plus here,  how to select both of them. Now create an auto layout on the both of them. Now for the spacing  between the auto layout, it's going to be set to four. Now to select this auto layout that's inside  this framlington Auto Layout, I am talking about the auto layout that has this number here,  I would select it, when I select it, outset its horizontal resizing value to fill container,  then out select the frame 19 Auto Layout now, and now add a fill color to it. Now let's go ahead  and let's select this icon. And let's make the color to be green just indicates progress. Yeah,  so I would come here now, I would select both of these and create an auto layout on the both  of them. Now for this auto layout here, I would set the spacing between items value to eight,  it's already set it for me. So I'll just leave it set to eight. Then I'll come here and I'll add  if fill color. To have this outcome here. Out select this text now, which is inside this new  auto layout and outset it's horizontal resizing value to fill container. And for this outset,  it's horizontal resizing values fill container. Now when I select this frame 20 Auto Layout,  as you can see here, it's a frame 20 Auto Layout, when I select it, and I resize it, you would see  that it's a responsive auto layout, just like this. And that's what I want, actually. So I'll  bring this here. Now I'll go ahead to create a text that will signify the title of that stock,  I'll just call it dang. Now I'd come out set this to body large bold, and I'd have this day here  with this text. Now what I'll do is I would select this and this text, and I'll create an auto layout  on both of them. Now outcome here now add the fill color to this auto layout first,  then come here and align the contents of that auto layout to the center. After that, I would set the  spacing between items value of that auto layout to eight to have this now bring this here and I'd  have this here. The next thing to do is to have all of these selected, then out add an auto layout  on all of them. Now for this new auto layout. Now, I would set the spacing between items value to  eight, then come here, select this auto layout and set its horizontal resizing value to fill  container, then how to select the auto layout now and now add a fill color to it to have this now  for the padding around items value, I would set it to eight and set the corner radius value to eight,  just like this. Now if I expand this, you'd see that I have this component looking just  like this. And this is okay. So I want to select it out, name this stock list and out make it a  component. That's fine. Now the next component I'd like to have there on the InVEST page will be a  component that will be used to display the list of stocks that the user have invested literally the  stock portfolio of the user. So I would come here let's zoom in one small out have a 48 by 48 px  frim going out, give it a corner radius of 100 to make it around, then I'll give it this color. Now  out, go to the brand fetch plugins, and out, look for the paystack logo, which is this. Now outcome  here, I would right click on this paystack logo, I like to pick out the background color. So I'll use  the Remove BG plugin. for that. I'll keep the logo selected, and I'll make it a 24 by 24 px logo,  just like this, and I'll place it right at the center of this circular frame that we have  created. Now when you place that on top of that circular frame, make sure to set the constraints  value for the horizontal axis to the center and for the vertical axis to the center. So the  next thing to do is to go ahead and I'd say pay stack, I'll keep it selected, come here. And I'll  use the body large bold text for that. And right under this, paste that text out have plus 345,  just to represent the appreciation value of that stock. So I'll keep it selected and outcome here.  And I'll go with the body small text. Now I'd make this to have a green color, just like this  and for the paste that text and make it to have this color. So I would select both of these,  first of all, create an auto layout, make this space in between items value to be set to four,  then out select this text, set it to fill container. And for this outset to fill container  also now out expand this, and that's fine. Now the next thing to do is to select all of this,  create an auto layout on all of them. When I create an auto layout on this outcome, how to set  the spacing between items value to eight, and out add the fill color to that to have this  now when I set this to eight outcome here and out set the pattern around items value  to eight. Now I'd like for us to check to see if this is a responsive auto layout. And as  you can see, it's not and that's because I have not set the horizontal resizing  value for this auto layout inside of it to feel container. So when I set this to fill container,  and I come here now you'll see that we have a responsive layout. So I'll keep it selected  outcome here. Now it sets the corner radius value to eight. And then we have our portfolio listing  component. So I would say portfolio portfolio list. And I'll click on Create components.  So I think we have created all of the components that we are going to need on our invest page. So  at this stage, I'd like for us to go ahead and create our invest page. So I would come here now  out, select this out, duplicate it out, rename this to invest. And I'd come here  and take all of this out. And now leave the bottom navigation components, this time around  outcome here, what I'd have first will be that cash card. So I'd have 1234 space before that.  But to see cash card, I'll bring the cash card in here. And for this cash card, I'll change the fill  color of this cash card to this out, select this and I'll change this also to this, I'll change the  text color here to this. And for this, I'll change this to that. So I'll go ahead now. And I'll bring  in the Assets card. And I'll do the same to that also come here, I'll change the color of that to  this. And this will be changed to this, change this to this and this to this. And that's okay.  So what I'll do now is out arrange all of this to stay organized. So I'd like this to take up  two columns. And I'd like this to come here and take up two columns. So let's zoom in to be sure  that this is properly organized. So this is not properly organized. And that's because I want  four row spaces before this. So I will bring this down here. When I select this, I'd have 1234  And this is okay. So I'll bring this here. And I'll bring this down here. So this is sorted, we  have this section sorted. So the next section of this page will be the section where I would write  a text that's going to say top stocks to invest in. So I would have eight row spaces before this.  So I would say 12345678. I don't have this to hear. Now for the text here. I'd like this text  to be a body large text, not a body large bold text. Now after this text, I'd like to have  that search field. So I would snap this to this point. And I would go ahead to bring  in that search impute field which is this and I'll just have only an eight px space between  this text here and the input field. So out come here stretch these to this point. And  I'll change the placeholder fetch. So let's change this from stock to stocks. And that's  fine. So the next component I'd like to have is the stock list components. So I'll keep this here,  and actually give it a shadow effect so that we can see that clearly. So let's zoom in. So I would  give it two spaces, one, two, and that's fine. So out, snap this perfectly. And I would like this  stop here. And I would like this also, to stop here. Let's zoom out. So I would duplicate this  and have this house. And let's duplicate this here. Let's duplicate this hair also. So let's  zoom in to confirm that all our components are aligned perfectly. So you can see this is okay,  this is okay. This is okay. And this is okay. So that looks okay, now on have a  stock portfolio section. Now, to differentiate the two sections out, bring in the button components,  and I would use it for something different this time around. So I would have 1-234-567-8910 1112  spaces. So I'd have 12 Row spaces here, I would zoom out, out stretch this to the end like this,  I would come here and align the content of this button now to the left, then I would set its top  padding value to eight and the bottom padding value to eight. Now what I have here will be  stock portfolio. Now to make this look different, I'll keep this selected, come here now to set  the corner reduce value to zero, just like this. Now what are we going to have here,  we are going to have the paste back component here. So let's zoom in. And let's make sure  this is properly organized. So I'd have 1234 space before this. And that's okay,  outcome here. Now give it a shadow effect, just like this now out, keep this selected, come here,  now change the color. So I would come here, I'll change the color to this. So the green color  here needs to actually be thicker than it is now, just like this. So I would make this to have two  columns, then I'll duplicate it and have this they have also taken up two columns also. Now you can  go ahead and have other stocks listed here. That if you want to have that, and here we are, we are  done with our invest page. Now since we won't be able to display all of the stock portfolio here,  I would like to have a see all text here. So this see all text will be brought in text  out copy here. And I'll duplicate this see all text. And I keep you here also, and I'll change  the color of this, see all text or change this and that's fine. Now the next flow will be this.  Now let's assume a user likes this talk here and the user wants to invest in this talk means the  user will click on the stock and the user will be taken to the stock Details page. Right. So  let's make that happen. I'd come here, select this page, and I'll duplicate it, come here and change  this to stock details. And that's fine. So for the stock Details page, I'll take all of this out  and out zoom in, then go to the feather icons plugin to get that icon that signifies  going back to the previous page. And this is it. I'll get it. I'll bring it here. And I'll make  sure that this icon is actually inside the stock Details page. And I'll take this to this point.  And that's sorted out, select the icon vector and I'll change its color to this.  So what do we have here, I like for us to have a title here that's going to say stock details.  And this text should have a headline three bold textile for it. So I would align it to the center  horizontally. And that's okay, now let's change the color this and that's fine. So what I'd have  here will be a component that I would create, I would just come here, I would have this frame to  select it and out create a frame with it like this out set this eight,  then out sets the colored this van out sets the color to this than out go to brand fetch to get  that logo and out place the logo right on that frame layouts that I just created. I'll grab it  and upload it here. Now I'd keep it selected and outset the horizontal constraints to center and  the vertical constraints to send that and that's okay, so what I'll do now is out keep this frame  selected, rename this to stock detail. And then I'll come here and I'd make it a component.  So I'll go to that page now. And over here I'd have that stock detailed banner components placed.  This is it here. I'd have it stay here out stretch it to this point.  and are stretched this this point, that's okay. So I would come here now,  let's snap that in. And let's also make sure that this is snapped in perfectly, just like this.  So over here I have 123. Let's make it four. So over there have four row spaces between this  stock details, text, and this stock detail banner components. And that's fine. So let's zoom out.  The next thing I'd have here will be the stock price. And the appreciation value, I'll make sure  I have 1234 spaces. That's okay. Now I'll go ahead to create a component that outplays here and and  that component will go into more details about the stock. So let's go ahead and let's create that  component. So to create that component outcome here, and now to select the frame to now create a  frame that's 42 px tall, just like this. Let's zoom in to this point. When I create this frame  here, I'll come over here and I'll create a text on this frame, I'd say my position, I'll keep this  text here, just like that. And that's fine. Now for this text, I'll use the body small textile  that I have here, which is this. And that's okay. Now I'll go ahead, I'll create another text here,  I'll actually make this text box to be this Why'd not come here, now just type in 35. Now,  I'll keep this text box selected now and align the content of that text box to stay at the right  select this frame layout now, and then make it an auto layout. Now I would come here and I'll click  on the alignment and padding value, and out sets the left padding to 16 and sets the right padding  to 16. Then out set the top padding to 12 and the bottom padding to 12. Now I'd like this text to  always stay here and this text to always stay here. So I would come here and now change this  from pact to space between. And that's okay. So if I come here now, you'd see that if I take this in,  this is always staying here. And this is always staying here. Same thing happens if I resize  the left side here, just like this. And that's what I want actually. So I'll keep that selected,  then come here. Now I'm select this text here to make sure this is set to hog content,  then come here and select this text to make sure this is set to fixed width. And that's okay.  So out select this, and out creates an auto layout on this auto layout now, just like this, now  this new auto layout is called brim 25. Yeah. So inside this new auto layout that I just created,  we have this auto layout here, which is frame 24. Out select it and not duplicate it vertically just  like this. Now select the frame 25 Auto Layout, then I'll set the space between the items inside  the auto layout for when I do that, I would come here and now change the padding around items value  to zero just to have that now I would come here and I would set the color for this frame 25 auto  layout to this. Now what I'll do is I would set the corner radius value for this auto layout  to eight. Now the corner radius won't be visible. And that's because this auto layout here is  staying on top of that auto layout. So I would select this auto layout here which is at the top,  and I'll come here, I would click on independent corners here. And I'll set the top left corner  reduced value to eight. And now set the top right corner reduce value to eight,  just like this outcome here out select this, click on Independence corners and outset the  bottom right corner reduce value to eight and I'll set the bottom left corner reduce value  to eight. And that's sorted. Now for each of these rows here out select this, then come here and I'll  change it horizontal resizing value to fill container. I'll do that for this also. Do that  for this also. And do that for this. And that's okay. Now let's see if this responding how we  actually wanted to respond. And it is actually now let's edit these values that we have here.  So I would come here and how to set this open and how to set this to previous close and out set this  to market cap. Now for this I'll change the value to So out, come here,  previous close out, say that plus this and open, just any value there, actually,  just any value, there will be fine, actually. So with this, I have successfully created  these components that allow us to show more details about that stock. So I would come here  and not call this detail table. Actually, I would call it stock detail table. And I'll save that,  then come here and make it a component. And here we have that. So I would zoom out, and I'll go  over to this page, and out, bring that component. So let's come here, click on the Assets tab,  come here, grab this and place it here. So out, keep it selected, and I'll add a shadow effect,  just like this, then zoom in so that I can calculate the row spaces better.  So from this item here, I would like to have 123 and four row spaces people this,  let's zoom out, and let's stretch this to this point. And that's fine. So I can go ahead, select  this text, so that I'll be able to change the colors out, select all of this, come here and  change this. To that good, this was not selected. So I would change that. For this also out,  change it. Now the next component I'd like to have here will serve as links just in case the user  wishes to read more about the stock and the company that owns the stock. So I'll go ahead,  and I'll have that it's going to be similar to what we have here. Now this is me creating this  just the same way I created this stock portfolio components here. The only difference here is that  I just changed the color from what I have here to this. So let's zoom in to be sure  that we are placing our items properly. So outcome here, I would have 1234 Row spaces  before this. And that's okay. So at the bottom here, I'd have a button component just for a user  who is satisfied with what they see here on this stock Details page. And this button is  going to be an invest button. So out zooming to calculate the space better. So I have 123456 Row  spaces here. And I would like to stop at the sixth rule space. And that's it. So if a user likes what  they see here, on the stock Details page, the user can go ahead and click on the InVEST button.  If the user is not satisfied, the user can come here and click on this button  to go back to the previous page where the user will still have to see all the stocks  listed here. So that's it. So the next page here will be the page that the user will go to,  when the user clicks on this invest button here, I'd like us to go ahead and create  that page. So I would duplicate this. So outcome here, I would rename this to enter stock, amount,  whatever you want to call it is okay. So outcome here, I'll change this to  enter amount. And that's cool. So I'll go ahead and I'll have this here. Now this is me using  an input field and a button as simple as that. So I will zoom in to this point and out calculate  the space better, I would select this item and out calculates the space from that item,  I would say 123456. So I'd like six rule spaces there. So I would select this. And I'll make sure  that snaps perfectly. And that's it. Now the space between this input field and this button is 1234.  And that's fine. How to come here. Now check out this invest button. And this page is sorted. Now  when the user enters the amount that the user wishes to invest in the stock with, the user  will go ahead and click on this Proceed button. Now when the user clicks on this Proceed button,  the user will be taken to another page. Now that page will be where the user will be presented  with a summary of the investment that the user is about make. Now outcome here.  I would select this and out duplicate it and out. Rename this to investments summary.  Now I'll zoom in outcome here. And now take all of these out. And I'd have this here.  Now this is going to be a summary of the investment that the user is about to make. And  if the user is okay with the summary that the user sees here, then the user would go ahead and enter  their secrets been here, before they click on the InVEST button to finally make the investment.  So outcome here out, select all of these, and out calculate the row space is better. So I would come  here, I would keep this here, I would make sure that I have lead zoomin, I'd make sure that I have  123456 Row spaces there. And that's cool. So out, zoom out to this point, and this page is sorted.  So this is the flow so far. Now when the user is on the homepage here, and the user wants to  invest, the user will click on this invest link at the bottom navigation here. This is it here at  the bottom navigation here. When the user clicks on this link, the user will be taken to the InVEST  page, which is this. And if the user goes through the list of stocks that we have here, and the user  is interested in investing in one of these stocks, let's say this one here, the user will go ahead to  click on it. And when the user clicks on it, the user will be taken to the stock Details page here,  which is this. Now when the user is taken to this page, the user will read about the stock. If the  user likes what the user sees here, the user will go ahead and click on the InVEST button here. When  the user does that, the user will be taken to this page, where the user will have to enter the amount  that the user wishes to invest in that stock with. Now, when the user enters the amount here, the  user will click on the Proceed button here. When the user does that, then the user will be taken  to this page where the user will see a summary of the investments that the user is about to make.  Then if the user is okay with this, the user will go ahead to enter their secrets pin here.  When the user does that, the user will click on the InVEST button here for the investments to be  made successfully. So before we proceed further, I'd like to come here and change this to summary.  So I would keep that selected and align it to the center horizontally, I'd also come here, select  these and make sure it's aligned to the center horizontally. Now, I'll come to this page, which  is the Invest page. And I'd like to have a title here, I'll change this to invest an hour, align it  to the center horizontally, just like that. Now, when the user clicks on this invest button here,  the user will see a page that says investment successfully made or investment made or whatever,  whatever just a success message. So I would come here, I would select this, and I'll duplicate it,  and I would rename this successful investments. And I'd save that. So what I'm going to have here  will be similar to what I have here. So what I'll do is out, take out all that I have here on this  page, I'll take this out. Also, I was supposed to take this out also this debit card title here,  I'll take that out. Also, I'll just select all of this out, duplicate it. And I bring this in here,  just like this. And I'll zoom in. And I'll just change this to success. I'll keep it selected  and out, align it to the center horizontally. Now I'd come here, I'd say go back home. And  that's it. That's sorted. So so far. So so far, we have achieved the authentication  task, we have achieved the funding task, and we have achieved the investment task. Now we  are going to go ahead to create more screens that will actually make the user experience on this app  to be better. So one of those screens will be the Transaction Details page. And that's the page that  the user will go to when the user clicks on any of this card here under the recent transactions  section. So if the user clicks on this card, for example, the user will be taken to a page  where the user will see the full details of this transaction. So let's go ahead and let's create  that page. So outcome here out select this one here, and I'll duplicate it. And I have that.  So let's keep it selected, come here. And let's call this transaction details. And for the  Transaction Details page, I'll take this out. And I'll take this out. Now this is what I would have  on this transaction details page. This is it's as simple as this. So first things, first,  let's calculate our row space to be sure that it's perfectly set. So I'll  have this here and out Count 123456. So I like this to start here 123456 Out,  snap this correctly, and out snap this correctly. And that's okay. So this here is to display  the transaction date that that transaction happened. So this is not complete, actually,  I can give some space here and say 1603, just like that, so that we will depict the date and time of  the transaction. And that's cool. Now, what we have here is the transaction amount. And  here we have the amount in words, here we have the transaction type, which is a withdrawal,  here we have the transaction remark, which is for Netflix, and the status of that transaction is  successful. So I would select all of this zoom in. And I would make sure I have 1234 photo  spaces there. Now for the button components here, how to select this, and I'll make sure I  have 123456, I'll make sure I have six row spaces there. And that's fine. So if a user comes here,  and the user clicks on one of these transactions, the user will go to a transaction details page,  where the user will see more details about that transaction. So I'll go ahead and out create  other pages, that's going to make the experience on this app to be better. Now, before we do that,  I'd like to give this transaction details page, a page title. So out, duplicate this, and I'll bring  you here a lot call that transaction details out, align it to the center horizontally,  just like this. And that's fine. So the next flow that I'd like to design will be the flow  that the user will go to when the user clicks on this menu icon here. Now when the user clicks on  this menu icon, I'd like for a menu bar to slide in with other options that the user can use to  improve their experience on this app. So how do we make that happen? It simply, so outcome here, I'd  have an iPhone 13 Promax, here, out, rename this to manage slide bar, and out, keep it selected,  come here, and I would divide the width by two, just like this. And I'd have this. So I might  decide to go ahead and increase this further. And what I'll do is this outcome here, I'll just have  the logo here. And I would go ahead to have list items of menu links. So the first menu link, I  would have here will be recent transactions. I'll keep that selected here. And I'll change this to  a body small text just like this. Now let's zoom in. Let's keep this here. I'll keep it selected,  and I would create an auto layout on that text. Now this auto layout, I would like the auto layout  to have a padding around items value of 16. And I'd also like the alignment value to be set to the  left. So I would come here now I would keep this then creates another auto layout on top of it.  Now this new auto layout that I have created will have a padding around items value of zero,  just like this. Now outcome here out expand this new auto layout here in the design tree.  When I do that out, select the recent transactions auto layout, and I'll duplicate it just like this.  Now go ahead to edit all of these two other links. Before I do that, let's select the main Auto  Layout now, which is frame 34. Here, and let's set the spacing between items value two, four, just  to have that. So the next link here will be card management, I'd have this be investment portfolio.  I would have this be request statement. And I'd have this be settings and that's fine. But I would  come here I would select all of these text. And I'll change the color to this. And that's  what we have. So whenever the user clicks on On this menu icon, this is going to slide out from  the left. And that's okay. So let's go ahead to create the routes that the users will go to when  the users click on this transact link here at the bottom navigation section. So to do that, I would  come here, I would select this here, and I will duplicate it. I would rename that to transact,  without zooming out, come here. And I would say, transact. Keep that selected and out, align that  to the center horizontally, then I'll take all of these outs. Now,  I'd like to have two card components here, one for withdrawal action, and one for a deposit action,  as simple as that. So let's go ahead and let's create those card components. So outcome here out,  create a text here, I'll just say deposits. And I'll keep this text selected. Come here, and I'll  go with the headline three bold text, just like this. Now, I'd come here and I'd have a 48 by 48  px frame layout, with a corner reduce of 100, then I'd come here and I'll give it a color,  that's green, then go to be further icon slogan. And I'll get an incoming icon there,  which is this, this is our incoming arrow icon out, place this here, then come here and set  the constraints value to center and center. Now out, select the icon vector, and now change  the color to this. So I would bring this here, select this, and then create an auto layout on it.  Now for this auto layout, I would come here and I'd set the alignment property to center.  When I do that, I'd come here and outset the space in between items value to 16, then go ahead to add  a fill color. When I add the fill color out, come here and I'll set the padding around items value  to eight. To have that then I would go ahead to set the corner reduce value to eight. Now outcome  here now select the deposit text and change the horizontal resizing value from hog content to fill  container. So this is the deposit action card that I would have on that page. outcome here,  I would rename this to deposit action, save that, and then come here and click on Create components.  Now select this text and I'll change the color to this. Now I would come here now I would go to this  page. And I would bring in VAT components. This is it. I'll keep it selected. And I'll give it a  shadow effect out zoom into this point. I'll bring this here. And I'd make sure I have 123456 Row  spaces. And that's okay. So out stretch this to this point like this. And I'll create a component  or withdrawal. I'll duplicate this component, which is the master component, take notes. And I  would detach instance, when I detach instance out, select the circular frame there out, make this red  out, select the arrow frame there, and I would set the rotation value to 180 degrees.  And that's sorted, as easy as that. So I would come here select it's come here and go to the  design three and rename this to withdraw action. When I do that, I'll keep it selected. And I'll  click on Create components here. And that's okay. So outcome here now, I'll bring this in  give it a shadow effect, like this, I would have this day here. And I would spread this  to this point. And that's okay. So finally, on this page, I would love to have a button here  that can be used to perform the adding of card action. So I would keep this here I'd have 16 px  margin space here, which is to row spaces. One and two are keep the bottom selected.  out, set the top padding value to eight and the bottom padding value to eight. Then I'll change  the text contents there to add card just like that. And that's sorted. So this is the page  that the users will go to when the users click on this transact link here at the bottom Navigation  component. So this is where I would stop for this project in regards to creating screens  and outs stop here because we have achieved the actual user task for this app. Now I'd like you  to take this as your own assignments and and when you are done. You can Tagami tweets on Twitter,  my Twitter handle is you can go ahead and tag me to your assignment on Twitter. Now,  the assignment is this, I'd like you to have a notifications icon here. And the notification icon  should take users to a page of notifications when they click on it. And the notifications  can be anything. It can be newsletters, it can be transaction notifications, it can be anything  at all. Now place the notification icon here and create a Notifications page that users will go to  when the user clicks on the notification icon. Now, after that, come here and create a route  or create a page that the user will go to when the user select add another card, create a page  that the user can use to add their debit card details to this app. The third assignment  will be this, come here and create a page that the user can use to request for their statement.  After that, create a settings page now on this settings page, lets the user be able to set  their secrets been there. Now over here, which is the card management link, the user should be able  to delete a card that they have added to this app, or add another card that they want to add  to this app. So that should be possible when the user clicks on card management here. This should  take the user to a page where they will be able to see all the cards that they have on this app.  And and also, they should have the ability on that page to add and delete cards. Now take notes,  this Add Card button here should take the user to the same page that you would create  for this add another card here, just like that. And also, this recent transactions  link here should take the users to a dedicated page for the list of all recent transactions.  This investment portfolio link here should take the user to a dedicated page of all  the investments that the user has made on this app. So go ahead to build all of those pages,  so that you can have a full and complete user experience. Now, finally, for the assignment,  just before I forget, come here and create a Forgot Password page, create a page here  that the user can use to reset their password just in case the user forgets their password.  And that's going to be it. So at this stage, what we are going to do is to create a prototype of all  of these designs that we have created, we are going to link this perfectly and see how it's  going to work. So to do that, let's zoom in out come here, I will start from the splash screen. So  I would select it. Come here click on prototype. When I click on prototype, I would come here and I  would connect the splash screen to this page. Now the action will be an on tap action. And that's  because this is a mobile app actually. So we are actually supposed to tap this screen with our  fingers. Now when the user taps on the screen, the user should move to or should navigate to,  you can see the action here should navigate to the author selection page, which is this.  Now the transition animation or the navigation animation should be a smart animation. So it's  going to be an ease in animation. And I would like this ease in animation to be for 800 milliseconds.  Actually, I'd like this to be an ease in and out animation, just like this. Yeah, that's better for  me. So outcome here now. And I will say okay, when the user clicks on the login button here, the user  should go to the login page. And I'll keep all of the sets the way it is. Now when the user clicks  on the get started button here, the user should go to the signup page. So I would come here,  click on this login button here. And I would say when the user clicks on that login button after  after passing in their email address and password, the user should go to the homepage, which is this  over here. When the user clicks on the signup button, the user should go to the  verification page where the user will have to enter the verification code sent to their  phone numbers. Now when the user types in the verification code here, the user should click on  the Verify button. And when the user clicks on the Verify button, this should show like a pop up  so I would connect it to this. So out connect this And I'd keep it as on top, then for the action  out habit set to open overlay, then come here and I'll keep it sets a centered actually,  after setting these two Centered Outcome here, and I won't select this option. And that's because I  don't want the user to close the pop up. If they mistakenly click outside the pop, I'd  like the user to click on proceed here. So this other option here out selected, this is the add  background behind overlay property or the add background behind overlay option.  When I select it, it means that when the popup shows up, the background will be faded. So I  would set the Opacity value to 35%. And I would like the animation to be an instant animation.  And that's going to be okay. Now, when the user clicks on this Proceed button, the user  should be taken to the homepage. Now, when you are creating a prototype like this, you can just take  the connection here to any page at all, then come here and set it to the page you want to set it to.  So I would come here and I would select Home. And you can see that the connection has gone to the  homepage, just like this. So the authentication is set. Now when the users come to the homepage,  and the users click on this menu icon, the user should be taken to the menu, slide bar them here,  this is what should show up when the user clicks on that menu icon. Now, I would want that  menu slide bar or that slide bar menu to actually slide in from the left. So I'll click on  this connection here to have the Interaction Details page show up. Now for the action here,  I would set these to open overlay outcome here and I'll set it to manual. When I set it to manual,  it means I'll be the one to set how the interaction is going to happen. So I'll grab this,  and I'll place this here, just like this. This is how it's going to look like when you click on that  menu icon. Now outcome here. And I would say close this slide by menu, when the user clicks outside  of it, I would select that and over here out have a background behind overlay properties selected,  also an out have the Opacity value set to 35%. Now for the animation, I'll change this from  instance, to move in just like this. And for the moving action out habits moving from the  left and out have the speed of that animation set to 800 milliseconds. Now outcome here,  I'll click on this font Account button here. And I'd say okay, when a user clicks on this button,  this should show us a pop up. So we all know how to set a pop up, right. So I'll change this to  open overlay. Keep it set centered, and out add a background behind overlay action. And also, if  the user chooses not to fund the account anymore, the user can just click outside the pop up and go  back to the homepage. So I would select that. I'll keep this set to 35%. And for the animation here,  I'll keep it set instance. So I'll close this. Now if the user selects the bank transfer option,  the user should come here, as easy as that. And if the user clicks on copy account number,  this account number will be copied to the user's clipboard. And when that happens, the user will  come here and click on this arrow here to go back to the homepage out sets this from instant  to smart animates. And that's okay. So if the user clicks on the debit card option here,  the user would be taken to this page. If the user is taken to this page, and the user types in the  amounts that they are trying to actually fund the account with, then the user will go ahead to  tap or to click on the fund account button here. And when the user does that, the user would come  to this page where the user will have a message that says account funded successfully. Now,  at this stage, we are going to want the user to go directly to the InVEST page. So I'll select this  button now. And I'll take this flow to the InVEST page, which is this. So when the user gets here,  I'll take this menu icon out here actually, when the user gets here, and the user wants  to invest in one of these listed stocks, let's say this one, the user will click on it and the  user will be taken to the stock Details page. When the user gets to the stock Details page and  the user is okay with all of these details here. The user will click On the InVEST button here.  And when the user does that, the user will come here and be required to enter the amounts that  they wish to invest in that stocks with. When the user enters the amount and the user clicks on the  Proceed button, the user will be taken to this page, which is where the user will see a summary  of the investment that the user is about to make. Now, if the user is satisfied with this summary,  the user will go ahead to type in their secrets pin here, and then click on this invest button.  And when the user does that, the user will be taken to this page, which is a success page,  that's going to let the user know that, hey, you have successfully invested in that stock. So the  user will come here and click on the Go back home button, and out, take this back to the homepage,  how to select home here. So let's come here, let's see the other links that we have not created. So  let's say the US is trying to see the transaction detail of any of this recent transaction. Yeah,  let's see the withdrawal transaction here, I would click on it to select it. And I would  link this to the Transaction Details page, which is this. So if the user clicks on that transaction  card, there, the user will be taken to this page. And if the user goes through the whole detail,  and the user is satisfied, when the user clicks on done, the user will go back to the homepage,  outcome here and select home here. Same will happen if the user comes here, clicks on that  arrow, the user will go back to the home page. So you can see that we are creating lots of  connections and flows here. Lots of connections and flows here. So let's go back to the homepage,  and let's see the flow that we have not created. So this is the home page here. So this home link  here is safe to be there. Now let's say the user clicks on this invest link here, which is in the  bottom navigation components, the user should be taken to the InVEST page. If the user clicks  on this transact link here, the user should be taken to the transact page. So if I come here,  now out still connect this, this should go to the homepage. And since this is the Invest page here,  it means we are here. So this should go to the transact page. I'll do that for this also.  So let's come here. Let's see, let's see what we have not connected yet. So if the user comes  to the transact page, and the user clicks on the deposits card here, the user should have that pop  up, show up, that would require them to select if they want to deposit with bank transfer or their  debit card, it should be the same flow. Now over here, I should actually change this to withdraw.  If the user clicks on this withdraw card here, the user should be taken to a page  where they would have to enter the amount and the destination bank that they are trying to withdraw  their funds to. So this is also going to be a part of your assignment.  Go ahead and create that flow. When you create it. Go ahead and tag me on Twitter for my comment.  So let's go ahead and let's present this flow. And let's see how it's going to look like.  So I would come here, I would select the splash screen. And I'd come here and click on present.  So when I click on present, I would have the splash screen show up here. When I click on it,  I would have the option to either login or get started. So I'll click on get started. And here we  are on the signup form page. So if the user enters their email address, phone number and password  when the user clicks on the signup button, the user will be required to enter the verification  code. When the user enters that the user will click on the Verify button here. And a pop up will  show up here saying phone number verified. Now you'll see that when I click outside the pop up,  the pop up won't go away until I come here and I click on the Proceed button. When I do that,  I'll be taken to the homepage. Now here we are in the homepage. Now if I come here and I click on  this menu icon here, you will see that this menu slide bar or this slide bar menu and how you call  it is fine. This slide by menu slides in from the left. When I click outside of it, it goes back in.  Now let's check the font accounts flow. When I click on it, I would have this pop up show up here  that says Select method. Now let's say I choose to select the bank transfer method, I would have  this show up here, I'd be able to copy the account number. And when I'm done, I would come here and I  would click on this arrow icon here. To go back to the homepage. Now let's click on the bond Account  button once more, and let's select the debit card method, you can see that I'll be taken to  this page where I would have to enter the amount that I'm trying to fund this account with. Now,  let's say I type in the amount, I would come here and I'll click on the fund account button,  just like this. And I'd have this message that says accounts funded successfully. Now if I go  ahead and click on this invest button, I'll be taken to the InVEST page, which is this.  And over here, I would see a list of stocks. Now I'd like to present this in full screen actually,  so that we can see better. So over here, I would see a list of stocks that I can invest in.  Now let's say I'd like to invest in this one here, I would click on it. And I would see full details  about this stock here. Now, I don't have some of my components showing here. So I would go back to  my design outcome here. So this is the stock Details page. So this three buttons actually  not inside that layout. So I would select the three of them. And I'll take them inside  that layout. And that sorted. Now when I come back here, you will see that I have that here. So let's  go back to our full screen presentation. So if the user likes what they see here in the stock Details  page, the user will go ahead to click on the InVEST button here. And when the user does that,  the user will enter the amount that they would like to invest in that stocks with. When the user  does that, the user will go ahead to click on the Proceed button here. Now that flow is not created.  So I would come back to our design here, I would click on this Proceed button here,  click on prototype. And now let's see what the problem is. So I came here and I clicked on this  connection link here. And I changed this from on drag to on top. Now when I come back here,  and I click on the Proceed button here, you will see that we are taken to the Summary page.  Now this page will be the page where the user will see a summary of the investments that  the user is about to make. And if the user is OK with this, the user will go ahead to enter their  secrets pin here and then click on the InVEST button. Now the InVEST button is not active also  outcome here and out see the problem for that. So I would click on invest here. And I would select  the connection flow here. And as you can see here, there is an undo drag event here, outcome here.  And I'll delete that on drag event here. And I'll just leave this set to tap now. But the tap event,  there is no navigation destination. So I would set this. First of all out to take note of the  screen here. This is the successful investment page. So I would come here and I would go to the  successful investment page. And that's sorted. Now when I come here, and I click on invest,  I'd be taken to the success page. Now when I click on Go back home,  I'll be taken back to the homepage. Now that is after I have successfully invested in a stock.  Now, what happens if I come here, and I click on one of the recent transactions here, let's  say the withdrawal transaction here, you would see that I'll be taken to the transaction details page  for that transaction. When I'm done going through it out, click on Done. And I'll be  taken back to the homepage. Now what's going to happen if I come here and I click on this invest  link at the bottom navigation components. I'll be taken to the InVEST page still. And I'd be able  to still invest in a stock just like this. Now what happens if I come here and I click on  the transact link here or be taken to this page where I'd have the option to deposit funds or  withdraw funds. And I'd also have the option to Add Card. Now if I am okay with this outcome here,  and I'll click on this arrow to go back to the homepage and that arrow is not active.  So I would have that sorted out come here and connect that arrow to be homepage  and it's going to be an on tap event. So when I come back here, when I click on that arrow now,  you will see that I'm taken back to the homepage. So go ahead, create the order pitches and the  other route as your assignment, then tag me to it on Twitter. So that's that for this course.  If you found this cost to be helpful, go ahead, click on the subscribe button, leave a comment  in the comment section. And stay tuned for more content. Thank you and see you in another course.\n"