Design with us - Interaction Patterns - Episode 9

Jude and a co-host design onboarding and interaction patterns for Roller World, a Roblox-style game. They work through first-time flows, clan selection, pet customization, hub structure, and skatepark mechanics, moving from sketches to prototypes in real time.
Chapters
Sa Sam.
Hello, hello, hello. What's up everybody? Let's just come over here to the camera. Hope you had a great week. It's Sunday, 4:00pm it is that time of the week again for another episode.
Of Design with us.
Design with us. Cool. So today we are going to be jumping into interaction patterns of the video game and we're jumping back to doing some just live work on this game because we've been, we've had a pretty busy week and we are just going to use this hour to just jump into the interaction patterns into the game. And when we say interaction patterns, what do we mean? Jude?
We mean. We mean that. We mean what we mean and we mean that.
Do you want me to take a jump at it?
I'm not.
Okay. Just basically how the game operates from level to level, from scene to scene. So what you're seeing right here, if I go in a screen cap, we need to jump into this world, into our world that we have inside of here. And we need to think through more about the interactions that happen inside the game when you get in there. And if you do even remember when we started on this really cool map of the world when you come in to roller world, all the things that are happening with the community center, with the store, with the training room, with the locker room and the help center, we need to kind of keep flushing this stuff out because the last couple weeks we've been doing logos and presentations and thinking about problem solving.
So we gotta go to now straightforward.
We gotta get, we gotta, yeah, we gotta jump back to straightforward stuff. So. So that's what we're gonna do today. And if you brought some of your projects or if you have any, if this is your first time checking out design with us, thanks for joining us. Thanks for coming. Where you head, bud?
I need to get some paper.
Oh, I got you.
Oh you got.
Yeah, I got you.
Oh, he got paper saved.
There's some markers and stuff. So we got our pens, we got our markers and yeah, again, if you haven't checked out design with us, Design with us is an opportunity for Jude and myself to collide design plus gaming and collide it into an epic show where we just get to design with all of you. And if you have ideas, projects or just things on your mind, feel free to hit us up in the comments down below and we will be happy to answer your questions or just work through anything with you really. And this is not meant to be like a super structured, like, you know, super duper fast show. We're just Gonna be kind of hanging out today and, and kind of working through some of this stuff. So are you ready to jump into this?
I'm ready.
Any questions before we start?
I'm excited though.
Okay, cool. I'm excited too. All right, I got my waters, I got, I got an extra water here too if you need one. Okay. And we got our paper. We got everything situated, so let's dive right in. So where we kind of left off in this squeaky going on over here on our desk, but where we left off we had this like first time experience where we're thinking about how you jump into the game. And we originally thought about, you know, like having something in the game, like actual, like a narrative to bring people into the story. And then right before the show started, Jude and I were just kind of talking about that because this is kind of like the heart. This is hard. This is a hard part of trying to script it out and write it out. So we're just gonna keep trying to do it right now. Alright, so when somebody comes into the game and we have the map and we might have to keep kind of, we might be referencing the map. So actually the map is also the map is in our game document. So here, let me bring this over to our player experience.
The map has changed over time.
It's kind of, I mean it still might change. Yeah, but it's still there. Yeah. Hey, Eunice, thanks for joining. Eunice, good to see you. And if you have any questions, Eunice, just feel free to ask them. All right, so I'm gonna, I'm actually. So I have the screen open and I, I'm thinking about just drawing this out, Jude, so.
Oh wow. He's going straight in.
I'm going straight, straight in. So when, when I, you know, let me just actually start with some boxes.
Boxes. He's making boxes.
Yeah, I am making boxes. Literally making boxes. And, and Jude, I remember when you were talking about like the, the narrative of this. When somebody first comes into, comes in here, we can actually get this in the view too. So they can kind of see it. All right, and this is our microphone. Say hello microphone. Hello, microphone here. All right, we're cool, we're cool. Okay, well that, I don't know if that's gonna make any noises. Okay, so when somebody comes into the game, Gene, what is happening? Like when you first come into. You play so many Roblox games, what happens? Like you've first come into this world and you're like, hello, what's happening right here? When you get into this thing. What do people need to do?
Usually on an anime story based type thing, right when you come in, there's either like a storyline where before you, before you come in you see like a thing like side story where like, because there's this Pokemon game sadly got copyrighted and deleted.
It got copyrighted.
It sucked. And Roblox, yes, it was such a good game. I spent so many hours, but it's good. Well, back to the point.
Okay, so we don't want that to happen to us.
No, it would. Yeah. Okay. So anyways, in that Pokemon game, there was like a cutscene where your mom was like, come on, Judy, you're gonna be late for your first day of Pokemon school or whatever. And then you get up too, too, too late and you're like, oh crap, I gotta hurry. And we could kind of include that into this but not make anything Pokemon based. Nothing.
Right? Cuz they'll take it down. Plus we don't want to copy.
So we gotta have like a cutscene where like maybe you're at your house and you're like, oh shoot, I'm late for my first lesson of. Well, I'm late to the. I don't know, like Roller World school.
Oh, okay.
To World. World. World. Oh my.
Roller World. I'm late to Roller World. Oh, it's getting. Oh, we could line this up where. Oh my gosh. Do you mind if I jump in real quick?
Sure.
Okay. Brainstorm time. Hey Jude, guess What?
What's up?
Covid 19's ending and we all get to go back and rollerblade together.
Heck yeah.
Awesome. Okay, but everybody is rolling over to Roller World and we need to get our rollerblades. No, I was just thinking like, you know, everybody's coming back together. Like everybody's coming back in and they're like, hey, welcome to Roller World. I don't know.
I don't know about that. Okay, okay, that's a little cringe.
All right. I cringed my. I cringed it. So. But what if there's like something where anyway you come in and it is like a chat where you have a certain on the screen. You maybe have like four or five different screens. And whatever the story Jude is, we need to get that nailed down and we don't have to do it like right now. But like the homework is for when we have this like welcome. There needs to be some sort of narrative where there's like the player, this is the player and this is the computer. Like the. Who's the main. Maybe the main character or something.
Mean, the main character is you.
Right, but like the, the bot or the computer. The. So like they're basically having a conversation and then you. And then you get to. And I know that we had these screens over here where you get to kind of. You choose your clan and you do. I think that was still kind of fun.
In the roller world, there's like three different, you know, clans. Like we. What we have.
We just have to make up our own clan names.
And there's like. It's kind of like my hero academia ish. There's like three little houses. Bam. Three little bam houses. And then like you compete like with rollerblading challenges in like your free time. I don't know. This is just a little.
No, it's okay. That's cool. So something like where you have to choose. We could do both of those as tests. I don't think we have to back ourselves into a corner right now. And you know, even when you're designing these sorts of things, Jude, like we. We can go with multiple versions of that. We just know that we need this sort of. We need this sort of process where a player, a gamer can have some sort of autonomy to make the decisions right off the bat. So they feel invested in the game.
Yeah, they get like. Cuz. Yeah, right.
So maybe, maybe it's just like, hey, you know, it's like introduction. This is all about the intro. Like intro to the game and then choose, you know, choose. You get to choose your clan. And then in this next screen, it's like, like what we are showing right here where we introduce you to the story. Oh, wait, sorry. So right here, you guys or y'. All. Y', all, Y'. All. Where we have. Basically they introduce. We introduce them to the story and then when they come through the story, they get to choose like fire or Water. Air, Earth. And those are the clans.
Or, or we could base it off of, I don't know, Naruto. We could do like Uzumaki. I don't know. I don't know. Because this is supposed to be a little based off of anime. Like all the little types of.
Well, we could do superpowers and stuff, but we can't use the same names that they have. We have to make up our own names.
Yeah, so.
So we have our intro. They come back through and. And then, you know, in.
This is also a little cough.
No.
Yeah.
Not clans. I mean, there's Harry Potter has clans. There's Airbender has. Has different clans. You got different clans and a lot of Netflix. Netflix shows. Clans exist all over the. All over the place. So we're not. We're not like ripping off anything like that. We're just.
We just gotta make our own names.
Yeah, we'll make our own names. So Clan one, Clan two, Clan three. That's the worst name ever. Thank you, Jude. So, okay, so that's good. Let me just zoom a little bit more for them. Let's see here.
Oh, it worked. Oh, does this work?
All right, cool. So they come in, they get an intro, they have like this. This will definitely will need to. We'll need to kind of work through this design. And then they choose a clan and then each clan maybe has like a little bio about it and they can go in and read it if they want. They click one of these, Jude. And then it talks about the strengths.
Oh, like fire clan. The hot headed. I don't know, something.
Yeah, so some clans are faster.
The Aer clan stronger and strong, but don't go on the brains.
And then some level up faster.
Yeah, like Earth tribe.
So you know, something like that. So you come in and then you can choose and you can go back. So you can go. This would take you there and then you could also go back. Right, it's like back and then that's part of onboarding. So okay, they choose a. They choose a clan, Jude. Then after they choose a clan, then there's like these four things that we still had to kind of deal with. And I'm just gonna switch the screen real quick, you guys, so you can see this. I mean, y'. All. So now we have to deal with like pets, outfits, accessories and power ups. So when you play most of your Roblox games, at what point in time do you start getting introduced to all the accessories and objects and elements in the game? Like right away, to be honest, you.
Kind of just have to find it out for yourself.
You have to find it out for yourself.
Yeah, that's the dumb part.
Does it take time?
I mean some, some like simulated games. It's like kind of you gotta figure it out for yourself. But some is like you have to figure it out for yourself. No choice in life. I think we can make it like a story game plus a simulator in bro. That would be amazing.
Okay, all right, so thanks for telling me that. That's important information. So after they come in, they select their clan and then it tells them be like great selection.
Great selection.
And if they want to change their clan, then literally they have to maybe lose all their.
That's cool. Because Like, I've done that exact same thing. Like, I've actually, I've accidentally say, like, choosing someone. You're like, you can only choose this for once in your entire lifetime of this game. You have to make a whole nother account to do this. Let's not do that then, dad. Then you miss click, dad. You miss click. And it's annoying.
I don't want to. I don't want to. I don't want to break hearts. So let's not do that.
You misclicked. You misclicked.
All right, all right. So again, we have this screen. We have to deal with the pets, the outfits, accessories, and power ups. So, Jude, one suggestion for me is we at least have one screen to explain that these things exist in Roller World.
Oh, I have a really good idea.
Okay, Throw it on me.
Okay, so, God, it's kind of like. It's not much of a thing you could say. It's kind of like a thing that you show.
Can you talk it out loud?
I mean, well, it's kind of like. Yeah, I don't even know how to see it. It's like e. Okay, I'll try and draw it.
Okay, take your time. Draw it out. So as we come back in, remember we have our little quick onboarding. They do a great selection and then we need to take them back up to our next part of onboarding. Okay, so they're here. So maybe they made decisions, right? They made a clan. We gave them autonomy to make choices. We were introducing the narrative and then they come to the game and then they see. But wait, there's more. There are inside a world. We need to make sure that you can get around in Roller World. We need your help in this roller. And I'm just writing this right now, G. We can always change it later. But we need your help in this Roller World adventure. This means we need you to choose a pet outfit, your core accessories, and your power up choice. So you come in here and then you're like. You see this, like, message, like, and then it says, we need you to do this. So the first thing that they can do is they can click on one of these. And then when they click on it, then they have the lineup of pets that they can see and it scrolls this way. Jude. Yeah, and then there's bios about the pets, and then there's some pets that are locked and then they can unlock them by purchasing points.
Okay, yeah, sure. That sounds. Yeah, sounds cool.
So, so basically you click the pet, you come over and you See the pet, his name is. His name is Peter.
His name is Samuel.
Samuel. I like Samuel. Alright, and then Samuel is right up here. And then you can see all the different pets here. And you can scroll and then you can select it. Okay.
The more you do challenges with your pet Samuel, the more he levels up. The more you levels up, the more stuff you get.
Right? And then, Jude, what we can do is on this left side, right here is like kind of like your profile or bio that you're creating for Roller World.
Okay, I'm done with this thing.
Yeah, let's explain here. I'll turn on the camera. Or do you want to. You want to keep it on drawing mode? Okay, drawing mode.
So what. There's.
Something squeaky back there.
So there's this. So like the npc, they're right here and they're like. So you could choose duh, duh or duh. This is like a cool scroll thing. And then you're here and like, it actually shows, like, your body and your hair and you're like, hmm, what could I pick? Your mouse comes over and it's like, click, click, click, and bam, it's coming.
So what are these squiggly lines again, Jude?
It's just like the text.
And then is that pretty similar to like this one over here, buddy? Like, how. Which one does this compare to on any of these? Because this is like where you're picking pets. Oh, cool. Okay, so do you want to add some circles down at the bottom of your. Your screen and then your. What does the scroll bar do?
It's just like a cool little 3D type of whatever.
What does it do?
Nothing. It's just like this, like when you go into the screen, like it's black, comes up. The scroll just comes down from the screen and it shows you all the text.
Okay, so it's a more of a visual design. Scroll.
Yeah.
Okay. Like an actual scroll scroll or like scroll bar. Scroll.
Scroll. Scroll.
Oh, cool. Like. Like a. Like a scroll where it's like kind.
Of like a ninja scroll.
Oh, I got it. Like something like. Kind of like ninja. Like a. Like something that can roll up. That's cool. Cool.
And then it comes down on the screen with like, visual effects and it just like comes out cool.
So what you. That's really cool, G. So what you're doing right there, you're thinking off the canvas, which is a really cool thing to do as a designer. So what you're imagining. So if I have these dotted lines. See these dotted lines over here? So they kind of come across in here. If I even grab a different. I don't know where. All right, let me grab my marker. So the cool thing about this, Jude, when you're designing, you have the ability to think about how things get introduced into the canvas. So if this like box right here is the canvas, your scroll can be coming down this way with certain elements. A menu could be coming from the left side, like a save menu or comments or something. On the right side you can have other things that appear and show up in the game. And then down below, because we're putting, we're already showing where pets and outfits, accessories and power ups are. We can always have those at the bottom of the scre. Because that's how we're introducing it on the game.
Yes.
So I like what you just did. You probably didn't even know you were doing it, but awesome job.
I knew that I did. Yes, I did.
Alright, so this one is pets. So what we also just did, Jude, was we created a framework. So if we have four more of these and then each of them have a sidebar. Okay. This is like the person. So now when they come to outfits.
They'Re like, oh, you get a picture. Or we can make it like stick with your original outfit that you have like your original outfit or go with the different one.
That's exactly right, Jude. So each one of these has a default, right?
Yeah. And then you can change back to whatever you want.
Exactly. But you can scroll down and upgrade immediately. And we could give them like one or two options that way. When this is a part of the intro, whenever they get back to these pets, outfits, accessories or power ups, they understand the UI for it. They already understand how it's going to operate. Does that make sense? Because like when you come back to a tool or a screen, you want it to be same or do you want to be different every time?
I mean, it depends, you know, I mean it's gonna be like you're. I mean, or it could just be on the same thing. If you're saying it like all these, like your. Your outfit, your badge.
Yeah. So I think like right here. Yeah, I got you. Jude. Jude. So right here you come through and you go through this four step setup. Then right here is like where we have to get them back into the narrative. We have to get them back into the story. So I'm gonna get another piece of paper. So from, from this part they come back into the story and this is like where we're gonna start introducing them to the very first like event to the park, to Roller World park. And so this is like. So basically they got their tickets, right? They've come into the amusement. They come to this world. Now they're ready to like get into the world. So this gets them into this, this part of the map kind of. This part is. Well, this part is G. This just the hub is. But then it's. It's not an amusement park, but I'm calling it a park because this hub is kind of like a park and then it goes off into its own worlds.
We gotta make it like not kind of like we want it to like have this structure. Like duh. I mean, I don't know.
Tell me more.
Just like we don't want it to like really like be an amusement. Amusement park or whatever. We want it to be like our own little thing, you know?
Yeah, I mean it definitely will be. I'm just. I think the amusement park for me is like the, the frame. This like this, the. It's the. The perimeter of the hub where it has all those things in different areas and then it breaks off into the different worlds when you go and skate and play and compete and do all this other stuff. So you come in here, let's just actually do a fun little map. This will help us imagine it better. Okay.
Pretty neat, bro.
Alright, so G, when they first come in, what they were doing over on the side, right, they had 1, 2, 3, 4. So they had pets, they have outfit, they have accessories and they have power ups like moves. Okay, so they've already picked these things. But now when they get into the world, they have like those options where they can go, you know, to help, to learn. They could. Let's get this other thing back in view. Can you slide this paper? There we go. So they have the ability to go to the help center. They could go to the store, they could go play like right away. Which we need to work on that flow. They could go to the training room.
No, go on. I mean, I think you should just put them in. Like they don't get to choose where they go.
No, no, they would be. They would just go. They would just get in. I'm just writing these out because these are the options that they could do. They might skip all of these things.
Like when they like come in, there's like an npc like hello player, I will teach you how things around here go. I don't know. Just like.
Well, that's what the help is, right?
No, like it like it's like right when they get in there's like an NPC and he's like telling you where everything is and then he shows you like over here is the da da da da da da.
Oh, that's a cool idea. That would be amazing. I love that idea.
Well then we're doing it.
Alright, that's really cool. So that's where that. So we have help play locker rooms, training rooms, and then the community center. So Jude, they have this option to go into any of these things which are actual destinations. Right? These would need screens. Need a screen, need a screen, need a screen, need a screen. All those need like design screens. All these little dots. Okay, yeah, but let's say they bypass all that and they want to play like right away. How can we get them into playing within like the first 10 seconds of the game?
Well, I mean when the NPC is like saying hi, there's gonna be like a thing in the corner of your screen that just says skip. And you could click that and it just skips the introduction.
Okay, then what?
And then, I mean you probably, if you're gonna skip it, then you probably know what you're gonna do.
So then you can immediately play and that allows you to skate. Right. A wreck right away.
Wait, wait, wait. When like you first get in like the loading screen, it just says like story mode or like not story mode.
What if we started with like what would be the simplest way right now to start? Because storage. Story mode sounds like it would be a whole different game mode.
Oh, maybe. Because I've seen a lot of games like the game designers are like story mode coming soon or whatever like that.
Story mode coming soon.
Yeah.
We could like, hey, let me, let me do this.
I don't know, like, like a month or two of the game being up and like having some good feedback and stuff. We could be like story mode coming soon.
Okay. Okay, so maybe there's that, that's that. I'm totally into that. Let's story mode. Let's focus on trying to get the basic level of gameplay designed. So if I come in here and I, and I have all my other things that I want and then I decide I want to just skate around with my friends or I want to. Where do I go? What do I do? So right now we. Okay, go for it.
So you come in and then you're going like you're going to the community and then you go to this middle little place and you're like, hi lady, take me to the skate park or take me to the skateboard challenge. Yeah, like take Me to the skate park. And then it goes black screen.
Okay. Okay. Hold that. Hold that thought. That was cool. So maybe inside of our. Inside of these, there's, like, these are worlds. 1, 2, 3. So these are the worlds. And you come in here, and then when you click on that, like, world one, you said it goes black.
Yeah. Like, the screen just, like, closes in from both sides. Like, boom. And then opens up.
It goes this way. Like, closes. Okay.
And then opens up at the skate park. Go down and bam. And then opens on it.
And then it. And it comes back. So, yeah, it almost like it shuts. And then. Okay, all right, all right. So it opens. It closes, opens. And then you're inside of the skateboard. And that's like an open free skate.
No, it's where. Remember that skating game? Yeah, yeah, yeah. It's kind of like that. Where you just open skate, you hang out with your friends. Like, maybe do, like, we could have, like, a thing where, like, do you want to challenge your friend who can do the. The. The best. The tricks in five minutes? Yes. And if he also says yes, you guys go at the. Bam. Bam, do the tricks. Or you could be like, I want to escape. I want to roller skate fight you. Bam.
Right. Because in those things, you still have the. The moves and the. In the. And all the other challenges and things. What is that? The skate parks. How do you envision the skate parks terrain? It can't, like, just be a skate park, right? It can't be flat.
It's gonna have, like, jumps. It has the jumps, and then there could be, like, a jump that says, like, you have to be in the Fire Clan to do this jump or whatever.
Okay. And it's like, are you imagining, like, a big, giant world or is it a super small world?
I mean, how big is it? It's, like, medium. Or wait, it could be, like, small, but we could make it where it look looks like it. Like you're in, like, a dome in the middle of, like, the universe. You're in, like, a dome.
Is that something you could draw?
Maybe, but I'm not good at drawing.
It's okay. We can practice. Do you want to use a thinner? Okay. All right. So that's. Yeah. Try to draw what the dome would look like. So there's jumps and there's, like, activities. And this is kind of like a fun way to get warmed up to the game. Right? Like, to understand the moves. So you would understand the buttons. What kind of things would you need? You would still need to be able to. Toggle your different elements. Do you get a point for. I think you should get a point for participation in this one.
Oh, yeah, sure.
Like, you should get, like, a point. So, like, the point system that we are thinking about, I think you should get a point for, like, jumping into the world every day. Like, if you were to play every day, you would get a point. And so there's different ways and things to happen inside that. Cool. Cool. So, hey, everybody, if you. If you're still there and you're still watching this and checking out, if you have any questions, like, let us know what you think. Say hello, Say hello.
Notification that you're still here.
Yeah, so far, I think we're making really good progress. This is really helping me think through what we're going to be having, what's going to actually happen on this area and in the experience. But today's kind of more of this creation day because I think once we know this, we're going to be able to execute the designs a lot faster and a lot cleaner. And we have about 30 more minutes left of the show. So again, if you have questions or if you want to talk or if you have any questions about products design or game games, and we'll do our best to answer that. All right? Okay, let's see it.
Dude, you want to see this?
Yes. So what explain like what, what each of these elements are.
So you're in, like, you're in like a universe. You know, you're in the universe and you can see, like, this is the main universe. This is your main little island place. And this is in the middle the of the universe. There's like your dome. And then, you know, you go to the different universes and they teach you different rollerblading skills.
Whoa. So you. You're imagining the world literally being is a sky. Like almost like a sky base, bro is up there.
Like up there, up there.
And then what's below? Like, what would you see? Like, outside of this dome?
That's where the story mode can come.
That is so cool.
You're like, okay, we've mastered everything above. Oh, yeah, sure. We mastered everything above. The legend of the. The master rollerblader. Down. What's down? We've never been down. Yeah, kinda, you know. Oh, yeah, there's like, zippo. That was my failure as a banana. That's supposed to be a moon.
So this is. This is how I interpreted what you were. What you were drawing. If this is high up in the sky or if it's not, like, it could be looking down and on below in the ground. Is this like human Roblox? You can see different levels when you're up playing like in Skyblock, even when you're really high up in the air.
Yeah.
What if. What if this was our worlds where you skate are actually in like up.
Top or I was thinking like this. This entire place can be there.
Yes.
Yeah. Perfect. Let's go.
Okay, so this is the hub.
Hub. Yeah. And then, and then like after you do all the challenges or like, I don't know, we're just. It's gonna take a long time, but like I. This is a lot of fun. This is like one of my favorite episodes.
Oh yeah. You like this? This is cool. Yeah, this is a. This is design. Jude, you designing with us, brah. Alright. So cool. So we have. And this is kind of like the start of a workflow map, Jude. And then what this would end up becoming, we would design each of these screens and then it's. You start to see like the world and the builds come to life. Because we also already have. Are working with an architect. Architect is going to be building this. Great question. So we have a question and at what point in the process do we start to do sketching? And the really just straight up honest answer here is you usually sketch the entire time. Like you're not just sketching in the beginning of the process because you might need to work some ideas out or you might need to flush some things out. If you, if you have a design system and you're working with some material design or another product that already exists, you don't often have to rebuild all those artifacts. So you might just go in and sketch out what you want. And then you would work with an engineer building it. You don't always have to rebuild and redraw certain things. I tend to sketch every time because this, what we just created here, it could change like multiple times when we start designing it and building it and realize that it's really hard or it was spot on. And then I will literally take a photo of this or I'll just plop it up on a board. Like I have these boards around the house and I'll put them right next to the computer and then I will just create it inside of Figma or sketch and like this, this little thing, I will, at the end of the episode, I will design one of these so you can see how fast this really is. Okay, so in 10 minutes I'll design one of these and I can maybe start the mocks for some of these. Good question. Yes, but definitely, like, sketching, in a sense, helps you, like, flesh your ideas out, helps you get them going. Does that make sense? What do you think of that?
Big brains.
Big brains. All right, cool. Let's go back to this narrative, this story. So we have this thing, and then we get into this world, and there's hills. I'm imagining, like, mountains. Even inside of those little worlds, I'm imagining, like, you know, Jude and I and Jamie. Oh, it's totally bigger than that. Imagine this, like, you know, but this is a good. In perspective. Like, the. This perspective is small.
And then just one more thing. You could get, like, training at the sun.
I like that.
You gotta. You're. You gotta have the. The sun ruler blades where you can stand on the sun, dude.
Yes. Yes, boy. Yes. And inside of this. Inside of this cool, like, epic world, like, we. Jude, Jamie and I went on a hike today, and we were running the trails and just, like, seeing the big giant redwoods. I love if we could get redwoods inside of this game.
That's possums.
Yeah, like, get giant redwoods and giants. Like, just giants things. And then you get this, you know, skate by them.
Yeah, yeah. That could be, like, part of the races where, like, you're racing down, like, a redwood hill and you're like, yeah, back to the story.
Right? Because I just definitely don't want it to only be like. I don't want to be, like, concrete. Like, I don't want to be like a concrete jungle. All right, cool. So we come to this world, and this. Say this is world one, Jude. And then let's say they want to get out of this. How do you get out of this game? Like, is there, like an escape button usually in these worlds of these mini games? Or is there ending or.
I mean, how are they even getting to the world?
Well, remember they clicked on this on. They go to the community center. Remember this? So remember how we talked about.
It's not just like they teleport you. Like.
What if. When there's, like, a little door that opens up and then you click the door and then you go down, like, a skating hill or something in your. In the world, like, teleports to. Or something. Like, you know in Harry Potter when they go into the toilets and then they. What if we did something like that, but it was a door instead of a toilet? What do you think?
Or you know, in those movies where, like, Dr. Strange, he's like, you're like. Maybe, like you're going down, like a fast stairway and then you just teleports. You. Like, it's kind of like a daly gone alley where like you're going not diagonally like the train station, and then you teleport through the wall and then you fall out of the sky and you're just there and then the thing that took you, it just disappears.
I like how big you're thinking big. So.
So.
I'm still trying to imagine it. So I walk through a door and then I like though that it's something that you wouldn't expect.
Yeah, like, it's kind of like in those movies where like. Like you run down the hill and then you kind of trip and then you just fall into the portal. Then you fall down from the sky, then into the the world. You fall. You like.
That'S pretty cool.
You make out like a cutscene.
So. So G. What I did was I just added a little like, in between where it opens and closes. When you click that magical thing, there's unexpected entry. And I think that's something that we still need to figure out and get some more details on. But to keep the game like. Like, so we could get it built sooner than later, let's just say, like, there's an unexpected entry. We'll figure it out. It'll be kind of fun and quirky like you just described. I think it's a brilliant idea. It's very different, original. So kudos to you for that. And then you come into the game and let's just say you get into the game and then you're ready to leave to go back to the hub. How do you get back to the hub? Is there typically like in the top left or in the top right a button for you to get back.
Big brain idea. Okay, so you go into your inventory or whatever. Or we're gonna make like what side should you could be like, we could make it like. Okay, I'm trying to think.
Do you want to keep thinking on it?
Yeah.
Okay, so. But remember that is there currently inside of Roblox games like an exit button or something that's usually in the bottom left or in the bottom right or in the top left.
You actually have to walk to the exit.
There's an exit.
Yeah, because like the transport thing that transported you just like disappear. It's like we could make it where, like there's like a Summon it back button.
Okay, well, we need to. We don't have to. It just needs to be somewhere like. Like if it's up in the top right or like, here, let me just show Back to Screen Cap. What I'm trying to get at is, like, for all these things, when you jump into the world here, if we're like, in a world and they're like, here, let me do.
One person in like, like Dragon Ball super, who's like, his name is Whis, and he can just like, teleport you through the universe. Universe, which is really cool. And I mean, we could make like, a button at the top, and it just says, like, go back to Hub. And you press that and we just pops in and he's like, hello, do you want to go back to him? Press yes. And then. And then you just get teleported back. He just drops you off.
That worked.
Yeah.
So like. So, yeah, I mean, I was just wondering, like, if it's like, does it need to be on screen or would it, like, would you expect it to be, like, on screen all the time or would it. You want to have somebody go to a certain area and then they would click it?
No, that's the thing that I'm trying to figure out. We should just make it on the screen, like, click. Or you could make it.
Well, here's. Here's something that could help you make that decision. Do you want people to, like, do we want them to have to go back to the Hub easily, or do we want to make it a little hard? Because, I mean, I don't think we would want to make it hard, but, like, I mean, you know, it takes up real estate to have it up on the screen all the time. And if they're playing, we probably don't want to show Back to Hub. Back to Hub. Back to Hub. Because there's also inside of Roblox, Right. There's the chat. If you're chatting with your friends, is the chat usually on the left or the right?
Right.
So they have a chat. Oh, see? So they have the chat here and, you know, we have our little button up in the top left. They have the chat and it's kind of like usually like a lower opacity. Right.
You know, we could just make the back to have, like, the bottom of the chat.
It could, but if it's close to where people type, it could be challenging. Yeah, we'll definitely. We'll definitely leverage the escape on the keyboard, but just from excessive, like, we just wanted to also probably be accessible so you could see it and get back to it. Eunice had a good suggestion to just make it, like, where the escape button on the keyboard just fix it up.
The escape button actually makes you, like, Give an option to, like, your, like, game games.
Oh, the game settings. Okay.
Like, out of the. Our game into, like, the Roblox settings.
Got it, got it, got it, got it. Because, like, even in this game, Jude, like, the pattern, the three. The three elements, like, we'll have the ability to have them down at the bottom. Right. So we have pets, like, the things where you can go in and change your settings while you're in the game blading.
I mean, we could just make like an inventory button.
Or we could just have one inventory button.
Yeah, I think that would be much easier.
Okay. One inventory button.
And then, like, your abilities could be at the bottom.
Oh, the ones that you have active.
Yeah, like we're saying gone. Bam.
So these are your active.
Your active stuff.
Okay.
And you can only have, like, five probably. Okay, Five different.
Okay.
Yeah. Five different things.
Yeah.
And you could keybind them to, like, whatever you want. And you're like. Like when you're gonna equip it into, like, your bottom hot bar thing, you could just say, like, I want. I want to use their single. I want it to. To be F or Q or P or O or whatever. Just whatever.
On your keyboard, what would be a good icon for that? For. Yeah, a good icon. Well, for, like. Well, maybe. Maybe I'm thinking for inventory, like, what would be a good one for, like, a box?
We would have to probably make that from scratch.
We could. But what would be a good starting point?
Probably, like a backpack. Perfect.
And I'd be more than happy to redesign this too. This one?
Yeah, that one.
All right. I like that. I think it's a good one.
Oh, no, that's actually. And also in the bottom, we can maybe make, like, a map. You press M for your map. You could probably hot bar that turret. Or, like, you could end game settings, like, I don't know. In, like, the settings of our game. We could make it, like, where you just hot bar everything. Well, no, not hot bar everything. Where you keybind everything. Like, instead of M, it could be, I don't know, like, control double.
Uh, I think you're spot on, though. Like, we would want. We would want them to get a picture. Yeah, well, we would want, like, a good, solid keyboard shortcut. But I think there's also, like, we might even want to show the map and then allow them to be able to, like, know where they are. But yeah, let's just say we have, you know, we have our inventory. We have a map, and then we have, like, these power ups. Those are like Power up examples.
Because, like, in games, when you don't get a. Like, when you don't get to, like, what's it called when you don't get a keybind, like, your attacks or whatever it is so, I mean, so annoying, like, almost to where I can't deal with it. It makes me want to leave the game because, like, the game's so good. But, like, just like the thing. That one little thing throws the whole thing off.
Give me. Give me an example of when that happened to you.
I mean, like, it's just like sometimes, like, the buttons are in such an awkward position for your hand and just makes this, like, you want to play this game for, like, maybe years on years or whatever. But, like, that one little thing is just like, if you're gonna play for that long, you don't want to just keep having to. To deal with that, like, awkward hand cramper.
Oh, my gosh.
Yes, this is legit.
We need to definitely consider those things. So these are just, like, going to be example. And then Eunice had this good idea where. Yes, Eunice, since this is a. Like, we'll be able to handle hover effects. And so he had an idea to. The controls can be 70% transparent on when it's not in focus state. So basically, like, when you hover over this, Jude, it would be 100%. And then when it's not. When it's not, you can just group this. And then I can either. On my keyboard, I can set five. And then that's like a lower opacity. I could go even lower to two. And then when you hover over it, it goes automatically to, like, 100%. Does that make sense? I'm gonna do 20%. No, we don't have to. So that just. That's just a game mechanism. So when you hover over with your keyboard, when you click it, it comes. We could try that.
Because in games also do that. That. I know.
It's just.
It makes the game kind of just like a little more smooth.
Yeah. I even was thinking, like, but I.
Kind of want to keep, like, the. Your little, like, things in the bottom. Yeah. Just like always. Kind of like a hundred.
Right? Because those are like.
Like, you're gonna use that a lot.
I just added a little, like, oh, that's cool. Cool. Little, like, map thing. And I'll do one over here.
Got eight minutes late, y'. All.
Thanks for telling me so. Okay. Sorry. Actually, I was looking for the flip button. I didn't see it up here. Like, maybe there Isn't. Maybe there isn't one. I don't want to recreate this real quick anyway. All right, moving on. All right, fantastic. So we got seven more minutes left of the show. So what we've done so far is we've created this little like narrative. Oh, darn it. Switching back, what we've done so far is we have a welcome to Roller World and then you come in and we are already showing some of this and the designs on screen. We have this introduction to the narrative of what's happening. Hey. Hey, Johnny. Hey, Jude. Thanks for visiting the game. We want you to go ahead and get started because we want you to be ready and prepare for Roller World. Why don't you go in and pick your goods first? Let's start with the clan that you want to pick or the tribe. 1, 2, 3, 4, and there may be four. They come in, they get to see the three different. The four different crews and then they can choose one fantastic, great selection. Then they come back over. And now we get to. We need your help in the real world adventure. This means we need you to choose your pet outfit, accessories and your power ups. All right, sure.
You get to start with a pet. I think you get a. Like buy them from the shop.
You don't think you should start with one? Okay, we're gonna eliminate. So that's why we do pencil before design.
Like different clans means like if you, if you're on this clan, you have more power, but you don't have a pen.
Dude. Awesome idea. So there's. There's things that we can figure out there. That is gonna be logic, game logic, which we'll figure out. Alright. Now we have like the four different outfits, accessories, power ups that they can choose from. So. So we have two. One you or actually two user stories for this. Jude, I need to design this layout and then what we need to do is come up with the pets. We need to list the pets and we need to list their names and we need to list their powers.
This pet gives you more strength but less this other thing.
That is right. And then what we have after that is we have kind of like this thing where we were just trying to think through this. So they come in and like Jude was suggesting that there's a bot that can take you to different places, which I think is super brilliant. And then you have yelp or not yelp, but help. And then you can just jump in and playing, which if you jumped into playing, you'd have to come over into the lobby and then you Come in and jump into it. Doors close, doors open. Then you have an unexpected entry down the toilet chute. Just kidding.
Okay, bye.
And then you come down and then once you come down then you have your open skate which has mini games on where you get to understand the buttons and you get to go through the mountains and you get to go through all the cool areas and you get to earn points and things from, from hitting, from picking things up and doing other jumps and experiences there. Then when you exit the world either. And now we're back to the screencast. So I'm gonna rapid use like a couple minutes and design what we, what we created. And Jude, I want you to watch this. All right, so alright, so let's just say we're going to start with like a 1440 that's the size of like a laptop. Alright. So we have this and when somebody comes into the game, let's say we're going to give them this background like chromed it out. I'm gonna give it a little for fun. I'm gonna give it a little like a little shadow behind it. Okay, cool. So they come into the game and then we have a chrome and this is gonna be. Let's see, what is that? 12:20 and I probably should. We'll figure out our grid and everything layer because I pretty sure in Roblox like the screen will stretch, right. So I'm gonna come over and that's the sidebar of that. And then I want both of these to be solid, not at 8 and how many minutes. Awesome. I can do this. And then the character. So that's like the center. So that's the. Oh yeah, we're doing pets right now. So we have pets and then inside. So one of the pets names is like Peter.
Peter.
And then he's like strengths, strength, power ups. What are us the pets.
Like like pets gives speed, speed.
Humor.
No, no.
Yeah, it'd be hilarious. Like this pet is super funny and.
They make jokes, you know that would be perfect.
All right.
You make your enemy laugh today.
So then maybe each of these has like a little, like a little bar. I need to add some leading. So leading again is the distance between letters. Okay. Or words. I'm gonna do one and then I'll eight.
Oh, just a close up. He's working.
I'm gonna be the Mac looking on my roar.
He's moving, he's moving.
Jude's watching me. He's watching me. I gotta go fast.
Those are my two favorite colors.
I know bro. Jude's been getting Me watching Naruto. And it's so good if you haven't seen it. I'm just super impressed by the storytelling and just, like, just how it's.
So bring these big brain ideas.
So I'm already thinking, like, this circle could be cool, but it could even be cool if the image was even bigger. So if we, like, took up that whole top area 4 versus it being a circle. And then we can fill that in, like, later with, like, some image of our friend. And our friends could have different colors that they like.
You gotta pick a color.
Peter. So we have Peter. Okay, Peter's pretty cool. And then you can kind of see. Okay, now we need Peter's friends.
Peter, Peter. What are you getting?
And then Peter's friends have. Name.
Name is Philip.
Actually. Actually, what I was thinking, even on this side, if I go back to my sketch, this. This is Pete. These are the names. And then this over here is.
I'm Peter 3. I'm Peter 2.
So this is you. And then this would be your. So these are a part of the characters over here. And then we have. Oh, I know, we're right at time. Hold on, I'll try to finish. So we have Peter. And then we need a little bio about him.
Peter. Peter. He likes long walks on the beach. Loves long walks. Hikes. No, loves long walks on the beach. With donuts.
Yeah.
No, no, with donuts.
With donuts.
With donuts. Yeah. That's the bile that Peter.
All right.
Peter likes.
So Peter. What is Peter, by the way?
Peter is a. He's a pit bull.
Are there dogs?
I mean, or. We can make, like, anything. Anything. It could be a dog. It could be a cat. It could be a.
Well, what kind of. That's a good question. But we can.
It could be a dragon. It could be a big drag. It could be. It could be a lot of things. We need ideas of pets.
Well, I know how we can do research. We could do research on all the different. Like, a lot of the different. I mean, it's all the different shows and stuff that there are about. There we go. We have that. We have Peter. And then Peter's. There's a little bio, little description, and we can clean this up later. And then what we'd have for each one of these is. And I'm just holding alt and just drag this down. So then you have the listings. And you might, like, put a. You might have like a. Like a little nav there.
I'm PETA 1. I'm PETA 2. And I'm Peter 3. We all love long hikes and walks on the beach with those.
And then I might just lock that so I can select these things now. So now that I lock that background, it's easy for me to move these around. So then you could have like. And you would have, like a little scroll bar, right? So you'd have a scroll bar there. And then. And then over here is like your, like your selections. So we would need to figure that out.
Then, like when you level up or whatever, you get like, like stats. And then you could pick like, you got this level up point. You can use that on speed strength. You could save those points to buy something in the shop or use it on your stats and. Yeah, that's right.
So basically, this, what you're seeing right here is a first draft of when we were talking about, like, picking your outfits. So you can pick your outfits by looking at something like this. And then when you're going through the flow, there might be like, you know, continue button down here. Continue to outfits. And so what, what you just saw there was. We did some ideation, we did some brainstorming about the flow, and then we actually got a lot closer into what the UI and the onboarding would be like for this game. And then what we'll do is we'll have all these screens built out and then we can create a little clickable prototype. So then we go in here and we start presenting it. Jude. And we'll be able to click through our game.
Wow.
Yeah. Because these were the other screens that we were playing with. Like, this was one of the screens we were messing with earlier where I was like, using a lot of inspiration from, like, Brawl Stars. And then these were the other drawings of the game in, like, different ways that we could represent it. And then this is an example the other game. So we're making. We're making progress, buddy. We're doing this. So, you know, that's the end of the show. I think a couple things that we just, you know, as we kind of close the show. What's one thing, Jude? That's the reflection. We always do reflections at the end of the show. And what's one thing that you thought that went really well for this episode and something you think could have gone better.
Well, I'm really glad. Like, you know, we got kind of like the storyline, like, tight, some of that, like, done or whatever. And we. And we got this. This was like one of my favorite things that we got. I'm really glad we got this.
That was great work by the way I like. I like your. Your brainstorming.
And I feel like my brain used a little bit more brain power today.
Cool. And something you think you could have done better?
I could have. I could have another perfect episode.
Little humility, Jude. What's one thing, man? One thing that you could do better for next time?
I could have made the moon not look like a banana.
Hey, that's true. You could have. What's one thing that you can do to make a moon not look like a banana?
You practice your moon drawing.
That's right. Good job, Jude. Way to show us a little bit of humility for me. Oh, boy. This week has been kind of a wild week of a lot of different projects and a lot of things happening. So we got pretty creative as far as what we were going to do for this week's episode, like last minute. I think next week I want to put a little bit more time and energy thinking ahead for how we can keep executing this so we can bring you stellar content around designing with us. But also, we don't want this. We want this show to be super fun and relaxed and in a way for you to learn about design. But also bring your work and design with us because it is the name of the show. It is the name of the show.
Design with us to make something that you can actually play. It's pretty neat.
That's true, Jude. That's true. And yeah, so that's something. Something I think went really well, dude. I think your brainstorming efforts and the way that we're bouncing ideas off each other is getting better and better every week. So I'm really excited to be a co designer with you on this journey. So thank you for letting me do that with you. And then, yeah, so next week's gonna be a lot of fun. We're gonna continue pushing this. We're on week 10. Wait, what are we on week 10? I think we're on week 10.
10 weeks.
Here, let me triple check. Let me triple check. Because, yo, let me just triple check. We are on week 10 next week, dude.
Yeah. So we're on week nine.
This is week nine. Yeah. So, so much fun. So much good times. Thanks so much for coming and spending this time with us. We know you could be doing other things like watching Netflix or watching Naruto or eating. Making dinner or something. I don't know, whatever.
Cookie.
All kinds of things to do.
Petting a dragon.
Petting a dragon. Probably. Probably. And two other things I wanted to share with you if you've made it this far, I have a couple new things coming out very soon. I've developed a new UX coaching program calling it Next Level UX. And this is a 12 week coaching program where I put you through the wringer as far as all the elements to help you with your mindset in design, to help you with getting really good at planning, to getting really crisp clarity as far as how to approach your role as a designer and jumping into the design career. So I put so much effort and so much energy into this program and I can't wait to share it with you. And as the coming weeks, I'll keep sharing a little bit more about it, but it's coming, it's almost there. Jude's even learned a little bit about it and the action planning and the goals. So there's a two one week on goals and one week on action planning so you can get really crisp on how to achieve more in your productivity as a designer. So that's about it for today. Any last things you want to say, Jude?
No joke, do it. It is some big brain stuff. Some big like, like large like big, big brain stuff. That's, that's big.
Jude, Jude. Jude is supporting and I appreciate you, man. I love you. I love for that. I love for that. All right, cool. I will see you next week. Have an amazing week. Stay positive during all these crazy times and, and just.
Do your thing.
Do your thing.
All right, bye.










