1
00:00:04,800 --> 00:00:16,090
One are you guys welcome back so the next app that we are going to design out is called Savir And basically

2
00:00:16,090 --> 00:00:25,000
what it does is it allows you to easily save for items that you want to eventually buy in the future.

3
00:00:25,020 --> 00:00:27,590
But we're going to approach it a little differently.

4
00:00:27,620 --> 00:00:30,760
I'm going to give you that piece of it.

5
00:00:30,790 --> 00:00:36,330
It is an app like I said that allows you to quickly say for items.

6
00:00:36,850 --> 00:00:42,380
The sky's the limit as far as functionality goes so the reason why I say that is because obviously you

7
00:00:42,380 --> 00:00:48,560
will need to link up to bank accounts et cetera in order to stow money away to save.

8
00:00:48,620 --> 00:00:54,540
We won't have to worry about all that right now because we are in design mode.

9
00:00:54,670 --> 00:00:59,870
But let's assume that that is all very very plausible and possible.

10
00:01:00,010 --> 00:01:03,820
And so for our three questions we've had the first one.

11
00:01:03,850 --> 00:01:07,030
What is the app saver.

12
00:01:07,030 --> 00:01:08,350
So we've answered that.

13
00:01:08,500 --> 00:01:15,400
So for number two and three which are what I want you guys to do is think about the apps personality

14
00:01:15,410 --> 00:01:16,810
how do you envision it.

15
00:01:16,810 --> 00:01:17,080
Right.

16
00:01:17,080 --> 00:01:21,940
So I won't be giving those two answers for you.

17
00:01:21,940 --> 00:01:28,130
You're going to do it yourself and then as we build out the app go ahead and modify the designs accordingly.

18
00:01:28,140 --> 00:01:36,820
You can either follow along with what I'm doing or you can create your own you know maybe change some

19
00:01:36,820 --> 00:01:41,170
fonts or some colors some styles to match your interest for number two and three.

20
00:01:41,170 --> 00:01:49,170
So if you don't remember the second one is if your app was a person how would you describe them.

21
00:01:49,180 --> 00:01:52,240
And the third one is who is using your app.

22
00:01:52,240 --> 00:02:02,830
So think about people generally who want to save for a specific item range anywhere from computer speakers

23
00:02:02,830 --> 00:02:05,460
all the way up to a car or a house doesn't matter.

24
00:02:05,860 --> 00:02:10,700
But define at least loosely your target market.

25
00:02:11,080 --> 00:02:13,900
So we're going to approach this one a little differently.

26
00:02:13,960 --> 00:02:21,160
Instead of diving right into designing what we're going to do or what we're going to talk about rather

27
00:02:21,160 --> 00:02:30,540
is a four step process that was basically coined by nearly all he is the author of hooked.

28
00:02:30,610 --> 00:02:37,420
And I definitely want to give him credit for that because the book is phenomenal but basically he talks

29
00:02:37,420 --> 00:02:44,740
about four things trigger action reward and investment I think it's really important to wrap our head

30
00:02:44,740 --> 00:02:53,330
around those as we build our products so for example a trigger might be internal or external.

31
00:02:53,320 --> 00:03:01,810
So something that is inside the app that gets you to maybe dive into an action or you know do something

32
00:03:02,050 --> 00:03:08,710
within the app an external one could be things like paid marketing could be like a push notification

33
00:03:09,280 --> 00:03:11,840
that my Twitter actually on the border.

34
00:03:12,400 --> 00:03:13,710
But you guys get the idea.

35
00:03:13,720 --> 00:03:18,370
So trigger is going to start this entire process.

36
00:03:18,520 --> 00:03:26,940
Action is something that the user is going to do or perform that alludes to an eventual reward.

37
00:03:26,950 --> 00:03:27,220
Right.

38
00:03:27,220 --> 00:03:34,330
So it's an action that has some sort of incentive or it might be unknown at the time but it alludes

39
00:03:34,330 --> 00:03:44,650
to some some sort of reward at the end of the tunnel and the actual reward should be something that

40
00:03:45,220 --> 00:03:47,130
leaves the user wanting more right.

41
00:03:47,140 --> 00:03:54,980
So you you collect coins and now you want you want more you get an upload or something.

42
00:03:54,990 --> 00:04:00,240
And in a social network and now you have a higher status or a badge or a trophy.

43
00:04:00,260 --> 00:04:04,690
Right so those are the rewards that you kind of want to be thinking about making sure that the user

44
00:04:05,470 --> 00:04:08,010
yearns for more of them.

45
00:04:08,080 --> 00:04:10,620
And then lastly is investment.

46
00:04:10,620 --> 00:04:17,410
And basically once the reward is done there should be something that basically gets the user to invest

47
00:04:17,410 --> 00:04:18,450
back into the app.

48
00:04:18,460 --> 00:04:28,210
And this could be an action it could be something definitely that loops back to the trigger but it should

49
00:04:28,270 --> 00:04:32,860
allow the user to become heavily invested in the app over time.

50
00:04:32,860 --> 00:04:42,010
So these are the four elements that we're going to be working with as we build out our app saver and

51
00:04:42,370 --> 00:04:44,290
we will go ahead and get started.

52
00:04:59,120 --> 00:05:08,580
Right guys so what I'm envisioning for this one is basically a more or less a scroll view across the

53
00:05:08,640 --> 00:05:17,910
center of the screen where a user could choose to save for various items or they have input.

54
00:05:18,030 --> 00:05:26,220
But I also want to have a button that has like add funds to all right because I think making this super

55
00:05:26,220 --> 00:05:31,920
super easy and useful for people is is crucial.

56
00:05:31,920 --> 00:05:33,300
It is hard enough to save already.

57
00:05:33,300 --> 00:05:35,490
Let's make this as easy as possible.

58
00:05:35,490 --> 00:05:35,730
Right.

59
00:05:35,730 --> 00:05:38,760
So that's the way I'm envisioning it.

60
00:05:38,760 --> 00:05:45,430
I'm going to keep this art board on here so we can constantly be reminded on what we're looking to do

61
00:05:45,450 --> 00:05:48,730
this trigger action reward and investment.

62
00:05:48,730 --> 00:05:52,190
So let's go ahead and insert an artwork.

63
00:05:52,680 --> 00:05:53,870
IPhone 7 is fine.

64
00:05:56,100 --> 00:06:04,800
And I'm going to start by manipulating the background so I am going to insert a rectangle and I'm just

65
00:06:04,800 --> 00:06:06,690
going to throw it right over

66
00:06:09,850 --> 00:06:11,280
the entire board.

67
00:06:11,800 --> 00:06:13,240
Let's get rid of the borders.

68
00:06:13,280 --> 00:06:18,680
And I want to find a cool green color something that reminds me of money.

69
00:06:18,880 --> 00:06:21,820
Be nice.

70
00:06:22,410 --> 00:06:23,750
It doesn't look too bad.

71
00:06:24,650 --> 00:06:28,640
See I think I think it looks good.

72
00:06:28,640 --> 00:06:34,600
Go ahead and find a green color that you like and let's rename this flower at it we'll call it save

73
00:06:34,810 --> 00:06:41,470
her home.

74
00:06:41,680 --> 00:06:51,140
And let's start building this out so what I would like to do a lot is insert some sort of banner or

75
00:06:51,150 --> 00:06:56,760
headline that welcomes the user back just adds a nice personal touch and is a really creative use of

76
00:06:56,760 --> 00:06:57,870
space.

77
00:06:57,870 --> 00:07:06,210
So I'm going to choose light and answer some text and I'm going to make this white in color.

78
00:07:06,220 --> 00:07:08,220
I'm just going to say welcome back

79
00:07:11,910 --> 00:07:21,760
and this is also a great opportunity for you as a developer or product expert to put some custom words

80
00:07:21,760 --> 00:07:30,490
in here so it could be something like You're doing great super general or it could be something like

81
00:07:32,200 --> 00:07:34,470
you are.

82
00:07:34,500 --> 00:07:40,120
Sixty five percent completed of your goal.

83
00:07:40,480 --> 00:07:40,830
Right.

84
00:07:40,830 --> 00:07:45,640
Is that something that will remind the user of what they're doing and how far along they've come.

85
00:07:45,700 --> 00:07:50,620
And this is a really cool really cool way to kind of engage them personally.

86
00:07:50,650 --> 00:07:53,860
So to make this a little smaller.

87
00:07:53,980 --> 00:07:54,670
Too small

88
00:08:00,510 --> 00:08:01,480
even if that makes sense.

89
00:08:01,480 --> 00:08:04,000
Sixty five percent completed your goal.

90
00:08:04,030 --> 00:08:05,220
Maybe we could do something like.

91
00:08:05,270 --> 00:08:09,100
You are eighty five percent

92
00:08:12,620 --> 00:08:15,060
complete with your first goal.

93
00:08:17,040 --> 00:08:18,870
Seems to be right.

94
00:08:19,070 --> 00:08:21,960
It's boost us up a little bit and make this a little bigger.

95
00:08:22,280 --> 00:08:28,760
It's the kind of spans out I'm just going to plot this right smack dab right here doesn't need to be

96
00:08:28,760 --> 00:08:31,310
perfect for now.

97
00:08:31,460 --> 00:08:40,340
OK now let's go ahead and make that horizontal scroll view that we are talking about so I'm going to

98
00:08:40,340 --> 00:08:41,390
insert an oval

99
00:08:44,990 --> 00:08:46,530
let's make it around that big.

100
00:08:46,540 --> 00:08:52,490
They definitely need to be clickable easily so I think that's a good size.

101
00:08:53,230 --> 00:08:56,390
And let's get rid of the borders.

102
00:08:56,440 --> 00:08:57,400
I'm going to make this white

103
00:09:01,410 --> 00:09:09,330
and when we open it up I think we should have the first huge button call that actually be you know like

104
00:09:09,450 --> 00:09:14,020
add funds to all of your items right that you're saving for.

105
00:09:14,020 --> 00:09:24,570
So the way I see this playing out is there is a specific amount that you can put every time you click

106
00:09:24,570 --> 00:09:28,860
the button to add ad funds and that'll slowly increments.

107
00:09:28,860 --> 00:09:39,660
For example if I'm saving for a $2000 guitar I could say my goal is $2000 and this is where you probably

108
00:09:39,780 --> 00:09:42,210
put this where you're creating the item.

109
00:09:42,660 --> 00:09:47,070
And every time I hit this button I want to put $25 in.

110
00:09:47,130 --> 00:09:47,630
Right.

111
00:09:47,640 --> 00:09:53,040
So that's kind of like the idea behind it but we'll go ahead and just type in

112
00:09:56,260 --> 00:10:09,070
funds to all and let's make this bold and I'm going to have this the color of our green it's this one

113
00:10:11,510 --> 00:10:14,040
and I'm going to decrease the size fits in the circle.

114
00:10:18,350 --> 00:10:27,260
All right now with our text and are selected we're just going to align it horizontally and vertically.

115
00:10:27,350 --> 00:10:27,710
All right.

116
00:10:27,710 --> 00:10:30,180
That looks really really good.

117
00:10:30,180 --> 00:10:38,810
Now I am going to copy and paste this oval and I'm just going to put a little ring around it to show

118
00:10:38,840 --> 00:10:43,430
that it is the it's the one being kind of in the forefront.

119
00:10:43,430 --> 00:10:49,910
So I put it behind the one that we just made the first and with that we made.

120
00:10:49,910 --> 00:10:57,650
And I'm going to go over here and click scale and I'm going to scale a roughly 110 percent.

121
00:10:57,650 --> 00:11:04,710
So if you guys notice it's bigger but it's behind it's you can't tell because they're both white.

122
00:11:04,730 --> 00:11:14,260
So let's get to the Phil and outer border and we'll make the border white.

123
00:11:14,750 --> 00:11:17,660
Now let's increase the thickness.

124
00:11:17,730 --> 00:11:26,660
So kind of looks a little more filled out looks nice and we'll go ahead and grab all of these elements

125
00:11:26,720 --> 00:11:28,660
and commands you to grip them.

126
00:11:29,270 --> 00:11:31,980
We'll call this add funds to all

127
00:11:36,670 --> 00:11:37,140
OK.

128
00:11:37,140 --> 00:11:39,420
So we're going to have more right like if you swipe.

129
00:11:39,420 --> 00:11:44,240
Ideally you'd find you know your guitar your house or your car.

130
00:11:44,580 --> 00:11:50,310
But we also want a place where we can create an item right.

131
00:11:50,310 --> 00:11:53,940
So let's go ahead and do that first.

132
00:11:53,940 --> 00:11:59,030
I'm going to hold down option and I'll drag this off

133
00:12:01,790 --> 00:12:03,800
right.

134
00:12:04,370 --> 00:12:08,690
And there's a couple of things we need to do to make it look like it is kind of in the background it's

135
00:12:08,750 --> 00:12:10,000
on the forefront.

136
00:12:10,400 --> 00:12:21,220
Let's first get rid of this background of all and secondly what I want to do is go here and click scale

137
00:12:21,250 --> 00:12:23,610
and on a scale this down to 80 percent.

138
00:12:23,680 --> 00:12:29,020
So it kind of has a feel that it is it's not it's not the one that we're looking at it's kind of off

139
00:12:29,020 --> 00:12:30,300
to the side.

140
00:12:30,670 --> 00:12:42,430
And I want to drag it a little closer maybe to here him and talk my grid on you know what I should be

141
00:12:42,430 --> 00:12:42,960
fine.

142
00:12:42,980 --> 00:12:46,140
Doesn't need to be perfect or anything.

143
00:12:46,860 --> 00:12:51,010
And let's go ahead and change this instead of add fun to all.

144
00:12:51,010 --> 00:12:52,270
Let's just say create new

145
00:12:58,830 --> 00:13:06,720
and if this got misalign go ahead and just realign it vertically and horizontally.

146
00:13:06,870 --> 00:13:16,410
And lastly what we're going to want to do is select the oval and I'm going to decrease the opacity.

147
00:13:16,570 --> 00:13:17,950
I'm going to go with 75.

148
00:13:17,950 --> 00:13:26,830
You can go with whatever you whatever you like how you see fit and cool so we have our general main

149
00:13:26,830 --> 00:13:35,480
call to action you know add funds to all you can swipe and then click this to create a new item or and

150
00:13:35,480 --> 00:13:40,880
the rest of the items that we are going to input are going to be essentially on the right so I'm going

151
00:13:40,880 --> 00:13:50,330
to copy this over with option drag and let's just make up one item that we have already put in so I'll

152
00:13:50,330 --> 00:13:54,690
just say maybe it's har right.

153
00:13:54,690 --> 00:14:00,030
I would love a new guitar and I'm going to align this vertically and horizontally as well.

154
00:14:00,150 --> 00:14:04,190
So let's go back and let's rename all of these.

155
00:14:04,300 --> 00:14:05,250
They create new

156
00:14:08,110 --> 00:14:09,980
and this one is our guitar.

157
00:14:14,100 --> 00:14:15,660
And that's that's looking really good.

158
00:14:15,660 --> 00:14:23,970
So just to recap add fun to all is going to add whatever small amount that you had set in let's say

159
00:14:23,970 --> 00:14:32,130
a settings or when you created the item to all of them and then you can swipe left to create a new one

160
00:14:32,220 --> 00:14:38,450
or swipe right to maybe just individually contribute to those items that you've created.

161
00:14:38,460 --> 00:14:47,940
So this is cool but if I were using this and if I were a user I'd be a little hesitant to just start

162
00:14:47,940 --> 00:14:52,960
adding funds especially because I don't know what all of these add up to.

163
00:14:52,960 --> 00:14:56,360
We want to make it really easy for our users to digest.

164
00:14:56,370 --> 00:15:06,600
So how can we accomplish this both visually make it visually appealing but also give them a top line

165
00:15:06,600 --> 00:15:12,470
number that they can easily look at and say like OK all of these out to let's say 200 dollars.

166
00:15:12,540 --> 00:15:13,790
I can definitely do that.

167
00:15:13,800 --> 00:15:15,080
I just got paid.

168
00:15:15,390 --> 00:15:18,440
I'm going to save for my new guitar in my new house or whatever.

169
00:15:18,450 --> 00:15:23,970
So let's go ahead and insert some text

170
00:15:27,290 --> 00:15:29,080
and this will be our first line item.

171
00:15:29,090 --> 00:15:32,260
I'm going to make sure this is left aligned as well.

172
00:15:32,270 --> 00:15:37,130
Let's make this white in color and we'll say something like.

173
00:15:37,250 --> 00:15:38,270
So it's guitar

174
00:15:43,440 --> 00:15:48,770
and I'm going to boost this fine up just a little bit 15.

175
00:15:48,790 --> 00:15:50,920
I don't know how I got to a point for well

176
00:15:54,740 --> 00:15:55,120
right.

177
00:15:55,160 --> 00:15:59,630
And this will be somewhat of like a little table view.

178
00:15:59,630 --> 00:16:02,210
I'm going to move all of these up just a little bit.

179
00:16:02,210 --> 00:16:03,760
So we have some space to work with.

180
00:16:03,800 --> 00:16:06,580
Go ahead and grab these three.

181
00:16:06,590 --> 00:16:08,510
I'm going to command you to group them.

182
00:16:08,990 --> 00:16:12,050
Call it scroll view.

183
00:16:13,890 --> 00:16:17,350
Let's just bump it up just a tad.

184
00:16:17,360 --> 00:16:17,820
All right.

185
00:16:21,710 --> 00:16:23,070
So we have our guitar.

186
00:16:23,390 --> 00:16:32,030
And what I think will be really cool is if we showed how much the item was how much you have currently

187
00:16:32,030 --> 00:16:42,110
saved roughly in visually and then how much the contributing amount is going to help it.

188
00:16:42,110 --> 00:16:48,860
So let's go ahead and insert an a rounded rectangle.

189
00:16:48,940 --> 00:16:51,270
Let's go ahead and drag all the way across

190
00:16:55,540 --> 00:16:56,700
looks really good.

191
00:16:57,190 --> 00:16:59,740
I'm going to get rid of the border and I'm going to make this white

192
00:17:04,040 --> 00:17:11,450
and I'm going to talk go my grid I just so I can see exactly how far away I am I want this to be 20

193
00:17:11,450 --> 00:17:20,130
points a line from the left and let's go ahead and enter some text again and we'll just say this is

194
00:17:20,130 --> 00:17:24,390
maybe like a $2000 guitar right so just say to K

195
00:17:27,500 --> 00:17:34,610
and we'll make this roughly 20 points away from the right.

196
00:17:34,770 --> 00:17:45,900
And let's just lastly make sure that this is the end of our meter is 20 points away from $2000 so that

197
00:17:45,900 --> 00:17:47,490
is looking good.

198
00:17:47,760 --> 00:17:50,070
I just realize that it is a little off.

199
00:17:50,070 --> 00:18:02,190
So what I'm going to do is to align this horizontally and then I'm going to have these in the center

200
00:18:02,190 --> 00:18:09,340
between the the edges here so this looks good.

201
00:18:09,350 --> 00:18:15,970
Now bring us in a little more.

202
00:18:15,970 --> 00:18:19,390
All right so here's our little meter.

203
00:18:19,840 --> 00:18:20,800
So far we have.

204
00:18:20,830 --> 00:18:24,740
We've accomplished what the item is how much is it going to cost.

205
00:18:24,760 --> 00:18:30,730
So let's go ahead and fill up the meter so it reflects how much we have saved so far.

206
00:18:30,730 --> 00:18:36,760
So what I did was I'm going to copy and paste this rectangle that we just created.

207
00:18:37,770 --> 00:18:42,570
And I'm going to drag it down let's just say that we roughly saved.

208
00:18:42,730 --> 00:18:43,780
I don't know 40 percent.

209
00:18:43,780 --> 00:18:43,990
Right.

210
00:18:43,990 --> 00:18:49,150
So there is our 40 percent mark.

211
00:18:49,400 --> 00:18:53,110
I mean a quick fill and let's choose a color that kind of stands out.

212
00:18:54,600 --> 00:19:04,980
I like this orange and feel free to go to Adobe cooler or Palatinate to mess around with the Hex's the

213
00:19:04,980 --> 00:19:12,140
values you know whatever you feel could reflect the app's personality best.

214
00:19:13,020 --> 00:19:18,900
So just to keep things tidy I'm going to rename this orange progress

215
00:19:22,270 --> 00:19:25,060
and I'm going to rename this one full progress

216
00:19:28,120 --> 00:19:36,340
and we're going to need one that reflects how much it's going to increase if we add funds to that specific

217
00:19:36,340 --> 00:19:36,730
item.

218
00:19:36,730 --> 00:19:44,500
So what I'm going to do is copy and paste my orange progress one more time and I'm going to choose the

219
00:19:44,500 --> 00:19:47,480
one behind it and I'm just going to stretch it out.

220
00:19:48,290 --> 00:19:51,700
Just a little bit.

221
00:19:52,110 --> 00:19:58,530
And let's go ahead and decrease the opacity.

222
00:19:58,790 --> 00:20:02,760
How cool is that so now we can see here's where we are.

223
00:20:03,200 --> 00:20:06,470
Here's how much more we're going to be once we add funds to it.

224
00:20:06,560 --> 00:20:09,320
And here is our goal.

225
00:20:09,320 --> 00:20:09,620
Right.

226
00:20:09,620 --> 00:20:16,040
So let's go ahead and group all of these together because they're kind of all floating around in the

227
00:20:16,340 --> 00:20:26,670
Wild Wild West out here and I'm going to align it vertically and command you to group and let's say

228
00:20:26,670 --> 00:20:26,880
this.

229
00:20:26,880 --> 00:20:28,250
Item 1.

230
00:20:28,410 --> 00:20:32,880
Right because since we're adding funds to all of our items we're going to need a couple of these to

231
00:20:32,880 --> 00:20:36,810
reflect and reflect that properly.

232
00:20:36,930 --> 00:20:40,760
Someone to hold down option and I'm going to drag to copy it.

233
00:20:40,890 --> 00:20:45,250
I mean to make a new one and feel free to have a little fun with this.

234
00:20:45,450 --> 00:20:51,950
Make up some items that you know ideally you'd save for your target market might save for.

235
00:20:52,410 --> 00:20:56,410
I'm going to just change this to maybe house.

236
00:20:56,560 --> 00:20:57,810
That would be nice.

237
00:20:59,010 --> 00:21:03,600
And I'm definitely not near my goal for that.

238
00:21:04,850 --> 00:21:07,480
But we'll just decrease that a little bit.

239
00:21:08,490 --> 00:21:13,170
And since I'm greedy I want a $3 million dollar house.

240
00:21:13,170 --> 00:21:18,130
I just put three million right there and there's no way I'm even close to this anyways.

241
00:21:18,150 --> 00:21:19,070
But it looks cool.

242
00:21:19,070 --> 00:21:20,590
So.

243
00:21:21,240 --> 00:21:23,670
So there's that one and still one more time

244
00:21:29,920 --> 00:21:39,430
and we'll say TV was can use a new TV for this.

245
00:21:39,440 --> 00:21:40,990
Maybe it's $500

246
00:21:44,160 --> 00:21:48,300
and I want to be super close to this goal so let's stretch the sat a little more.

247
00:21:56,140 --> 00:21:56,460
All right.

248
00:21:56,460 --> 00:21:59,300
So that's looking really really good.

249
00:21:59,530 --> 00:22:07,560
We've actually accomplished a lot by doing this so when you see add funds all you can quickly see you

250
00:22:07,560 --> 00:22:11,490
know how much is going to increase all of your savings.

251
00:22:11,740 --> 00:22:16,170
But we still don't know how much that all adds up to in the end.

252
00:22:16,180 --> 00:22:20,840
And you want to show your users make a super easy for them to get to the bottom line.

253
00:22:20,870 --> 00:22:29,430
OK how much am I going to be taking out of my paycheck for this so I'm going to insert a rectangle.

254
00:22:29,870 --> 00:22:32,830
And let's just go ahead and have it spend the bottom.

255
00:22:33,410 --> 00:22:35,840
You can have it roughly this high.

256
00:22:35,840 --> 00:22:39,680
I'm going to go with 65.

257
00:22:39,740 --> 00:22:41,730
I think that looks pretty good.

258
00:22:42,620 --> 00:22:49,880
And let's get rid of the border and I'm going to have the fill of the same orange that I had my progress

259
00:22:49,880 --> 00:22:50,390
bars

260
00:22:53,230 --> 00:23:03,570
and are going to do is insert some text to say add and it could be whatever number it would end up being

261
00:23:03,570 --> 00:23:04,020
generated.

262
00:23:04,020 --> 00:23:06,640
So we'll say $140 right.

263
00:23:07,500 --> 00:23:10,010
Let's also make this just a little bigger.

264
00:23:15,060 --> 00:23:17,550
And just snap that right in the center.

265
00:23:17,820 --> 00:23:20,940
So go ahead and align that vertically and horizontally.

266
00:23:21,420 --> 00:23:30,920
And let's just Comanche to group it and we'll say add button.

267
00:23:30,950 --> 00:23:34,100
All right so that is looking great already.

268
00:23:34,100 --> 00:23:41,220
Lastly what I want to do is let's just rename these we have an item to enter.

269
00:23:41,220 --> 00:23:52,660
Item 3 it's let's go ahead and once you've done all that we can group them together and call it progress

270
00:23:53,470 --> 00:23:56,300
table view this is really awesome.

271
00:23:58,070 --> 00:24:05,180
So ideally it would be really cool Now if you swipe over to guitar and we'd have just the guitar progress

272
00:24:05,800 --> 00:24:08,690
if you swipe over to your house or just the house progress.

273
00:24:08,720 --> 00:24:16,640
Maybe there's some some more details since you have a little more room but everything is looking really

274
00:24:16,640 --> 00:24:19,450
really good on this home screen.

275
00:24:19,980 --> 00:24:27,090
One thing that I would say that we probably need to do is we need to find a way to have the user link

276
00:24:27,090 --> 00:24:31,340
up all of this information right as far as like their bank accounts go.

277
00:24:31,350 --> 00:24:39,410
We won't really dive too much into that but we just want to at least have an avenue for them to for

278
00:24:39,410 --> 00:24:40,490
them get the idea.

279
00:24:40,520 --> 00:24:43,260
So go ahead and open up chrome

280
00:24:46,680 --> 00:24:51,290
or Safari and go to the noun project.

281
00:24:51,290 --> 00:24:59,260
Now all we're going to need to do is find some sort of little settings icon.

282
00:24:59,290 --> 00:25:07,630
Go ahead and find one that you like that matches the personality that you've created for your app.

283
00:25:07,640 --> 00:25:12,240
I kind of like this one looks cool.

284
00:25:17,660 --> 00:25:27,930
Let's go ahead and download it and drag it onto sketch and of course it always drops on at like 40000

285
00:25:27,930 --> 00:25:30,960
by 40000 pixels so we're going to want to scale it down.

286
00:25:32,430 --> 00:25:33,410
Just a little bit.

287
00:25:33,450 --> 00:25:38,840
And you guys know the drill just double click to go into edit mode and let's get rid of this text

288
00:25:42,720 --> 00:25:48,030
and we'll just dump this right in the right corner right here.

289
00:25:51,260 --> 00:25:55,860
We can go ahead and click fill and make it completely white.

290
00:25:59,110 --> 00:26:06,760
Just kind of adjust it a little bit so this is this is really cool because if we ever want to add more

291
00:26:06,970 --> 00:26:13,900
functionality more pages maybe there is something else we decided that works really well with our target

292
00:26:13,900 --> 00:26:21,400
market and we have a space appear for a hamburger menu if that's what you want.

293
00:26:21,820 --> 00:26:25,060
Or we could easily just bump everything up in a tab bar.

294
00:26:25,060 --> 00:26:32,930
So this keeps our flow of our homescreen really really flexible as well which is awesome.

295
00:26:33,010 --> 00:26:37,440
So we've effectively done a couple of really really cool things here.

296
00:26:37,450 --> 00:26:44,740
We've knocked out these first two which was the trigger and the action now the trigger I'm anticipating

297
00:26:44,740 --> 00:26:52,570
might be some sort of push notification maybe it every time it senses a direct deposit in your bank

298
00:26:52,570 --> 00:26:55,100
account that's greater than a certain number.

299
00:26:55,600 --> 00:27:03,250
It'll trigger a push or a vacation or a call to action that brings you to this forefront.

300
00:27:03,250 --> 00:27:10,630
So we have the sugar down and we also have the action which is basically this at $140.

301
00:27:10,990 --> 00:27:20,170
And the anticipated reward is basically these you know indicators that shows where you will be.

302
00:27:20,200 --> 00:27:28,240
Once you add $140 right it kind of gets you excited about how far you're progressing and with just a

303
00:27:28,240 --> 00:27:35,310
tap of a button you can progress in all three of these arenas and the same for you know if your guitar

304
00:27:35,320 --> 00:27:37,090
your house or your TV.