Lessons

Lesson Info

Exercise: Design A Chocolate Ecommerce

Now it's your turn. Uh huh. You ready? It's warmed up. All right. So for people doing this at home, I would suggest, um, grabbing pieces of paper. And then you don't have to use, um Sharpie per se. But I like to use Sharpie because I just like to get the big ideas down really quickly. I don't want to get into the details yet. That's not the purpose here. But if you don't have ah, Scharping handy, obviously. Just grab pencil pen. They're all good. All right. So I'm going to explain a little bit. This is ah, website that we're gonna draw now. So this is a website that sells chocolates from around the world, and we're gonna time. It's so for every single exercise, you're gonna have three minutes to do it, and Jay Ko will keep the time for us. Um, so the first virgin is you're going to create the bare, minimal version of the home page, and I'll show you one needs to be included next. But just keep in mind that this is the bare minimal, so just do all the essential elements on there. This i...

s desktop. Yeah. So one needs to be included are the following items. So the essential. So you definitely need a header. You need a footer. Um, you need some sort of branding. It doesn't matter what your chocolate website it's called. Maybe just call like your name like No no. For example, like Joyce chocolate and then for you guys that can be like Bob's Chocolate, Sally's Chocolate Factory or something. Basically, which, what the website ISS is. You have a bunch of, um, manufacturers. I use source of chocolates from and then you're you're the distributor's. So you let people purchase those track lies on your website, and then you send it to them. Um, your users can come to the wife side and shop by flavors. So we have five different flavors when we have dark milk, white, assorted and kosher. Um, you can also shop by region because since we're selling tacos from all over the world, we are, um, categorizing them into, um, West F because South America, Central America and South East Asia, it's up to you to decide which one is more important. Maybe people do shop by region first, and then they see the flavors later, or they can. They can shop by flavors first and then the the sorted by region. Later. Um, we need to have a link to the gift card section so users can purchase gift cards and then send it to other people. Or users can redeem gift card afterward. Um, we need to have a little indication of, ah, place to log in and a place to add your chocolates into your cut. Okay. You guys got all of that down, all right. No pressure here. Three minutes. Let's go. Okay. And then I'll be doing this as well. So, um yes, no changing that way. Our online audience to join as well. So please take this exercise, then join us and show us your work as well. All you need to do is take a picture when you're finished, and then you can upload it to our website. If you go to the course page, you can scroll all the way down to the bottom. There's a button called share your work, and then you can upload into the gallery there and allow the other students what you can see as well. I'm sure after the live event, Joy will have a chance to review some of those as well. So definitely want to see your work here. Want to see what you're designing at home? Okay, so what I have right now is I'm just creating the header, something that's grounding the website. And those were setting up the basic navigation. And the next thing I want to do is, I think is really cool to shop by region. So, actually, I'm gonna do a little world map here. I don't know how to draw a line up, so no. And then I'm gonna have categories around. Um, And then after you click on a category, maybe there's like, a cool description. And after this, the sections I'm gonna have. So I'm gonna actually feature some of the chocolates I'm gonna have, like, a chocolate bar section and then a truffle section. And then, um, I'm I do my foot or here. So here's another logo. And then here are the links. So that might be my first layout that maybe I can start one minute more minutes. Okay, Um and then if you have some extra time, you can also think about different things to emphasize on the home page. I think that's also important to just kind of play around. So I'm ideas on the similar to, like, a technology website where they just showcase one chocolate bar raised in the So I might This is like a pro. And then anything with the linking I might just do that. Mm. For better. Remember, Not five seconds to go. Time is up. Didn't seem like three minutes. So now that we have our home page done, we're going to move to the next one. All right, So the second exercise is now is almost Valentine's Day, and we need some promotional content on the home page. All right? Hey. All right. So I want you guys to get a new piece of paper and then take a look at what you've designed so far, right? And that kind of thing. Ups. Think of a way to say All right, so on this layout, I need to feature, um, Valentine's days content. So how do I do that? We I'll give you guys one minute. Took how sink N'dri. Yeah, I just kind of take a deep breath. Think about what you need to dio take a look at your layout, Um, and think good. Okay. And then people on the Internet, anything. They're also good. All right, All right. Great. Uh, no. Three minutes. Three minutes? Yeah. Let's start now. Yes, you. He's a paper. So again, um, I I like how I like how my logos up up top. So people notice the branding. So people notice that this is George chocolate shop immediately And that maybe this time instead of, um, putting the header up there, I might just start with, like, super begs emits of heart, and then for the top navigation, it would still be in the same place. But I might change the color of these links. So the heart becomes the first read, and then I'm gonna have some think co out here. Two minutes to go. Thursday. Well, uh, read more link, um, shopping cart. Forget that. And then I might be showcasing different volunteering collection this time here. So let's see. So there's none. There's the hard rock pools. Here's a gift basket I want to showcase. And then after award, I might show the map again to reinforce, So if if you don't have a lover in mind, you don't want to browse the Valentine's collection. Then you go back to your world map. Okay, so we have one minute to go. And then because this pages long enough, I'm gonna cut out all the others content previously and just end the footer there so very quickly. It's Valentine's Day. The same header, same footer, the same world map. And I might even have fun with a world map, right? I might even have some Valentine's thing here, so it gives people a pretty good idea of, um, reinforcing the campaign in their mind. Cool. Very good. When I got and I might have a link here to read more about chocolate and that may be here all how at the taco section. Five seconds to go and times out. Great. How do you feel? There's no pressure. There was, of course, up. I would like to take a minute here to kind of just talk about my thought process. So for here, in between these two, Um, obviously, when your design ings the content you want to do when you're designing the layout of things you want to keep, I think it's good to start off with a grid, especially if you are new to design. Um, once you once you're comfortable with the grid, obviously you can play around what? Offsetting some of the containers to make the make your content more dynamic. But if you're just starting off, um, it's totally okay to stay within the grid. And I think that that it will also make um, developing the website much easier, much quicker because, um, there is a framework around your elements already. So it's not like everything is flying over the place. And then you can also keep a consistent. So what I have here is because this is a This is a website that sells chocolate over the world. So I want to just show a map and to really reinforce Hey, this is where you can get it so that we have we have some South America Chocola, and then we have some, I guess Africa, maybe Southeast Asia. So it kind of just shows you the international, um, chocolate trade of just everywhere. And I might even have some really dynamic thing of, like little dashes, right of where the chocolates are traveling, where people are buying. So maybe one year a bunch of people in Europe are buying chocolate from Venezuela, so you can see a little dot away over the chocolate, like going into Europe. Um, and if you click on each of these region, it might give a pop up of Hey, this is a little back story about, um, no Brazilian or Venezuelan coco. Right? So there's, like, a little back story. So it just asked to Why are chocolate cost this much? Because this is the origin. Um, I also wanted feature some of our bars and our truffles. So there's a little brief paragraph you want to read more if you want to purchase of bars that you can click on that link to go, Um, I use color to suggest, like a hyperlink, or I use a to suggest a culture action. I think usually you don't have to go crazy with color when you're doing where friends or you're doing sketches, and that it just draws the viewer's attention to something is happening on the page. Um, so for Valentine's Day, what I did was I actually pushed this coming down. So now the big focus is the Valentine's Day banner, right? So when you go to this page is just boom heart, big red thing. And then instead of these bars going across now I have bars, truffles and then gift basket so you can purchase something and then give it to someone you love. And then on the map itself, instead of the typical cocoa regions. Now, I can also add some hearts here, right? So I was like, Hey, our gift basket. It's actually from South America. And then we also have another one coming from Well, I know Madagascar, and then so this is where they are. And then it ties together really well with the Valentine campaign I have up here, right? And then once Valentine's Day is gone, then I can just remove the hearts from the map, and it goes back to that guy. Um, so there's alot of my thought process, and I think it's totally okay to, um to keep it dynamic. Keep it fun, right? As all as the logo still there. Um, just overall side structure is there. I think it just keep the user grounded on. Yeah, this is still the chocolate site. I come and browse off them. It just now they're doing a sale, and it's okay to, like, dress up your website a little bit. Cool off. Okay, so we're gonna do the third exercise, and then we're gonna have to people come up and kind of show and tell your chocolate website afterwards, so get a new sheet of paper ready? Yeah, just foot plus one over. So this time, a chocolate manufacturer that we've seen using, um, just launched a new collection with three different deluxe bars so that we have some objective here. So we have the three new bars that we need to feature. Um, you are going to design a showcase page. And by that I mean, um, so on your typical navigation here, you're gonna have, like, 1/5 element. And then that's that's the deluxe far. So what happens when people click on that one? So that's that's the page we're designing next. Good. Okay for this as well. Yes. Okay. Okay. What's going? Let's go. So because this is a special showcase page, I actually want, um, actually want that navigation to go away. A little bed, which is fine and is okay of you can draw a straight line like I can't hear. But, um, I think this just drawing out really freehand little aged. We'll just keep your idea flowing. So instead of the logo on the other side, I actually want the logo to the center and then I'm gonna use different thing to now. I use a different color to show the three bars, and then I am going to use a tab, if to I'm using a tab to call out the flavour. So on a big on the top section, I actually am featuring all three at once. And because I don't want the users who scroll too far down, I'm using tabs to kind of call different different ups, different flavors of the bar. So here I have the 1st 1 the 1st 1 might be so I might have another image here. So that's the first section. And then I am. I have the quantity but drop downs and then by and then I'm gonna just have the footer here and then for the second section, the woman it to go for the second section for the second flavor, I might be doing the same thing, but maybe a different color and then doing quantity, but drop down and buy buttons here. So 50 seconds left. Well, I'm running around running out of time to so maybe this is something that you can do if you want to keep the page short and concise. Um, another way you can do is probably showcasing the 3 15 seconds. You can also see that, or I like the idea of the spinning thing. So I might just add, I might reuse this layout again and its angle. Okay. And that means you to join You. Go. That's tricky. Is not much time appear. Everyone's done a really good job. Feel like everyone just sweating right now. A lot of work. Cool. All right, well, I can't wait to see what you guys have done. So why don't we get some volunteers up here and show us your work you want? Okay, So Daniel first and then they later. All right, Degree oven empty. Okay, keep it up here. Yeah, we will bring you some blink boards now waken take a look. But I do want to remind of your home. This is completely interactive. We want to hear you want to see your work as well, So please definitely take the chance. Take a picture of what you created, and then you can upload it to the Web site or you to do is go to the course page and you'll see right at the bottom of the page of the button called Share Your Work. Then you can upload it to the gathering. You'll be able to see what everybody else's work is being as well. So you can really see all of these great projects come to life. Also remind you that if you want to oppose to review for the course, you'll find that on the same page, or you need to do is click the review button and even let us know what you thought of this course from Joy, I think was set to look at Daniel's work. Yes, guys, this is Daniel. And why don't you tell us about your home page without Valentine? Okay, well, I first named the brand snap because I really like the idea of kind of snapping off a piece during the day. You having that sound effect as you click through the site? Uh, and then so my thinking was to create a large kind of grid structure for the main you know, uh, stage where you could have different overlays Where if you move and do rollovers, different kind of products pop up behind the overlays. So the in talk there's always that kind of maybe discovery or surprised about what, what you're gonna get or what flavour you're gonna get or what's on the inside. So I like that idea of the things being kind of hit it and you be able to kind of discover that through that process so that you might be able to have you roll over and get dark and see a percentage of this is 75% versus 85% on. And then I thought the grid was a really cool thing that could, you know, you could maybe lose a portion of it in the center and feature of products, but still have the kind of navigation feature and the image feature on. And then I wanted to do this a really large um map feature that you can actually scroll horizontally to different regions of the world and then be able to kind of hover over or click on a certain region and get a little pop up that maybe is photos of the workers in the field or tells a little bit of story of where that where where the beans came from on and then just a really simple footer with social and, um some now kuo Very cool. I can also see that maybe if you click on the different, um, darkness of the chocolate been like the different world with different region of the world will liable describes the region. That's cool. Yeah, yeah. Okay, So what happens when Valentine's Day comes? So then you can use that same grid idea and kind of create, you know, a graphic image just using the overlays. You could even have a big photo happening behind it, of maybe a couple out to dinner or something. But then there's kind of a cool, overly happening of maybe a big heart or some messaging with a little piece of navigation to maybe go Teoh a gift set or, you know, some featured products on. And then I did a little drop down overlay on top of the map feature that comes up. Maybe that's when you click this or or just is there for the special Valentine's Day with maybe some specials or a little kind of just copy. That is romantic. And, um, maybe if featured products um yeah. Hello. And then I did a promotional banner down at the bottom, a little pre footer kind of saying, Maybe there's gift gift wrapping or something like that, right? Yeah. I think this is a very nice little touch. So whatever you have, you're designing something that's clickable, or that's a button you want to, because on you can. Also in your war frame or in your sketches, you can make the outline thicker. So you're just like highlighting in. So when other people are looking through your wire frame, they know. Okay, that's this thing that he wants me to click on. You can use a thicker outline, or you can use a different color. They're both great, um, visual indicators to something like a button or hyperlink. Mm. Cool. Very cool. I really like the great idea. I think also, maybe you can, like, pull in instagram feed. So you have, like, the couples holding the chocolate together and just fill that Great up. Very nice. Cool. Okay, So now showcasing the three different chocolate bars. Okay, so I did just kind of a big, uh, photographic packaging. And then maybe a piece of the bar kind of pulled back and opens. You see the corner of the chocolate. Um, you know, three action buttons that will take you to a different each one individually on then, kind of three sub image sections that you can kind of school through gallery images, maybe of those three different flavors with a big video. And I was thinking, Well, once you once you're on each one of these things, the little region pops up from the map with little overlay of where the talking came from. Very nice. So it actually times back to that idea. Cool. Very nice. All right, let's give him around a lot. Share your website in the chat room is well, people find that very, very good word indeed. Um, all right. Don't come along. Come on down. Is that it's a trademark. Yeah. So we're my for my designs. The e commerce site was mainly focused on making sure that site converts, so I made up put emphasis on having clear call to actions as well. His buttons. So for the e commerce site over hair, which is the first home page, have, like a traditional compelling headline with top and then call to action button right away in the night, you know, implemented some of the elements that you wanted in the design, including the logo and then the shopping cart and user account over button over here doing the search and then just had a gift card just on the on the sidebar. So people can just access it any times. Um, with with the actual chocolate bars themselves, I had a sidebar over here with all the regions and then a dynamic menu over here of the flavour. So if they just top on the flavors or select them using, like, just Ajax or something, they just come up on. And then, um as they're selecting the regions as well as the flavors, they get pointed on the map, the bottom cool. And then you have the foot or here, you know, for the for the Valentine's version. Again, the emphasis was on conversion and making sure that people can find where to buy the product. So I had a top menu bar, but is a sticky bar on the very, very top, with a clear, compelling headline and a call to action button along with AH themed image for for the Valentine's Day and again and again a button with them to buy. And then the same thing kind of took the same features of this and instead made a heart of all the the actual chocolate bars when they show up, when it selected the region and the flavors, as well as a big gift card button. And then I had moments. Ah, Valentine, how people have given Gift's of the team chocolate bar to their friends in the very body bottom so that it could be like an instagram feed. Um, for the actual, uh, the information site, I try to be a little more creative. My idea was to have a parallax site, so it kind of gives a story off how the chocolate is made. So you start with the ingredients of the chocolate, and then, as you scroll down those ingredients, gettinto apart. And then there's some description on the actual making process of the chocolate, and then as you scroll down, you get those chocolates. Kinda like wrapped into a form of three different yeah, tuition packages and you can you can hit by at the end. So it's kind of like a parallax. It's all forming together at the very end. So I was kind of my thought process for the version of site. Very nice of just to give a heads up to anyone watching they your You're not a designer, are you? More, more on the development side. Yeah, right. So I want to just also reinforce the idea that you can be anyone doing this thes sketches. I know I didn't do a good job, because when we have three minutes, right is just something that's quick that gets out the door. And this is a great collaboration tool, collaborative tool that you can use with your team as well. So if let's say all of us today are designing this chocolate website together, we can all actually sit down and do some quick rounds of sketches to get everyone's brain going and have these discussion, right? So we might at the end of our meeting today, we might say, All right, we're gonna use Daniels grid system on the top. But Zane's parallax storytelling idea about the feature page is an amazing So we're gonna go with this. But we're just pulling elements from different people and coming up with and using these as, um, visual supporting assets is a great way to kind of get the conversation going. It doesn't matter how well you sketch. We're not judging everyone, right, because by the end of the day, like after you presented it like I totally get what you're trying to do. And then I like how all three of us have the map idea just play out there. It is cool, and I like how you know when. When It's not a gifting. If it's not a gifting see season, that gift card thing kind of goes away and hide in the quarter. But when it's time to um, have enough opportunity to give or to give someone, you actually bring it out right and really emphasize like, Hey, if you don't know what type of chocolate um, the person you're seeing wants, then you can just buy a gift card instead. We have that available. That's really good, thank you. I hope that kind of gets everyone's bring going about war frames. And when you're designing different pages can keep in mind. What are some of the elements that you should keep in the same place to make sure the experience is consistent, but also, like, feel free to add some new element until the pages to keep the content, um fun, exciting. And then its don't be afraid to go outside of a box, right? So, for example, here, um, we have some clear sections of where the things are. But as long as you have, like the logo, you have the branding off the oral website. It's OK to put like a one pager in there and just to feature something, um, as all as the people know, you are still browsing on the same website. Then you are okay to go out and think outside of the box. And, um, it's okay if you're not designer, you can use your still sketch if you know how to hold a pen. Go for it. We're not judging anyone, right? And then you can You can go however long you want on these. The reason why we keep a short con size being three minutes is because, um, that just forces at us to put the important things. Now, we're not overthinking anything, and it just keeps your mind movie, Obviously, if you want. If this is way too quick for you, you can set the timer to five minutes or 10 minutes. But don't do like an hour sketch session when you were not doing oil painting or anything is just quick. Sharpie sketches. Um, any questions from you guys regarding your friends were like, any questions from the Internet. Good thing you had something I just wanted to know. Like how, you know, you had some visual elements, like hearts and stuff in your design. Would that be considered part of you acts, or you I, um I think I am definitely crossing a little bit over to the u I part. But I think conveying the idea is mutual on me. If you're If you're developer on the team, you can say, Well, hey, can we out of heart here, right? Like it should be open. And like, it's not like if you're a developer, we're not letting you talk about Maybe maybe you have a brilliant design on the idea, right? Um when I am designing, I like to kind of think about the end result. More is not like I just I'm just thinking like, Oh, if this is it, if we're putting an image here Ah, you Gee, I like to think about what type of image goes in here because I think that really informs my decision later on. Like, I'm just I'm not gonna put a box here and just say, yeah, something goes here like I should be able to know what type of content goes there, even if it's not the same image. If I say okay, I think we should have, um, images of people here. I would probably draw a little, like head right on here instead of just boxes. I think that that just makes it, uh, that just makes the wire free, much more detailed. And then you can tell the story a lot more