1 00:00:00,348 --> 00:00:06,206 To create a new wireframe, click the plus icon in the top-left. 2 00:00:06,206 --> 00:00:09,514 Let's name this one Payment. 3 00:00:09,514 --> 00:00:16,134 You can right-click to rename, or you can double-click it. 4 00:00:16,134 --> 00:00:18,607 First, we need a container. 5 00:00:18,607 --> 00:00:25,017 We'll be creating another iOS app, so let's choose an iPhone container. 6 00:00:25,017 --> 00:00:27,797 Great, now we have a view port. 7 00:00:27,797 --> 00:00:32,927 For this project, we'll be focusing on a different screen, the payment page. 8 00:00:32,927 --> 00:00:36,478 Once again, we'll be consulting the user research. 9 00:00:36,478 --> 00:00:38,582 Consider the users' goals and 10 00:00:38,582 --> 00:00:42,797 emotional states as you iterate on the user experience. 11 00:00:42,797 --> 00:00:45,921 What might the user want to see on the payment page? 12 00:00:45,921 --> 00:00:49,075 Businessman Brian, uses his company card to pay for 13 00:00:49,075 --> 00:00:51,162 his rides during business trips. 14 00:00:51,162 --> 00:00:54,296 He also uses the app for personal rides, so 15 00:00:54,296 --> 00:00:59,446 he want to easily be able to distinguish between his payment options. 16 00:00:59,446 --> 00:01:04,035 If he accidentally submits a personal expense to his company, 17 00:01:04,035 --> 00:01:07,856 he'll get in huge trouble and may even lose his job. 18 00:01:07,856 --> 00:01:14,238 Now that we have a general idea of what we want to create, let's add in a navigation. 19 00:01:14,238 --> 00:01:17,054 Once again, I'm gonna add in a back button. 20 00:01:25,270 --> 00:01:27,885 Now I wanna add a title for this screen. 21 00:01:27,885 --> 00:01:30,088 In Quick Add, search for Text. 22 00:01:36,328 --> 00:01:39,483 A box of pre-formatted text will appear. 23 00:01:39,483 --> 00:01:44,033 Double-click to edit, we don't need any of these formating options, 24 00:01:44,033 --> 00:01:45,607 we just want plain text. 25 00:01:45,607 --> 00:01:50,280 So I'm gonna delete all of this and type Payment. 26 00:01:50,280 --> 00:01:52,403 Click the canvas to access the edit mode. 27 00:01:55,255 --> 00:01:59,184 While the element is still selected, 28 00:01:59,184 --> 00:02:05,580 choose the center align icon and change the text size to 20. 29 00:02:09,170 --> 00:02:14,373 Also, resize the elements so it's easier to keep it organized. 30 00:02:14,373 --> 00:02:16,696 If you have too many elements overlapping, 31 00:02:16,696 --> 00:02:19,029 it becomes hard to select the ones you want. 32 00:02:19,029 --> 00:02:22,003 Now, I wanna contain the navigation. 33 00:02:22,003 --> 00:02:24,015 Search for line in Quick Add. 34 00:02:27,877 --> 00:02:31,521 Choose H.Rule which stands for horizontal rule. 35 00:02:43,727 --> 00:02:46,769 Now we're ready to add payment options. 36 00:02:46,769 --> 00:02:50,302 First, I want a list of credit cards. 37 00:02:50,302 --> 00:02:54,843 In iOS there's a UI element called an iOS menu. 38 00:02:54,843 --> 00:02:57,521 Find it by searching for menu in Quick Add. 39 00:03:01,872 --> 00:03:04,959 Once again it shows you all the options upfront. 40 00:03:07,569 --> 00:03:10,384 Highlight the space for a big icon one. 41 00:03:10,384 --> 00:03:15,345 Since I anticipate needing space for credit card icons, 42 00:03:15,345 --> 00:03:18,245 double click the menu to edit it. 43 00:03:18,245 --> 00:03:20,868 Delete all the lines except for that one. 44 00:03:26,852 --> 00:03:31,245 Let's show a saved visa credit card, which is previously entered and 45 00:03:31,245 --> 00:03:33,038 the option to add a new card. 46 00:03:36,152 --> 00:03:39,572 The formatting here is just two underscores and then a space, 47 00:03:39,572 --> 00:03:43,015 then you can write whatever text you'd like to be displayed. 48 00:03:54,636 --> 00:03:57,714 I'm gonna get rid of the border, and make this full width 49 00:04:06,033 --> 00:04:11,064 I see I have an extra row here, so I'm gonna go back in to edit mode, 50 00:04:11,064 --> 00:04:15,181 delete the extra line, and now I just have two rows. 51 00:04:15,181 --> 00:04:17,207 Now, let's search for icons. 52 00:04:22,073 --> 00:04:23,620 Here is the Visa icon. 53 00:04:27,836 --> 00:04:31,396 It's a little too big, so let's change it to small in the properties. 54 00:04:35,357 --> 00:04:37,681 I'm gonna move it left of Visa. 55 00:04:39,926 --> 00:04:42,856 Now let's find a generic credit card icon. 56 00:04:47,389 --> 00:04:50,036 Once again change to small. 57 00:04:54,670 --> 00:04:58,631 Since each one of these rows will link to the edit payment view, 58 00:04:58,631 --> 00:05:01,492 we need to add an icon to indicate it expands. 59 00:05:01,492 --> 00:05:05,802 Search for angle in Quick Add. 60 00:05:05,802 --> 00:05:07,422 Choose angle-right. 61 00:05:12,714 --> 00:05:16,251 I'm gonna make it small so it matches the other icons. 62 00:05:16,251 --> 00:05:18,385 As you move it into place, 63 00:05:18,385 --> 00:05:23,043 guides will appear to help you keep everything aligned. 64 00:05:23,043 --> 00:05:26,500 So I need another one of these arrows for the next row. 65 00:05:26,500 --> 00:05:31,038 A quick way to duplicate it is to hold down Shift+Option on your keyboard as you 66 00:05:31,038 --> 00:05:32,431 drag it to the new line. 67 00:05:34,656 --> 00:05:38,975 Great, now let's just nudge this section up a bit. 68 00:05:41,333 --> 00:05:46,487 Great, let's pause for a moment and think about social Sarah. 69 00:05:46,487 --> 00:05:50,871 She mostly uses the app to get home safely after a night-out partying. 70 00:05:50,871 --> 00:05:54,693 In her partying state, she frequently fumbles on her phone and 71 00:05:54,693 --> 00:05:56,072 has troubled typing. 72 00:05:56,072 --> 00:06:00,333 We want to create a payment process that's as easy as possible, and 73 00:06:00,333 --> 00:06:02,062 requires minimal typing. 74 00:06:02,062 --> 00:06:07,712 Since this is an iOS app, it'd be helpful to offer Apple Pay as a payment option. 75 00:06:07,712 --> 00:06:09,579 Once it is set up on a user's phone, 76 00:06:09,579 --> 00:06:12,273 it just requires a thumb print to accept a payment. 77 00:06:12,273 --> 00:06:16,415 This would perfect for Sarah on those late nights, when she's outside a bar, 78 00:06:16,415 --> 00:06:19,301 surrounded by strangers trying to get her attention, 79 00:06:19,301 --> 00:06:23,022 while she fumbles through her purse, trying to find her credit card. 80 00:06:23,022 --> 00:06:25,775 I'll repeat the previous steps to add in Apple Pay. 81 00:06:30,313 --> 00:06:33,805 Now let's consider a businessman Brian's experience. 82 00:06:33,805 --> 00:06:37,588 He uses a company credit card to pay for his rides. 83 00:06:37,588 --> 00:06:42,382 How might we help him distinguish his personal Visa card from 84 00:06:42,382 --> 00:06:44,262 his company Visa card? 85 00:06:44,262 --> 00:06:48,156 I could add a label to say the Visa card is a business card. 86 00:06:52,266 --> 00:06:58,078 I'll specify it as the default one since you may have several business cards, 87 00:06:58,078 --> 00:07:00,115 but may use one primarily. 88 00:07:00,115 --> 00:07:02,496 Now this is looking a little cluttered. 89 00:07:02,496 --> 00:07:05,429 What's another way we could solve this? 90 00:07:05,429 --> 00:07:09,124 How about separating the cards into two different lists. 91 00:07:09,124 --> 00:07:12,047 Let's create another wireframe with this layout. 92 00:07:12,047 --> 00:07:14,510 In the bottom right corner of Balsamiq. 93 00:07:14,510 --> 00:07:17,506 Locate the alternate version section. 94 00:07:17,506 --> 00:07:20,893 Click the plus icon to make a new version. 95 00:07:20,893 --> 00:07:25,264 This creates a copy of your original wireframe which you can iterate on. 96 00:07:25,264 --> 00:07:32,543 Double click the alternate version text, and change the name to Two Payment Lists. 97 00:07:32,543 --> 00:07:34,179 On the canvas click and 98 00:07:34,179 --> 00:07:38,758 drag a rectangle selection around the list to select all of it. 99 00:07:38,758 --> 00:07:43,501 Press Shift + Option on your keyboard to duplicate it as you drag it. 100 00:07:50,855 --> 00:07:55,903 Now we wanna add section headers to denote personal and business. 101 00:08:27,181 --> 00:08:31,624 I'm gonna replace the business Apple Pay option with a Mastercard. 102 00:08:38,629 --> 00:08:41,571 Double click the icon to quickly edit it. 103 00:08:41,571 --> 00:08:45,195 This opens up a list of all the icons to choose from. 104 00:08:50,205 --> 00:08:53,524 Let's get rid of the extra business text that we have here. 105 00:08:58,054 --> 00:09:02,159 Let's keep default since it is handy to say what the default card is for 106 00:09:02,159 --> 00:09:03,142 each category. 107 00:09:05,037 --> 00:09:08,239 I'm gonna keep the parentheses cuz it does help it stand a bit more if 108 00:09:08,239 --> 00:09:10,162 you're scanning this really quickly. 109 00:09:20,786 --> 00:09:25,313 I think it's a bit redundant to have the add a new card row listed twice, so 110 00:09:25,313 --> 00:09:27,951 let's just put it at the top of the screen. 111 00:10:49,275 --> 00:10:53,609 I'm gonna add a line to separate the add a credit card and the stored credit cards. 112 00:11:12,142 --> 00:11:16,834 Now in this version it's a little hard to tell the list apart from the added credit 113 00:11:16,834 --> 00:11:17,736 card section. 114 00:11:17,736 --> 00:11:21,630 So I'm gonna add the borders back into the lists. 115 00:11:21,630 --> 00:11:27,794 I'm gonna select both and click Show Border, I'm gonna insert them above. 116 00:11:53,851 --> 00:11:57,662 The guides will be your friend here, cuz they'll help you keep everything aligned. 117 00:12:07,027 --> 00:12:08,394 Looking good. 118 00:12:08,394 --> 00:12:11,513 I like how the sections are more clearly defined now. 119 00:12:11,513 --> 00:12:14,701 If you wanna compare the two that you just made, 120 00:12:14,701 --> 00:12:17,901 just click through to the Alternate Versions. 121 00:12:17,901 --> 00:12:22,145 So here's the first one, here's the second iteration. 122 00:12:24,883 --> 00:12:27,665 It's good practice to rename these variations so 123 00:12:27,665 --> 00:12:29,861 that way you keep track of what you did. 124 00:12:29,861 --> 00:12:35,674 Let's name this one Two Payment Lists. There 125 00:12:35,674 --> 00:12:38,784 are several more iterations I could make to this screen, so 126 00:12:38,784 --> 00:12:41,780 I encourage you to pause and create your own variations. 127 00:12:43,469 --> 00:12:48,116 The next part is to imagine what it might look like to add a new card. 128 00:12:48,116 --> 00:12:51,326 Since this is a wireframe for a whole new screen, 129 00:12:51,326 --> 00:12:55,477 instead of creating an alternate variation, I'm gonna click 130 00:12:55,477 --> 00:12:59,881 the plus icon in the top left of Balsamiq to create a new wireframe. 131 00:12:59,881 --> 00:13:02,702 Double click on the title to rename it too. 132 00:13:02,702 --> 00:13:05,347 Add a credit card and click Rename. 133 00:13:08,494 --> 00:13:13,588 Go back to your previous wireframe, select it all and press Ctrl + C. 134 00:13:18,347 --> 00:13:24,701 Then return to your new canvas and press Ctrl+V to paste it. 135 00:13:24,701 --> 00:13:29,428 Double click the title of the screen and rename it to Add a credit card. 136 00:13:38,818 --> 00:13:42,863 Another way you can do this is to hover over the bottom right of the previous 137 00:13:42,863 --> 00:13:46,597 wireframe, click on the arrow that appears and choose Duplicate. 138 00:13:50,750 --> 00:13:53,865 All right, so we actually don't need the majority of this so 139 00:13:53,865 --> 00:13:55,527 I'm gonna delete most of this. 140 00:13:58,362 --> 00:14:02,277 The fields we'll need are name on card, 141 00:14:02,277 --> 00:14:07,228 credit card, expiration date, CVV, Zip code and 142 00:14:07,228 --> 00:14:11,275 option to set it as personal or business. 143 00:14:11,275 --> 00:14:15,332 And a checkbox to denote it as the default card. 144 00:14:15,332 --> 00:14:19,606 In Quick Add, search for Text Input and Text to create the form. 145 00:15:19,649 --> 00:15:22,799 Now, for the credit card number input, I'd love for 146 00:15:22,799 --> 00:15:25,679 the icon to change as the credit card is entered. 147 00:15:25,679 --> 00:15:30,249 So I'm gonna add a default credit card icon as the default icon. 148 00:15:34,525 --> 00:15:37,444 I’m gonna make this extra small so it’ll fit in. 149 00:15:45,178 --> 00:15:49,627 You can nudge the icon with your up and down arrows on the keyboard. 150 00:15:49,627 --> 00:15:53,101 For the next section of the form I wanna have a drop down. 151 00:15:53,101 --> 00:15:56,797 The dropdown will be for personal card, or business card. 152 00:15:56,797 --> 00:16:01,546 I also wanna checkbox so that the user can select if it's the default card. 153 00:16:01,546 --> 00:16:03,820 Search Quick Add for dropdown. 154 00:16:05,954 --> 00:16:09,728 Another name for dropdown is ComboBox, so we're gonna choose the first one. 155 00:16:13,033 --> 00:16:15,824 Once again, just double click to edit the text. 156 00:16:22,707 --> 00:16:25,225 I'm gonna set Personal card as the default, 157 00:16:25,225 --> 00:16:27,354 since that's the majority of cases. 158 00:16:30,346 --> 00:16:32,149 Now, I'm gonna search for checkbox. 159 00:16:47,605 --> 00:16:51,259 I wanna add a line in between the normal credit card options and 160 00:16:51,259 --> 00:16:54,991 these additional ones such as personal, and save as default. 161 00:16:57,155 --> 00:16:59,455 So I'm gonna add another horizontal rule here. 162 00:17:24,162 --> 00:17:27,926 Finally, we just need a button so that you can add a credit card. 163 00:17:45,526 --> 00:17:47,923 This is looking pretty good. 164 00:17:47,923 --> 00:17:50,909 Now I wanna show you a cool part of Balsamiq, 165 00:17:50,909 --> 00:17:53,829 which is the ability to add interactions. 166 00:17:53,829 --> 00:17:56,497 Let's switch back to the payments screen. 167 00:17:56,497 --> 00:17:59,247 Click the Add a credit card link, and 168 00:17:59,247 --> 00:18:03,959 in the right panel add a link to the Add a credit card wireframe. 169 00:18:03,959 --> 00:18:06,643 This will make this link to that screen. 170 00:18:06,643 --> 00:18:10,051 Let's enter the presentation mode to see it in action. 171 00:18:18,820 --> 00:18:20,616 Those are just the basics. 172 00:18:20,616 --> 00:18:24,299 Keep iterating on your own to find other ways to add a card. 173 00:18:24,299 --> 00:18:30,006 As you empathize with Social Sarah, who was often adding chaotic environments, 174 00:18:30,006 --> 00:18:33,574 we want to making adding a card as easy as possible. 175 00:18:33,574 --> 00:18:38,369 A feature that would help her and others, is the ability to automatically add 176 00:18:38,369 --> 00:18:41,707 a new card, by scanning it with a smartphone camera. 177 00:18:41,707 --> 00:18:43,790 On your own draw the wireframe needed to add this functionality.