Lessons

Lesson Info

Class Project 13 - Roar Cycles

Hi there. This video is a class project video. We're going to set a new project. So we've done the instructor, HQ one together. You've done your class project for my new furniture throughout this course. And now we've got this last project here. It's a full project like the furniture, but there's a lot more scope for you to be creative and do your own work. It's not going to probably come out as prescribed or similar to other people's. So it's perfect for your portfolio to have a look at the notes. The last one in our word doc, you can make this as big or as small as you want. Some people have the time and the energy and the desire to make both the website and the app and build out loads of different pages and a good healthy big prototype. Some of you will burn through it and just make a couple of pages and I'm okay with both of those. So, first things are, we need to go through and review the brief and the persona. So they're in your exercise files under. Where are they are under a cl...

ass project to open that up. There's a brief. Okay. And then there's a persona. So the brief is the clients called Raw bikes. Okay. There's a little logo over here, rock kind of Raw. It's a fictional company that I made up, but they are a manufacturer of small run contemporary bikes. They soul exclusively from their own website. They currently have three models. Okay. The Siamese the Sphinx and the Bengal. Okay. I kept it small so that you could build out a site and not have like thousands of products. You just got three products. Okay, the primary objective is an e commerce website. If you're like, man, I don't want to do another website, I want to do an app, you can do that, that's fine or you can do both. That would be even better. What you wanna do is decide, okay, what do I want in my portfolio? Do? Would I rather have an app in there because that's the kind of work that I enjoy or do I want a website in there or both? So when you look at the persona, let's have a look at jake, jake. This handsome man is a designer from L. A. He's a creative type, you can tell by the tattoos and the beard. He's like alternative, but in a design ary kind of way, like he can see his haircut, like it takes a lot of pride in his appearance. He's very, very concerned in the way he appears to the world. So I've written down some descriptions of jake, I've worked with the company rode bikes to develop this and we feel like this is the this is the kind of typical client or their ideal client, He likes to have, he's got money to spend and he likes real super good quality, but he likes alternative Nous that he likes to be the only one with it. He doesn't have an iphone anymore because everyone else has got one. He's got some strange chinese version thing because it has some quirky features and more importantly, nobody else has it. So he's going to fit in with our kind of bike maker nicely have a read through this so that you get acquainted with a drink and then we'll move back into the brief. Okay, so here's the feature list. Now I'm allow what I'm allowing you, you can do what you want. But this is just a suggestion often when I'm running classes, people need some like boundaries on what they need to do otherwise like any good personal project with no sort of scope, nothing gets finished because you're not sure where the end is. So this is a good kind of outline of what I want you to do and totally do this. But if you want to like I wish I could do this or add this extra thing, go off and do that. So the homepage got a logo, it's got navigation. We're gonna stick to those three bright models and what we've done is we've talked to the owner of the company which happens to also be me. Okay. But what we think is for these kind of contemporary bikes is it's really important to. So the social aspect they're kind of like the users of their bikes sharing their own photographs of them doing contemporary bike owner things. So like lots of instagram style selfies of them in their beautiful, amazing bike. That's going to be like the social kind of media streaming of things. They tagged the company, this is my bike, it's the sphinx, they're in love with it. It's a, it's their object of desire. So we are going to kind of use that on the site to promote it or at least show how important it is to us as a business, so that we encourage other people to share their photographs because we want to start that social movement, we don't have the money to be for this company to be doing kind of traditional marketing. Like other bike manufacturers were going to go for the small crowds, instagram savvy. Got good cameras prepared to take a staged photograph of themselves in front of the bike. So I reckon that should be a big part of it. So the home page, you'll have a product page for each of the bikes though, the product pages will be the same. They'll have maybe a different style for the Siamese one, the Sphinx and the Bengal. Now there's a photograph of the bike like these are made up, right? So you're gonna have to go off and pick a bike that you find online, through something like Unspool ash or pixel or if you have access to stock library, you're going to get access to more images like adobe stock, okay, but pick just decide which of these are. And I don't mind if like say the images and then the kind of owners photos aren't the same. Don't sweat it because these bikes don't actually exist. We're going to have to fudge that a little bit. So do a page for the Siamese and for the sphinx and for the Bengal something that makes them individual but consistent. Okay. And you need to conclude these things like the description, the price, the colors available, you might want to ditch that. I'm not sure. Um and kind of because it's an e commerce, you need to allow for the kind of shopping part of it. Here's some competitors that I know of that I found, but go off and find your own as well. You might know bikes a lot better than I do. I've actually got a swifty scooter, go check that out. Super cool UK guy and girl making those because I'm kind of loving a little bit like jake. I'm like I was laughing at little bits of these. I'm like, it's kind of like me, I'm kind of half jake, I'm the guy who walks into our cafeteria and well the cafe next to me and brings my own kind of like it's not even a takeaway cup is just a mug from the office. Anyway, so your deliverables? You're going to do wire frames. Don't skip wire frames and go straight to prototype. I know you want to because that's the fun bit, but remember we're doing this for two reasons. One is we want to get practice and doing wire frames and it's part of the process. Like if you ignore it now and you do it with your first client, I bet you you're going to run it. This is going to take twice as long because you didn't do this but it doesn't take super long but it will help out any way user testing. Um do some, you know, we can do it like we did with minute just do some simple testing with a friend, a colleague, somebody that maybe resembles jake and you might decide to do some um moderated tested what was um moderated testing anybody. Remember you're thinking you're like, oh yeah, it was like user testing dot com or use analytics. Okay. There's a there's actually a bunch of them out there to help you with that and you need to get the Ui assets rid of for the developers export them both. Like we did when we exported batch. So you've actually got physical files and do the design specs because it will depend on your developer and the flow that you'll be working in. You might need both or one or the other now cost you're not getting paid anything for this but we made it an official brief, something that I'd send out and while we're here is like this four grand for this project here, I'd be delivering them the four pages only, I'd explain that we're doing homepage product page and that's what we're going to test. And after that if you need more pages like the contact us page, the developer needs help with that. I can, but it's not something that really needs a lot of like user testing. And the other thing is it looks like we're paying four grand for like, you know, like two months work. It actually we won't be that many hours to remember. I'll break it down by my kind of daily rate so that four grand will be, you know, 800 bucks a day is my day rate. So it's actually less than a week's kind of working weeks worth of full time work. And the reason it takes so long is because there's kind of tooling and following with the client. Why frames will probably take me, you know, most of the day working with a client back and forth as another couple of hours, then I'll get into the high Fidelity and testing the high fidelity will take me a couple of days. Testing will take me another day. That's kind of how I base my pricing. Not everyone does the same as me. Not everyone has the same rate as me. But I guess it's interesting to see how other people do it to have a jump back into a word doc. So there are logos available, you can make your own. I don't mind, but I've given you the company logo that I've made up. There's an SVG and an illustrator file use, whichever you like. The colors are up to you, fonts are up to you. Just gotta keep jake in mind. I'm not sure Jake would be totally into comic sans and brush script. But again, this is up to you. You have your high Fidelity tested, create and share so share a couple of parts of it, share the flats go. Just export the J pigs gave all the outboards or maybe do a big screen shot and upload those, share them with us. We've covered this a few different times of where you can share it, how you can share it when you are sharing the flat, sharing the public links as well so that people can go in and have a quick round, have a test, may be laid some comments. Let's all do some institute mock ups as well. So that institute what we did when we were in Photoshop and we we found those mock ups, we could put it into an actual phone or we did it with that book as well. We're not going to do a book but try and do some institute mock ups to kind of sex up your design, make for a good presentation. I want to see three micro interactions. I've said three, you can do as many as you like if you want to practice and test them. But I'd like to see 33 your best or three of the ones that you've done. Okay. It doesn't have to be micro interactions. It could be transitions between upwards, you know when they do the auto animate and share either a video of it if you know how to do that. Remember we did a bit earlier on on how to animate a gift. Just to share your cool little interactions can be a little subtle simple things or it could be like big explosive everything flying all over the place. Animations up to you. No extra points for the people that do want to go on and have maybe have some after effects skills. You could do some more elaborate transitions and micro interactions using either after effects or pro tapi. You don't have to though. Make sure you share your work. Remember in the assignment sections of this website or the comments and or on social media. Remember instagram I am bring your own laptop, twitter, I am dan loves adobe and on facebook group if you click on it it'll load up, you'll end up with this. Bring your own laptop online and you'll see hundreds of other people sharing their examples. Okay, because there's a new course XD. We don't have any of that yet. So get your XT up there but check out all the cool stuff from the other courses. Okay Photoshop and illustrator and in design loads and loads and loads scroll forever. Okay, so share your stuff up here. The community is growing really nicely and that my friend is going to be it for the class projects. Once you're done, it's a big one. You'll be free to go to the next video. I'll see you there.