One are you guys welcome back so the next app that we are going to design out is called Savir And basically
what it does is it allows you to easily save for items that you want to eventually buy in the future.
But we're going to approach it a little differently.
I'm going to give you that piece of it.
It is an app like I said that allows you to quickly say for items.
The sky's the limit as far as functionality goes so the reason why I say that is because obviously you
will need to link up to bank accounts et cetera in order to stow money away to save.
We won't have to worry about all that right now because we are in design mode.
But let's assume that that is all very very plausible and possible.
And so for our three questions we've had the first one.
What is the app saver.
So we've answered that.
So for number two and three which are what I want you guys to do is think about the apps personality
how do you envision it.
Right.
So I won't be giving those two answers for you.
You're going to do it yourself and then as we build out the app go ahead and modify the designs accordingly.
You can either follow along with what I'm doing or you can create your own you know maybe change some
fonts or some colors some styles to match your interest for number two and three.
So if you don't remember the second one is if your app was a person how would you describe them.
And the third one is who is using your app.
So think about people generally who want to save for a specific item range anywhere from computer speakers
all the way up to a car or a house doesn't matter.
But define at least loosely your target market.
So we're going to approach this one a little differently.
Instead of diving right into designing what we're going to do or what we're going to talk about rather
is a four step process that was basically coined by nearly all he is the author of hooked.
And I definitely want to give him credit for that because the book is phenomenal but basically he talks
about four things trigger action reward and investment I think it's really important to wrap our head
around those as we build our products so for example a trigger might be internal or external.
So something that is inside the app that gets you to maybe dive into an action or you know do something
within the app an external one could be things like paid marketing could be like a push notification
that my Twitter actually on the border.
But you guys get the idea.
So trigger is going to start this entire process.
Action is something that the user is going to do or perform that alludes to an eventual reward.
Right.
So it's an action that has some sort of incentive or it might be unknown at the time but it alludes
to some some sort of reward at the end of the tunnel and the actual reward should be something that
leaves the user wanting more right.
So you you collect coins and now you want you want more you get an upload or something.
And in a social network and now you have a higher status or a badge or a trophy.
Right so those are the rewards that you kind of want to be thinking about making sure that the user
yearns for more of them.
And then lastly is investment.
And basically once the reward is done there should be something that basically gets the user to invest
back into the app.
And this could be an action it could be something definitely that loops back to the trigger but it should
allow the user to become heavily invested in the app over time.
So these are the four elements that we're going to be working with as we build out our app saver and
we will go ahead and get started.
Right guys so what I'm envisioning for this one is basically a more or less a scroll view across the
center of the screen where a user could choose to save for various items or they have input.
But I also want to have a button that has like add funds to all right because I think making this super
super easy and useful for people is is crucial.
It is hard enough to save already.
Let's make this as easy as possible.
Right.
So that's the way I'm envisioning it.
I'm going to keep this art board on here so we can constantly be reminded on what we're looking to do
this trigger action reward and investment.
So let's go ahead and insert an artwork.
IPhone 7 is fine.
And I'm going to start by manipulating the background so I am going to insert a rectangle and I'm just
going to throw it right over
the entire board.
Let's get rid of the borders.
And I want to find a cool green color something that reminds me of money.
Be nice.
It doesn't look too bad.
See I think I think it looks good.
Go ahead and find a green color that you like and let's rename this flower at it we'll call it save
her home.
And let's start building this out so what I would like to do a lot is insert some sort of banner or
headline that welcomes the user back just adds a nice personal touch and is a really creative use of
space.
So I'm going to choose light and answer some text and I'm going to make this white in color.
I'm just going to say welcome back
and this is also a great opportunity for you as a developer or product expert to put some custom words
in here so it could be something like You're doing great super general or it could be something like
you are.
Sixty five percent completed of your goal.
Right.
Is that something that will remind the user of what they're doing and how far along they've come.
And this is a really cool really cool way to kind of engage them personally.
So to make this a little smaller.
Too small
even if that makes sense.
Sixty five percent completed your goal.
Maybe we could do something like.
You are eighty five percent
complete with your first goal.
Seems to be right.
It's boost us up a little bit and make this a little bigger.
It's the kind of spans out I'm just going to plot this right smack dab right here doesn't need to be
perfect for now.
OK now let's go ahead and make that horizontal scroll view that we are talking about so I'm going to
insert an oval
let's make it around that big.
They definitely need to be clickable easily so I think that's a good size.
And let's get rid of the borders.
I'm going to make this white
and when we open it up I think we should have the first huge button call that actually be you know like
add funds to all of your items right that you're saving for.
So the way I see this playing out is there is a specific amount that you can put every time you click
the button to add ad funds and that'll slowly increments.
For example if I'm saving for a $2000 guitar I could say my goal is $2000 and this is where you probably
put this where you're creating the item.
And every time I hit this button I want to put $25 in.
Right.
So that's kind of like the idea behind it but we'll go ahead and just type in
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
and I'm going to decrease the size fits in the circle.
All right now with our text and are selected we're just going to align it horizontally and vertically.
All right.
That looks really really good.
Now I am going to copy and paste this oval and I'm just going to put a little ring around it to show
that it is the it's the one being kind of in the forefront.
So I put it behind the one that we just made the first and with that we made.
And I'm going to go over here and click scale and I'm going to scale a roughly 110 percent.
So if you guys notice it's bigger but it's behind it's you can't tell because they're both white.
So let's get to the Phil and outer border and we'll make the border white.
Now let's increase the thickness.
So kind of looks a little more filled out looks nice and we'll go ahead and grab all of these elements
and commands you to grip them.
We'll call this add funds to all
OK.
So we're going to have more right like if you swipe.
Ideally you'd find you know your guitar your house or your car.
But we also want a place where we can create an item right.
So let's go ahead and do that first.
I'm going to hold down option and I'll drag this off
right.
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
on the forefront.
Let's first get rid of this background of all and secondly what I want to do is go here and click scale
and on a scale this down to 80 percent.
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
to the side.
And I want to drag it a little closer maybe to here him and talk my grid on you know what I should be
fine.
Doesn't need to be perfect or anything.
And let's go ahead and change this instead of add fun to all.
Let's just say create new
and if this got misalign go ahead and just realign it vertically and horizontally.
And lastly what we're going to want to do is select the oval and I'm going to decrease the opacity.
I'm going to go with 75.
You can go with whatever you whatever you like how you see fit and cool so we have our general main
call to action you know add funds to all you can swipe and then click this to create a new item or and
the rest of the items that we are going to input are going to be essentially on the right so I'm going
to copy this over with option drag and let's just make up one item that we have already put in so I'll
just say maybe it's har right.
I would love a new guitar and I'm going to align this vertically and horizontally as well.
So let's go back and let's rename all of these.
They create new
and this one is our guitar.
And that's that's looking really good.
So just to recap add fun to all is going to add whatever small amount that you had set in let's say
a settings or when you created the item to all of them and then you can swipe left to create a new one
or swipe right to maybe just individually contribute to those items that you've created.
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
adding funds especially because I don't know what all of these add up to.
We want to make it really easy for our users to digest.
So how can we accomplish this both visually make it visually appealing but also give them a top line
number that they can easily look at and say like OK all of these out to let's say 200 dollars.
I can definitely do that.
I just got paid.
I'm going to save for my new guitar in my new house or whatever.
So let's go ahead and insert some text
and this will be our first line item.
I'm going to make sure this is left aligned as well.
Let's make this white in color and we'll say something like.
So it's guitar
and I'm going to boost this fine up just a little bit 15.
I don't know how I got to a point for well
right.
And this will be somewhat of like a little table view.
I'm going to move all of these up just a little bit.
So we have some space to work with.
Go ahead and grab these three.
I'm going to command you to group them.
Call it scroll view.
Let's just bump it up just a tad.
All right.
So we have our guitar.
And what I think will be really cool is if we showed how much the item was how much you have currently
saved roughly in visually and then how much the contributing amount is going to help it.
So let's go ahead and insert an a rounded rectangle.
Let's go ahead and drag all the way across
looks really good.
I'm going to get rid of the border and I'm going to make this white
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
points a line from the left and let's go ahead and enter some text again and we'll just say this is
maybe like a $2000 guitar right so just say to K
and we'll make this roughly 20 points away from the right.
And let's just lastly make sure that this is the end of our meter is 20 points away from $2000 so that
is looking good.
I just realize that it is a little off.
So what I'm going to do is to align this horizontally and then I'm going to have these in the center
between the the edges here so this looks good.
Now bring us in a little more.
All right so here's our little meter.
So far we have.
We've accomplished what the item is how much is it going to cost.
So let's go ahead and fill up the meter so it reflects how much we have saved so far.
So what I did was I'm going to copy and paste this rectangle that we just created.
And I'm going to drag it down let's just say that we roughly saved.
I don't know 40 percent.
Right.
So there is our 40 percent mark.
I mean a quick fill and let's choose a color that kind of stands out.
I like this orange and feel free to go to Adobe cooler or Palatinate to mess around with the Hex's the
values you know whatever you feel could reflect the app's personality best.
So just to keep things tidy I'm going to rename this orange progress
and I'm going to rename this one full progress
and we're going to need one that reflects how much it's going to increase if we add funds to that specific
item.
So what I'm going to do is copy and paste my orange progress one more time and I'm going to choose the
one behind it and I'm just going to stretch it out.
Just a little bit.
And let's go ahead and decrease the opacity.
How cool is that so now we can see here's where we are.
Here's how much more we're going to be once we add funds to it.
And here is our goal.
Right.
So let's go ahead and group all of these together because they're kind of all floating around in the
Wild Wild West out here and I'm going to align it vertically and command you to group and let's say
this.
Item 1.
Right because since we're adding funds to all of our items we're going to need a couple of these to
reflect and reflect that properly.
Someone to hold down option and I'm going to drag to copy it.
I mean to make a new one and feel free to have a little fun with this.
Make up some items that you know ideally you'd save for your target market might save for.
I'm going to just change this to maybe house.
That would be nice.
And I'm definitely not near my goal for that.
But we'll just decrease that a little bit.
And since I'm greedy I want a $3 million dollar house.
I just put three million right there and there's no way I'm even close to this anyways.
But it looks cool.
So.
So there's that one and still one more time
and we'll say TV was can use a new TV for this.
Maybe it's $500
and I want to be super close to this goal so let's stretch the sat a little more.
All right.
So that's looking really really good.
We've actually accomplished a lot by doing this so when you see add funds all you can quickly see you
know how much is going to increase all of your savings.
But we still don't know how much that all adds up to in the end.
And you want to show your users make a super easy for them to get to the bottom line.
OK how much am I going to be taking out of my paycheck for this so I'm going to insert a rectangle.
And let's just go ahead and have it spend the bottom.
You can have it roughly this high.
I'm going to go with 65.
I think that looks pretty good.
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
bars
and are going to do is insert some text to say add and it could be whatever number it would end up being
generated.
So we'll say $140 right.
Let's also make this just a little bigger.
And just snap that right in the center.
So go ahead and align that vertically and horizontally.
And let's just Comanche to group it and we'll say add button.
All right so that is looking great already.
Lastly what I want to do is let's just rename these we have an item to enter.
Item 3 it's let's go ahead and once you've done all that we can group them together and call it progress
table view this is really awesome.
So ideally it would be really cool Now if you swipe over to guitar and we'd have just the guitar progress
if you swipe over to your house or just the house progress.
Maybe there's some some more details since you have a little more room but everything is looking really
really good on this home screen.
One thing that I would say that we probably need to do is we need to find a way to have the user link
up all of this information right as far as like their bank accounts go.
We won't really dive too much into that but we just want to at least have an avenue for them to for
them get the idea.
So go ahead and open up chrome
or Safari and go to the noun project.
Now all we're going to need to do is find some sort of little settings icon.
Go ahead and find one that you like that matches the personality that you've created for your app.
I kind of like this one looks cool.
Let's go ahead and download it and drag it onto sketch and of course it always drops on at like 40000
by 40000 pixels so we're going to want to scale it down.
Just a little bit.
And you guys know the drill just double click to go into edit mode and let's get rid of this text
and we'll just dump this right in the right corner right here.
We can go ahead and click fill and make it completely white.
Just kind of adjust it a little bit so this is this is really cool because if we ever want to add more
functionality more pages maybe there is something else we decided that works really well with our target
market and we have a space appear for a hamburger menu if that's what you want.
Or we could easily just bump everything up in a tab bar.
So this keeps our flow of our homescreen really really flexible as well which is awesome.
So we've effectively done a couple of really really cool things here.
We've knocked out these first two which was the trigger and the action now the trigger I'm anticipating
might be some sort of push notification maybe it every time it senses a direct deposit in your bank
account that's greater than a certain number.
It'll trigger a push or a vacation or a call to action that brings you to this forefront.
So we have the sugar down and we also have the action which is basically this at $140.
And the anticipated reward is basically these you know indicators that shows where you will be.
Once you add $140 right it kind of gets you excited about how far you're progressing and with just a
tap of a button you can progress in all three of these arenas and the same for you know if your guitar
your house or your TV.