Transcripts
1. Introduction: My name is Dennis Field. I'm a part of Evangelist here at InVision as well as a designer. In this class, I'll be teaching you how to create an effective marketing homepage for your product. As a designer you have to naturally grow from designing for pretty to designing for conversions. And through the industry shift as well as the client demand I've grown into becoming a web designer. All these experiences have led me to InVision. We help designers all over the world and companies all over the world harness their full creative potential using features like prototyping, commenting, Asset Management, as well as live sharing. Things i may teach you in this class are all things that I've learned as I've transitioned from designing the page to actually designing with the intent to actually help my clients and companies move the needle more. There's going to be something for everybody in his course. Whether you're just starting off or whether you've been designing for a number of years. You may be struggling with how to layout the page, how to actually get the results you want. So, I think these fundamental skills will actually bring a lot of value to you.
2. Project Assignment: You've been tasked to design a homepage from Mac social media app constantly social. Your goal is to create a new homepage that increases signups. I choose this assignment, because I think it's important for you to understand the key fundamentals that are needed to offer more value to your clients in organization as you grow as a designer. You'll learn principles like design, storytelling, and layout are all things that you should consider and keep in mind as you not just design this project but for projects in the feature. For the sake of this project, conversions are our signups, but convergence could be anything that relates to your project. You'll also learn how to create a prototype in InVision, as well as how to manage the feedback process. For this project, you're going to need Photoshop or Sketch your choice, as well as a free InVision account that you can sign up for at invisionapp.com. You can expect this project to take you an hour to an hour and a half, depending on the complexity of your design. When you complete your project, be sure to share your InVision prototyping link and a screenshot of your project inside the skillshare project gallery. Remember, the best way to learn is by doing. As your goals change, as your audience shifts, you always have to revisit this design to optimize it. Let's get started.
3. Goals, Story, Social Proof, Conversions: Whenever you're designing something, you need to have a clear set of goals. Without that, you're just designing. So, the first thing that we need to do is we need to define our goals. For Simply Social, we're going to have three set of goals. The first goal is, overall, we need to put more emphasis on setups. Number two, we need to visually showcase the app. Number three, need to do a better job at explaining the story. For you, you may have a different set of goals, but it's important to define those goals before you really start getting into your design. So, once we have our goals established, we start talking about story. Story is really, really important to any homepage or any type of design in general. But when you think of great paintings, when you think of great designs, there's always some type of story that's happening there. Story can come in the form of copy. It can come in form of visual cues. Everything that you place on this design or on your homepage has to relate back to the story that you're trying to tell. It's really important to think of story in a homepage from top to bottom, starting with who are we talking to, what do we want them to think and what's the intended goal? All of this funnels down into the clear call-to-action and the pay-off essentially. So, when we get into sketching, we'll talk a little bit more about those. We'll talk a little bit about copy. We'll talk about how the imagery that we're going to use. Actually, it plays a key role in this story of this design. The other piece to this that we want to talk about is obviously measuring and conversions. There's a ton that we can talk about with conversion that's probably best suited for home, not a class of course. But for here I just want you to know that conversion should be measured with a number of factors. You can use great tools like Google Analytics as metrics, all the ways to measure it. But keep in mind that there's a number of factors that is going to affect your conversion. If you're doing a lot of advertising, that is going to funnel a lot of traffic, some qualified, some unqualified to your homepage. That's gonna skew your conversion number a little bit. When it comes to conversion, I like to think about what happens after conversion. So, say you get a great influx of uptake in your conversion numbers, more people are signing up for your app. But then you have a whole another thing. You have to worry about are those who are in the app now actually qualify users of the app? So, then you have a whole another set of optimizing that has to happen there. So, there's no great conversion number. You should always obviously be shooting for a high number, but there's also not a bad conversion because there's so many things that you have to leverage and depending on where you are with your product, your numbers are going to be a little bit different. But just keep in mind, there's a number of factors that's going to play into that. So, the next part of the project we're going to start sketching these ideas and I'm going to go into these principles of story and layout a little bit more. But let's move on to sketching out some ideas, talking about those ideas and seeing what we want to go with and what ideally we want to choose to then move into high-fidelity.
4. Concepting and Design: Okay. So, let's talk about some of these concepts. We're going to get into some ideas that we want to do with the goal of increasing the sign-ups to Simply Social. So, there's a number of ways we can do and there's a number of factors that we're going to play. For me, I generally like to start off with some loose, I don't even know if I want to call them wireframes, but just general loose sketches that start to put some emphasis on key areas of the design before I start moving into what I want to do on the computer. So, let's first start off with some key things to keep in mind in regards to user pattern. So, obviously, you have traditionally a navigation that sits at the top of the page. When in doubt, it's best to leave it there. There are things that have changed over time, one being the logo. The beauty of how we evolved is we've slowly moved away from needing an actual homelink. Now we actually have the great user pattern of being able to click your logo to take you back home. So, all things that you want to, more or less, make sure you have in your design at any given point. The other thing to think about are your footer and what goes there. Footers generally are used for some of the things that you don't really need to have distracting your main story. Those are the things like support links and things that don't really heavily evolve around the story of your design. So, let's talk about, the user pattern of scrolling your page. It's really great how apps like Facebook, Twitter have allowed everybody to embrace the idea of scrolling. Mobile obviously played a lot in that as well. So, now we don't have to worry too much about a fold. It's debatable, but I'm a big believer in the more canvas we have to tell our story, the more we should use of it. So, we know that people are going to be okay with scrolling the page, we also know that there's a lot of other mobile cues that people have picked up on. The hamburger icon is one thing to think about. I mean, that's something you can use in your design because now people understand, if I click this, I'm going to see more options. So, when it comes to focusing in on your story, keep those things in mind. Use them where you can, but never tried to necessarily break those user patterns because that's when you lose your audience or your visitor. So, in this design, we're going to have our navigation, our footer. We're obviously going to have a hero, that's tends to be another user pattern people want to see. And that's your front door, the cover of your book. That's a big high level story starts there. You obviously have your navigation links. And then everything in here and how this all starts to come together is a little bit more open to where you can put in these areas. So, to start with, maybe with our goal of explaining the app a little bit better. We may have an idea that we want to really play up the idea that with Simply Social, it's an app that allows you to connect all your social media accounts into one place and you're going to have all this great social media activity. We're going to really want to show that visually. So, we may have graphical versions of maybe social media accounts sitting back there. We may have a obviously some type of headline that is going to live here. You're going to want to obviously at this stage start to introduce the idea of a call to action. You may have somebody who comes at this site, they're already sold on it. They already know what it's about and they're ready they make action immediately. So, what you may do is you may obviously, and you see this in a lot of sites, you want to start adding your, we're going to call it CTA. That starts to open up this discussion around, okay. So now we have a number of things working here. We have a clear understanding of what the product's going to be. Maybe, in this case, we've got some great copy that we want a simple, concise headline. And the thing about Simply Social is what we do, is we make social media or networking simple. Maybe that's an idea of a headline. Very direct. I don't know, we'll have to test that, we can use cool user testing apps to do that. But let's start with something to get some ideas flowing. The next thing you want to do is start considering what happens down the page, right? We have this idea of the way our eyes move. A lot of times, with typical homepages, you're going to fall into that Z pattern eye movement, where somebody will start at the logo, shift across, and start to come down the page. So, we want to leverage that in our design. We want to make sure that each of those movements you're hitting on something important, something that's going to really emphasize your story. If you're doing something that's probably more editorial or story focused, maybe it's a blog layout, you may start to get into an F layout, where your F pattern, where most people scan down the page and move across an F as they're reading. But for most visual homepage designs, you're looking at a Z way out here. So, that's where you'll hit this page, go across, come across the navigation, move down, and then exit off. So, keep those in mind as you start thinking of this layout in terms of a scanability standpoint. Okay. So, I have this rough thought around a hero. The other part that we want to do is we want to visually show our app a little bit more. So, maybe here if that's a goal of ours, maybe we start to introduce some screenshots, maybe it's nice to when you can. Again, we're going to tell the story that this is obviously an application, the story obviously lives inside the web. If it's a mobile designs, this is a great use of where you start to see designs photoshopped into devices because it helps with that story. When you're scanning the page, you immediately know what's going to happen here, you know what this is. You'll see this with book landing pages a lot. Even if it's an e-book, it's important that you put it in context. So, if it's an e-book and it's living on a book, there's a book layout, it gives the audience or the visitor a clear, really quick understanding of what this is that they're going to download. So, in our case, what this is is actually going to be some type of app that lives inside the web. So, maybe this is a good opportunity to engage with some interactivity. Maybe a good way to show there's our different screens, use some nice conventional navigational elements that cycle the design. Maybe for the story you also want to start to talk a little about about three or four different in key elements that make up Simply Social. So, maybe you want to talk about that. You may want to bring that into this page a little bit. This isn't something where we're telling you we are a social media site, create your account and start posting here. We're saying we connect with your social media accounts. So, it's really clear up front that, the goal here is we take your social media network, bring it into this app, and we'll make it simple for you, we're unifying things. You may also want to talk a little bit about how it's secure. I think a lot of times, there's a concern of what are you going to do with this information if I connect my accounts? Well. Simply social, it's not only a great way to simply manage your social media, it's also secure way of doing it. Then I think a key thing here is to also say that you can now actually post out to these social media accounts as well. So, you're getting a few ideas as to what you can actually do here without even starting and signing up for an account yet. As you continue to move the page, we need to have a nice descriptive element. It could be a paragraph of copy, but we need to make sure that we are telling them a simple story, as to what this product does. So, you have that the front door, or the cover of the book and you're moving them through. So, you may have a real simple descriptive copy that backs up the statement above. As you continue to move through, you're going to get into elements like social proof, it's really important to include social proof on your design and when you're telling your story, because that's the convincing mechanism. People are more willing to sign up or invest money into a application or whatever maybe, when the trust has been built. That's where really get great testimonials or logos come into play that says,"We vouch for this, we've invested in it, and we took the first leap, we think you should as well. So when you can leverage those and leverage those effectively, and you can overdo testimonials but if you have some really key players that you can get into your product and your app, get them talking about it, definitely make sure that you have those and don't be afraid to use it. So, we're going to want to make sure we have the social proof aspect on here. What that's doing now is, you start off obviously with the quick high level, diving into some features if you want to ask the question of "Okay, well, what does this mean to me?" You start getting into okay what you can do is you compose, connect in to secured account, and then obviously hey, these great people are using and I should obviously be. So that's what that's doing for you and in terms of your story. As you're continuing to funnel through this, you may look at this story and you may say well, maybe we need to bring this up a bit. Maybe it makes sense to say okay, here's what we do, here's why we're doing it, and then here's the features if you want to get a little bit more to see the interface, and then you get into the social proof aspects. So, by the time you get to the bottom of this page, add my footer data here, you should have really nice caught action books of some sort. Could be as simple sign-up, to be a form, there's a lot of things we can talk about when it comes to the actual converting mechanism here, and there's a lot of studies around it, it's just a button that opens up into a model. That's when you take your first action, and we'll talk a little bit more about those when we get into the higher fidelity, here but we're just going to start laying this out. So, this could be a potential option to consider. I'd probably want to refine this a little bit more, so let's see how we can make this a little bit better. You may start here and again, you're going to continue with your base set of user patterns here we'll just say enough, we know what that's going to do and our footer here. We do think this is working but with our goals in mind, I think we can do a little bit better job at maybe blending these two worlds a little bit better. I think what you could consider doing if we start thinking about the Z pattern here. Maybe it's important to actually bring a device shot here. In my sketching, I generally keep it really loose because it's the way I like to sketch. Then we have maybe our big headline here, and then our call to action. What this is going to do, maybe navigation, is when you move across the page you're like."Okay, this is simply social". This is a little bit about what you want me to do, it's trusting, we have some about information so I'm going dig a little bit deeper. But immediately after that, I'm going to shoot across here, and I'm going to see wow, all right. This is what the app is. Depending on what I put in here, whether it's a shot of the activity stream, whether it's a shot of a person's profile, this is going to tell a big story. It's going to really say what this is without even happen to read it. So, it's much more effective on a scannability standpoint. Then I may then refine this and now this would be a good opportunity to maybe follow up with by putting my descriptive copy and headline, maybe here. So I may have a subhead that starts to back this up with a little paragraph. Maybe then I get into my three distinct features about the product. That's where you get into that you compose connected it's a secured account et cetera. You can start to see again if we go to the scalability aspect for those. Because we're in a very fast-paced world, we don't tend to like to read a lot so real quick you're starting at the high level hit of what simply social is about. So then once you refine that, you start to see you're condensing that story up the page a little bit. You're creating a lot of visual cues here as well, with the overlap that could be happening here with the device then you start getting into maybe a different way of displaying the finer details of simply social. They may at this point be asking the question, is there more that I need to know about this that I don't know yet before I commit to giving you my email address, and commit to joining simply social? This is when you can start to use this space, and when I say filler but this is when you start to kind of get into some of the finer details of your app. So, for simply social maybe we start to, maybe have a cool way of displaying the different screenshots of the app. I don't know. Maybe they go across the page as a grid. Or maybe they're all stacked here and we have some interactive elements here that allow them to dive deeper and almost take a quick tour before they commit. Maybe that's what lives here. What that's doing is now we've taken parts of this, pulled it into here, now we're getting this really nice refined optional step for them for those who want to dive a little bit deeper into what simply social maybe about. If they have further questions. So, once you go and from, once you review that, backdrop to your story, we're starting to hit on our goals, we obviously are making the app far more interface, and some apps don't need to worry about that like Facebook, LinkedIn, Twitter, if you look up their homepages, we know enough about them that we don't really need the story is actually, once you get inside the app. So, they've got great luxury of being able to create homepages that are super efficient, and if you look at them, it's just simply create account, like there's not much going on there other than that simple statement, and then they just want you to immerse yourself into the app, because that's where it starts to really come to life. But simply social is not quite there yet. Most apps aren't. It takes years to get to that level of trust and understanding that the world is telling their story for them. So, in this case, we need a lot of these elements to make sure that everybody understands what simply social is. Then you bring in your, it's always nice to again, if you step person still has questions, you're probably going to say "Hey, don't be concerned because these great people actually using our app and you should join the club" that's essentially what this social proof element does. We can even further that up with, maybe some social media icons and how many followers we already had and interests are we having outside of simply social around our community? How big is our community? Do we have thousands and thousands of Twitter followers? Is our Facebook page super massive? Like all that are cues visual cues that help visitors to your site understand that this is a place that I need to be and I should be investing into. So, then maybe as always, you're going to follow this up with that payoff. So, if you start running through this concept, you can start to see where I think our goals are getting hit a little bit better. We've hit on the nice visual cues of what the app is, we've done a really good job, I think I've explained it. Then also backing up that story with proof, and then clearly driving them down into the page with a nice call to action, and then you get into the footer. So those are some loose ideas, I'm going to probably now just frame this up a little bit more, work through them as a next step, and then we'll jump on the computer, and will expand on these principles and we'll talk about how photography, plays a role in this story, dominance and color, all the other elements that are going to start to bring maybe this concept to life a little bit more.
5. Creating the Design [Part 1]: Now that you've got our loose ideas we're going to start moving this into a more high-fidelity design. I think out of the two, I feel the second concept starts to work a little bit better for our goals in terms of a hierarchy standpoint as you quickly scan as certain things are popping up already, so we're going to move in that direction. So, feel free to use Sketch or Photoshop, it's your choice for the needs of this. I'm going to just use Photoshop because envision has some really cool integrations here that we can use later on to help tweak this out for the final little push. But for right now we're just going to start with a document. I already have one created here for the sake of time but if you want some dimensions to work with, for this I have this setup at 1500 pixels by 4355 pixels. That's a place to start. Again, we've got these great monitors now. It's leveraged the size of the screens to actually tell our story a little bit better. I've got some guides I've already marked in here but this is again, we're going to just get these ideas out here on the screen and then we can finesse from there. So depending on your skill level, we're not going to go into the finer things about Photoshop, but there's plenty of other great resources here on Skillshare, I'm sure that I'm going to help you with that. So let's get started by first pulling in some elements that we're going to work with. We've got this design, obviously we need a logo. I've a brand guideline that I'm going to be pulling some things over that we've already have are simply social. These are all saved out into the assets folder of the project curriculum, so feel free to grab that or like I said, use your own. So we're going to use this opportunity to also talk a little bit about some imagery. We know with simply social, we're talking to a young professional. Somebody who's obviously really active on a number of social media sites. Maybe this person uses LinkedIn, Facebook, Twitter, Instagram. Their world is very consumed into social networking. That's a place to start. I found this really great image here that I think we can use to start to tell our story a little bit. So to bring that in, we'll break this down to a little bit more as to why I think this image is going to work out really good for us. I'm going to flip this and start to talk a little bit more about that. I'm going to just cut this in real quick with a quick look at the mass. I want it to be about there. It's about where can I find that 800 pixels is a good spot to have that cutoff. So this image which works for me, is we want to tell a story that simply social is going to simplify your social media life. There's something really cool about this guy overlooking something as busy as a city but in this tranquil space of sitting off the lake here. He obviously fits our demographic a bit. That the nice benefit we have here, he's arched into our what will hopefully be our interface shot. He's going to naturally bring your eye into it. Typically there's a lot of nice things that happen when you start using imagery or faces pointing them into your code of action. You'll start to see an uptake just from that small change. Naturally as humans we follow, we've got to look at faces and we follow eyes, but this is really neat as you start to create that swirling movement into your interface shot. Obviously this is probably a little too strong of a treatment here. You can see some valid things happening. So, what we're going to want to probably do is post some other images in here and then we'll talk about how we can set that back when it comes to the treatment of our images. Let me open up an assets folder. I already have a MacBook image in here. That's already cut out with the interface in it. You guys are probably you're going to do it yourself but for the sake of time I just felt like it would be good to already have that in there. So, you can see as nice as this is looking there's still an issue. We have a dominance problem here. We're trying to do too much. We need to really set this back. The great thing about when you use really high quality photos is you got a lot of great things you can work with. That's key to creating a really effective homepage is to start with great photos. Maybe we can just really simply change this dominant issue by setting him back just a little bit and you'll start to see how he starts to pop off the page a little bit here. Now you're starting to see this emphasis here that's happening on simply social but you also have this really cool lifestyle shot that starts to obviously work with a design. You're already telling this story when we haven't even gotten to the details of things. Let me pull in some navigational elements here. I'm going to drag these from our brand board here. We're going to have a nice little tour and then in terms of something to think about you'll see that I've got this really nice space here. When in doubt air out your design. Things can get a little too tight and anytime you're designing what you're doing is you're confusing your story or you're trying to have people take too much in all at once, so I like to really air on the side of space around your logo. You want to have these moments of pauses in your story so people can consume what you're trying to tell them either it subconsciously or directly. So, let's just kick in a few navigational elements here. Again, we're just going to rough this in. We'll finesse this, this is far from like a final design, but we'll go from there. Maybe we have a link to Support or we have a Tour Support can go on the footer, but we'll just stick it up here in the top nav and then I guess we'll have to the ability for somebody to log in, because we are going to obviously have a big call to action, which is actually signing up, so we may not necessarily need to include that here at this point. All right. So, there we go. So you're starting to see how this design is starting to play out. Let's pull in our standardized headline element here. Our headline styles, sorry. Bring this in. Still seeing some value issues here, so we're going to try to set this back a little bit more where we can. Okay. All right, and again we're roughing things in. Then we'll bring in our standard button asset since we already have that from our previous landing page, and a lot of times you don't have to redesign things to recreate the wheel but our previous design already had a really nice guidelines set. So, we're just going to reuse where we can but also just more or less do better job at emphasizing certain thing is our goals. So, it doesn't always mean you have to redesign your entire brand to increase your conversions. So, you're starting to see how this is really shaping up, I think, nice from again, the hierarchy standpoint of things. Really getting them in the story since it was to go back to our concept here. You've got all of these pieces starting to play nice together. This overlap is going to be really nice, but we need to really pull this visual cue down a little bit but let's call the hero in a good spot and let's move down the page a little. When you can think of sections you're going to do a little bit better in terms of laying things out. Naturally your mind is going to focus in on these when you start breaking them apart versus putting everything all on the page all at once. Now, we've got this really cool visual thing happening here. We got this color that starts to move you through. It really starts to pop here so we know something important is going to have to happen here. That's where we started and we wanted to start explaining the substory of what do we mean by social networking simplified, like explain that to me. That's what we're going to do here. If you go back to our sketch we really wanted to emphasize as well as our goals what Simply Social is, a better way than we did in the past. So, the way to do that is you can use copy, in our case we're going to have a nice headline here and I think we're going to have a nice simple statement that's not a lot but it just sets the tone for this whole entire section. So, I've got some copy, like I said, already crafted here, but you're going to use your copy. Also feel free to rate your own copy for Simply Social. What would you do better here to make this design far more effective in your views. I'd love to see that. So, I'm going to pull in a few other elements. Now you're starting to see where we've got this huge lead up and we're starting to break it down, and you can already tell just from a visual standpoint that we're going to start breaking this into a deeper story around Simply Social. So, we're going to continue this theme around imagery, around this idea of taking something so complex and chaotic like social media, and combining it with this tranquilness that Simply Social will do. We've done that with this great photo of like this calming guy looking at something so complex. But I think we can do that here too and we're going to use that same theme of nature to make that happen. So, we've got this really cool, again, a really cool background image. This has already been created so I'm just going to drop this right in. It got a really nice values here happening. So, you've got this really cool, stormy shot. I'll show you the original now setback and subdued. So, we've got this really clear description as to what Simply Social is about, but we want to dive in a little bit more deeper into those three areas of focus. I took some time to refine that a little bit. These three areas should be really key differentiators that set you apart from your competition. We're going to just really play up the idea that you can post, you can connect all your accounts, because there's always obviously going to be a questions as to what accounts can I connect to Simply Social. We're going to answer that really quickly and we're going to talk about how this benefit of Simply Social and the idea of a simple social networking site like this and pulling this on to one place will actually increase your engagement with everybody that you're engaging with on a regular basis. So we're going to start with like this is set up of- We're going to have some icons here. Icons are a great way to, again, small little visual cue illustrating what something is about. It's neat how this design feel. There's a lot of complex things happening, but yet it seems still controlled. This is because we clearly defined our goals. We've clearly said our dominant thing here is to show off the app a little bit better and we're going to go into these little pieces, but we aren't losing the emphasis on the actual showing of the interface and we're using the imagery to, more or less, set up a nice backdrop that this all lives on top of. Obviously your visitors are going to say I wonder why they used this tree back here or this stormy setting but it plays into the background or in the subconscious a little bit. They may ask the question but you obviously want to have an answer and we do. All right. So, I've got some copy I'm going to fill in here. We're going to say Connect and we're going to say Engage here because those are the three benefits here that Simply Social offers you. It gives you the opportunity to post, connect and engage. We don't need to tell everything. We don't need to go into every little tiny detail, which I think oftentimes marketing sites do and I think that's where conversion starts to fall off is because the more information sometimes that you share, the more questions that get brought up to your visitors and the more confused they get. So, anytime you can more or less keeps things really, really focused, and you can see the key theme here is defining those goals, sticking to those goals, and keeping things really, really focused when you can in controlling that expectation. So, here you can start to see we've got that section working for us and I like it. We can work with our copywriter, I'm really tightening this all up. But for right, we've got some really key differentiators that we're hitting at. It sits in a really nice way of laying it out, maybe there's an opportunity here to create some aligns to connect these a little bit. So, as your eyes moves through here you can see that these are not three separate things, but this is one unit. We can tighten that up once we get to the final stage.
6. Creating the Design [Part 2]: Let's move on to kind of how we want to display our actual features. If we go back to our sketch, we got this opportunity now to highlight a few parts of the app. To recap, we've kind of got the hero working, it sets up our story, we're going across here, you get into the finer details, it's kind of the next hierarchy of our story, what's that high-level peas or the second tier I guess of what simply social is. Now, we want to kind of drill in a little bit deeper. There's always other questions, well, what does the composing screen maybe you look like or what's my profile look like? If I'm going to put myself out here. Because the cool thing about Simply Social is you can also individually connect with some people, kind of create your own mini profile here along with your other social media accounts connected together. So, there's obviously a question of how am I going to be viewed online? So, these are all things we're going to start answering in this section. So, let's start with our kind of a backdrop again. We already have a really cool background image. Now, we're looking at again, something else that stormy that need to be contained. Still got that already kind of sitting here, we're just going to bring that in. To do these effects, it's kind of it's really pretty much. Just a matter of playing with opacities to get these to work the way they are working. But you can see, there's a lot of imagery here but nothing is overpowering what we want people to get out of this page. So, I'm going to pull in these elements, I've got them all kind of already created. I'm going to bring these in and see how those can work. Maybe we want to focus on one at a time here, so maybe we'll just going to cut that out, start to see if how things could become, maybe we have a headline, somewhere in that headline could sit across the top, which actually feel a little weird to be honest, and you consider the way you scan the page, kind of breaks this flow, so maybe it's best to kind of offset like we had initially sketched. I think I'm actually going to disable that. Because that really makes that pop off the page. It really creates a dimension here that's cool. Then, we need some controls, alright? We can use- these could cycle on their own or we could do a little bit of both. Maybe they cycle on their own but we also have the ability to kind of connect with those if we wish. So, got a few more icons. We're going to highlight a few other things, right? We want to highlight the feed maybe, what's the feed look like for your profile? Kind of that public feed, How is the composing look like? This is maybe, how does a profile look like? We'll do testing around these scenarios to make sure that it's exactly what we want to talk about. But right now, we're just going to pull those into play, these should be navy. [inaudible] here. You could click on these, you'll see these change, and we can also probably look at maybe some type of line work that kind of works with that when we kind of tighten things up. So, now we've got the third, I guess you could say the third chapter of the story, kind of roughed in here. The next part is again going back to our sketch, the social proof. This is kind of where you are now starting to move them into the kind of the end of the book or the end of the story. You kind of copy this nice flow, leading it up, pulling them through. This is a nice moment of capturing, your eye bounces out the page really nice, we come across. So now, we want to do something here that I think offsets what we're doing in this section but also starts to introduce some of that social proof. So, we've got another cool continue with that theme, another really great way to show off some hustle-bustle. But we're going to subdue it with some visual opacity. So, I'm just going to drop that in there for you guys. Again, feel free to use any color combination. We think this works, because I think it starts to sandwich this really nice when you go through the page, bounces off, that device really nicely as well. So, when it comes to the actual test mode, you can do a number of things. You can kind of put them in a grid, just kind of let them run the page, we can get a little more interactive, maybe there's a carousel that scroll through, maybe there are actual cards, there's a lot of visual things you can do here. But the important thing is, really, just emphasizing the social proof, and I see there's a couple elements of social proof on the page as well. There's testimonials, and then I think we want to start doing a little bit of some share social media, social proof as well. But, for here, we just want to make sure that we let people take a moment, pause, and consume these testimonials. So, we're going to keep that in mind as we design this. We got the nice theme of going with a really nice icons, bring this guy back in. It just kind of sits on the page. We got another testimony here, and it can, that will bring in. Now, shifting to a centered layout, works here, because we've got kind of the center layout happening here. We've kind of alternated that, so when it comes to the layout, some, they think breaking that up a little bit as you work through the page. I think what we'll do, is just simply show the headshot, the description of who that person is from, and we'll let that sit here as well. Got a couple of those kind of already here. Maybe we've got [inaudible] I think there's another great opportunity to make some visual interactive pieces here. I like to put a little interactivity anywhere we can, but I'm not going to let it over power too much. Like I said, the goal here is really to talk more about laying out, storytelling versus like exactly how to do a number of actual treatments here. So, feel confident compositing some of these imagery is kind of a nice way of doing that for you guys. So, that's starting to look really nice. I mean, there could be some controls here, maybe on mobile, I think about the mobile experience maybe just flip through this with your thumb. Maybe these are other types of gestures, there's a lot of things we can do here, when you start getting into optimizing around mobile. But, for now, I think this is starting to really shape up nicely. Okay. So, as you're going through, you're always asking yourself, are we on goal? Are we getting distracting from the goal? Because you're going to start to wind down now, and I think, as in the sketch, we've done a really good job at winding down at the right time, and pulling them into the actual Goto action. So, in this particular design, and you may have a couple of designs, where the goal for your homepage maybe too not just increase sign-ups but maybe you want to also increase the newsletter sign-up, so there's a number of things that can happen on a homepage, but it's important to always emphasize one. This is going to be an area where I'll show you a good way of kind of doing that. A lot of times, it's a matter of how you set it up on the page. So, let's move into kind of the contact area here. I think for this, we're just going to keep it simple and color, versus getting- because now, we want to, like I say, we want to wind them down. I think this is a great way to introduce a contact form. But we're also going to have some additional social proof here. Maybe, we're going to give them the option to. If they're not quite ready to sign up, maybe we're going to give them the option to now just follow us a little bit. Maybe we want to drive them into some type of interaction with our company or with the product. But if they're not ready to sign up, we want to give them another potential slight touch and a slight opportunity to convert them into something else force, into another funnel of some sort. So, I think that's what we're going to do here, is we're going to push the contact or sign up form. But also, maybe look at doing something down here for promoting and showing their social proof, but also giving them an option to follow us on Facebook or Twitter. It's a very simple treatment here. We're just going to knockout this form here real quick though. Again, I've got a form that we've already used in a previous design, that we know is actually working from a formatting standpoint and from the actual conversion standpoint. The issue with this design wasn't entirely on whether our form was converting as much, were they getting the entire story of the product in terms of functionality of our call to action. Because there's a lot of things you can do here. When it comes to your conversions, you can simply have a button here that is-. Signup. That works great. There's a lot of studies around. If you get them to commit to just that and it pops a modal, you'll be able to kind of get the rest of the information for us. Things actually work really well if we just get them into the- get some of their information early on, and kind of drive them right into the actual on-boarding. So, our form and the sake of this, is simple sign up form, and they'll continue, and that will actually take them right into the actual app, where they can start engaging more. So, I'm going to knockout this form quick. Then, we'll talk about in this section, and we'll talk about how these all is going to work together. So now, we've got our signup form, we've balanced this in a way that-. Obviously, the first thing we want them to do is to get started. We want to get them- if they're not ready to do that, we're simply just going to see if they'll commit to one of these two options. Again, you could simplify this a lot more if you wanted to, and just use a call to action that opens a modal or takes them to another page, and all they do is focus on this. But we've found that we've had some good conversions around them just getting slowly started into on-boarding process right from the beginning. Then, we'll wrap this design up with a quick footer. So, the next step is, I'm going to wrap up this design and then we're going to bring it into envision and talked about how to get feedback from your existing user-base or within your internal team.
7. Collaboration and Feedback: Okay. So, now, we're ready to take that design and we're ready to get some feedback on it. We're going to do that by bringing it into InVision. I'm creating a good prototype and I'm showing you how to share it with others in your company or with existing customers. You get some high level, fast feedback before you start getting into the refining your idea a little bit more and handing it off to development. So, the first thing you need to do, is you need to create a free InVision account if you haven't already. You can do that by just going to signing up at invisionapp.com, entering your credentials, and then you'll have a free account that's good for one project. I already have an account, so what I'm going to do is take and create a project. It's really simple. I'm just going to call this Simply Social Homepage. It's going to be a desktop. There's a lot of things you can do around mobile, but this is a desktop project, so I'm just going to create it. The next thing you want to do, is bring your designs into InVision. You can do that through dragging and dropping them here, browsing forum, but I like to use InVision sync, which is really cool and a really great way of getting things into InVision in making updates on the fly without having to drag and drop anything pretty much for the rest of the project, as well as access a bunch of other shared assets with your team. So, it works with Dropbox, as well as on your local drive. So, we've got our screens now inside of InVision using InVision sync. Now we want to prototype those making these clickable, so we can get some real feedback from them in context without having to send them JPEGs through an email. So, go in here. We're going to make a few quick setting changes here. We're going to make this background black just to let this pop off a little bit more, but we're ready to start prototyping. First thing you may want to do is start linking this up, real fast without writing code. Come in here and we've got this user pattern that we talked about that's going to go across all pages that's going to simply be a template and we can call this nav. Since we know that's going to go on all the pages, we're going to make this go to the actual homepage. I make this go to the homepage, and click Save. This will actually go to a Tour, and maybe we want to actually drive that down to the actual, or a spot on the screen. So, maybe when I set this to actually go down to this section, or it could go down to an external url, it doesn't matter. So, now, we've got this Sign Up button. As obviously, we want to drive that down to the actual sign up form. I want to make that smoothly transition, and then we're also going to quickly prototype. This, we could prototype, but for the sake of speed, we're just going to quickly prototype at this section out right now. So, easily to do is simply hotspot. We're going to take this to Testimonial two, see that is. We're going to maintain that spot to the pages and drop, and then we're going to do that here to go to Testimonial three, and if we test this all real quick, you're going to see, once you get this going to the actual demo, how this is all going to work. So, I'm in my preview mode, just clicking the eyeball, we can get here, you click Sign Up and just drives you right down on the page. I click Angela Wells, it's going to bring her to the forefront. Well, actually, apply that to all pages there. So, what we'll do is, we'll quickly prototype the rest of this under these other pages and then we'll talk about how to set the stage for feedback and start getting some comments on this. So, we've got everything prototyped and it's ready to share. The first thing I want to do first, as a designer who is getting ready to present this, I want to leave some notes, maybe have some quick discussions. If you've got this cool feature here called Tours, that allows us to make little notes with our team without having to go in and leave necessary comment. This you can just simply call Tour point. So, maybe, I will suggest and I want to make here is, we can actually make this an animated GIF to scroll the feed thoughts. These are all things that just start some discussion. They're not really actionable comments, but they're things that you maybe think about. We may also want to do that with another section, maybe we do the same thing here where we say, "Is this the best screenshot? Can it be better?" I'll just note, maybe the copywriter, we talked the ones through maybe, "We need to refine some copy. Can we pull the copywriter in?" To just make some quick little talking points before we get into deeper dive on this, so with our teams. So, that was in Preview mode. We're ready to share this off. So, to do that, you can either go into Photoshop, create a really cool LiveShare session by using our cool little plug-in called LiveShare PS. Once it's load, you'll be able to create a virtual collaboration session that actually pulls this view of your design into the LiveShare, so you can collaborate internally with your team in real time on shaping up this design before you get it tested. Or, you can simply go here, create a simple little share URL, set some parameters and then start getting some feedback. So, I'm going to use a share route and what's going to happen is, you're going to get a URL, load this page, and then we're going to start getting some feedback. Here's what the share link looks like. So, you can see, we've made these marks that come up a really nice little beacons here that help you illustrate the actual Tour points that you've left or the talking points that you left for your design. Anybody can go in here, click them, reply to them, you can move through them. It's a great way to present your ideas when you can't be there. So, we've sent this off a feedback and we've got some comments already coming in that's in response to the actual Tour point doing an animated GIF. You can say, "Great! Let's make it happen," but we also have some other feedback that's starting to fall in here. "Can we move this button up? There's a need right now. There's some extra space here that we don't need so can we tighten that up?" This is all feedback that's coming in to your design in real time. So, as you see, "Sounds great," it manages feedback on the fly. Then, inside your InVision account, you can start to see these conversations happening. So you can respond. "Sure thing. Let's do it," and really starts to have this interactive collaboration that's happening across your design. The other great thing is, since we have this all in InVision sync, you can make these changes immediately in Photoshop. We can move this button up and we'll actually click Save. As soon as that syncs up to the server, now this change will actually be reflected in real time.
8. Wrap Up: As you start to push your design to the finish line, it's probably a good time to start bringing your designer or you're engineers and your developers in to start getting their feedback and leaving some actual notes that pertain to them specifically. You can easily do that. You obviously have your 12 points but you can also do that with really cool Dev Notes. So, in here, you can simply say, "This will need some additional code that we don't have." You can say a Dev Note saying, "This is a carry over from the last landing page." All notes that only developers will see when they choose to view on. So, the beautiful thing about the Share URL is that you can share this with your engineers and they, too, can click through and engage with the designer. They can also leave their own comments where needed. So, other great tools we have for working with your developers are Snaps, which allows you to take actually coded pages or any URL page and bring them into your InVision account. There's also the ability of shared assets where the developers and engineers can come in and actually download all the source files, images, fonts that they need to push this to the finish line. So, InVision starts to take over. You kind of move into a support role but everything is still being managed through the InVision platform.
9. Conclusion: So there you have it. Some key fundamental principles that you can start using to increase conversions or any projects in the future. So remember, feedback is a very important part of the creative process, it's important to embrace it. As your goals change, you're going to have to change your design. I'm excited to see which you create, please share with me in a project gallery below.
10. Explore Design Classes on Skillshare: way.
Dennis Field, Branding, UI/UX Designer
