Hello, welcome back. Ready to talk about wireframes. We already talked about strategy, outline of scope, sitemap, and now we're starting to actually put things on to a. Visual. Visual, yeah. Starting with some visuals. Right. A little sad still. Great that's an axis. But important in the sequence of user experience. Allowing us to make some preliminary decisions without getting caught up in colors, typefaces, that kind of stuff. Bradley, we'll start with you. Cool. Again your project is about affordable Poke. In Westwood, yeah. Targeted to college students. College students. Yeah. Urban environment. Only open at night. Only open at night. Quick delivery. Right. Partiers and students. Yeah. Main target audience. You know. Studiers as well. So here's your homepage. The wireframe. And you, got to mention, you focus most of your investigations on mobile because you had determined early on that your target audience. Would mostly be using it on a mobile phone. Right. And why? I think it's just more quick and it's more easier, I think. You know people in college typically are on their phone anyways. So it makes more sense. And also if you're out and about, you won't be with a desktop computer. Yeah. Most likely. More and more and more. Yeah. Or even in your dorm room. Yeah. That's the case more and more often, I think. Yeah. Cool. And one thing we should actually also look at your sitemap here for a second. Some things that have changed. Yeah. There's two things that have changed. Here in the back you see the main navigation and something has changed. Do you want to talk that? Yeah, so if you notice there's actually a question mark instead of the word questions and I think that was really just to save space. Just like a quicker read. And also. He exchanged the word questions for just the mark. Yeah I think that was a lot quicker but also. But it also makes a little bit of a, I don't know, with your voice of being a little bit edgy. It just kind of reduces things and. Exactly. I don't know if that's, it's just a little more edgy, maybe. Yeah. Right. And also if you notice, I have order instead of Poke because I think that it'll be a little redundant to have Pokefresh from the top left corner and then also have Poke red under it. I think we know seeing the logo and the logo type that it's a Poke restaurant. So to have Poke on there twice just seemed to. Right, because earlier you thought that would be kind of, cool to explain in your menu that this is all about Poke. Yeah. And if you let say your website was called Fresh Fair or something, right, it would probably make sense to have your first menu item be Poke. But since it is called Pokefresh. Then it's. It's redundant. But you didn't really know it at the sitemap stage. It was at realization that happened when we were looking at the layout. Right, yeah. Which is fine and something to stress and remember that these are not set in stones, these decisions. There are often realizations that come in later. Yes certain things will change as you go. Yeah. And that's fine and encouraged and important. Alright, so let's walk through some of these. Yeah so I guess on the homepage, it's really just the most important stuff. Like you have price, the delivery radius of serving the 90024. It's the Westwood area code. That's the code, yeah. So it's just everything's immediately there were delivered within the hour or so it says you know. Price, area, delivery time. Yeah, exactly. And what's that call-to-action? The order button. Yeah. So you can just click and order immediately once you're on the homepage for quick read. And what's the big X? That would be where an image would go. So some kind of gradient or an image would go in the background. Yeah. To be decided. To be decided because at this stage it's for going all then it's kind of. You're just laying it all out. Yeah. Important to stress. Exactly. Not of concern right now. If you knew exactly what image I guess you could put it even in the new wireframe. But it's totally fine not to know that right now. That's why we do wireframes, right? Yeah. That we can make the important decisions and leave the visual decisions for later. Yeah. Same thing, we don't know what this logo really looks like. We don't know what this typeface is. We don't know what this button will be like. It's all in place for now. Yeah. Yeah. So let's look through some others. So this is once you click on order now. Order now. Yeah. It'll take you to the decision page. So yeah again super simple, just two big buttons. You have faves, which was in the language of the project and custom. And it's supposed to be easy to use when drunk, basically. Yeah. We're just kind of in your face, kind of snarky, I guess. A little snarky, right. Just a little bit. Not over the top. It's just. Well we're not going to, it's not going, we're not going to have pretty language around it or it's just like two big buttons. Kind of a little, almost somewhat funny. Yeah. Like cartoony. There's a sense of humor to it for sure. Yeah. Then we click on, click on faves. Yeah. We get here. Yeah and again these are in place for images, the big boxes. And again staying with the big buttons. You can buy. Also. You have a little bit of a description. Yeah, a little description like playing with the language of the site. Again just kind of like fun names for the items. Mhm. Tiki tuna. Yeah. And then let's say we clicking on buy for one of these, this happens. Yeah. Then you can either click out of it or stay in it. So this is the shopping cart, right? Exactly. Yeah. And it slides in from the right. Yeah. And you can check out from there. And the nice thing about it sliding in from the right is that you stay in place and you're not going to another page. You kind of don't lose your page. You could easily X out of it. And add more. And add more. Right. Or you can click on checkout. Yeah. But let's say we are going to, I guess we'll go to. Yeah, this would be the customization page so from that other decision point page with faves and custom. This would be the custom page. So yeah again you can see there's little boxes that would represent images or symbols for each menu item. Not really sure at this point yet but those are just some place for that. So you would click onto each menu item and it would allow you to customize. Would be selected. Selected and it would show you what's selected as you go down through the page. That's really a long scroll. It's a long scroll. Which I guess there are other ways to do it. You could do tabs and you click next. There's five different customization options I think, right? Five? Mhm. You could list them in the top. But I guess for a mobile phone, especially it's so easy to scroll. Yeah. It's unfussy. It's probably the quickest way to do it, right? Yeah. Just go choose your options. Yeah, and there's little comments. If there are comments? If there's comments, there's a little comment section. Exactly. Then you click add to cart and then the checkout is meant to be super quick. No account is really necessary at all. Delivery info and credit card info. Yeah. That's really nice. Yeah. And then you click on purchase. Yeah. And. It takes you to a thank you page and shows you where your order is. Like I know where you are. Boom. Yeah. Very nice. I guess you did, do I have that have that? You did a desktop wireframe too. I did do a quick desktop wireframe as well. And things just expand. The image gets bigger I guess with the backgrounds. Exactly. Big buttons. The buttons get even bigger. Yeah. So it's really just an expanded version, horizontally basically of. Yeah. Things are next to each other. Instead of vertically. Yeah, because it stays to the screen. Cool. Alright. Some quick mock-ups. Yeah. Looks good.
