Design With Us - E10 Interaction Design
Drew and Jude design the onboarding UI for Roller World, sketching the backpack, map, and power-up cards. They prototype a keybinds customization flow and plan to componentize the sidebar next.
Chapters
Sa Sam.
Yeah, yeah, yeah, yeah, yeah. What's up everybody? Welcome back to another episode of Design with us. This is episode 10 and we're super glad that you're here because last week we did a ton of work on the interaction design and the interaction patterns that show up across roller world and boy, oh boy, we have a lot of work to do. But we're gonna continue that today. And what you're looking at right now is some progress that we made around the setup of the game. When you're getting into the game and Jude and I had shown you this a little bit of this last week. And a little bit this is just some sketching around how they onboard and get into it. Jude had Jude remember this, talking about the. Talking about the world. Talking about how the perspective of, you know, jumping from world to world is pretty cool. And then we also had another sketch here. Do you remember what this was about?
Yeah, it's like where you gonna pick your stuff? You know, you get that stuff there. You get that stuff there. You get that stuff there.
Cool. And then we also had another little step by step of what we were just thinking about the flow and you know, we were kind of jamming, having a good time and now we're back. So if this is your first time checking out design with us, watch the other episodes. Watch the other episodes. But also just four watch hours before. Before or wherever you want to jump in. But so far this is the 10th episode and what our objective is, we're basically mixing product design and game design and everything that Jude's passionate about, everything that I'm passionate about. And boom. Making an explosion of learning and development and just having a good time in a nice chill environment and a fun environment. Right. So that's why we're here. And we're just super thankful that you're here. This is the second to last episode. Episode 12 is going to be the final episode of season one of this. So we're pushing hard, trying to get as much done as we can. But we're also just here for the journey. Just here for the journey. Jude just. You look cozy over there. You look like you're just chilling. Alright, so what we're gonna do now is we're gonna continue this. So.
Continue.
So kind of where we left off. Let's jump into the screen cap here. So where we left off. Let me make some more space here. Do you mind if I make you a little bit more space too? We have a couple things that we are drawing here. Let's get situated so we had our setup of the experience. Now what we need to do is we need to continue that because one, just setting. Setting up the experience and having it go into. Dropping somebody into the experience. That's great and dandy and all, but that was just. We need to continue it. So when you're inside the experience. Yes, Let me get some of that and I'll zoom in. This is where we kind of left off. You know, we had a backpack, we had some of our action power ups, which we'll need to design and to write up. But we're not worried about all the details of the content right now. We're just trying to understand the gaming mechanisms and how things go in and out of each other. And then down the bottom right, we have a map. The map. There we have the map. And it's always good to have a map when you're trying to get places. Right. So we'll have that. And then over here, this is the setup where we're playing where you're going in and you're picking your items in onboarding, well, they'll end up having names. So I'm just using Team A as a placeholder.
I think it could be like team. Team seven, Team two, Team three, team.
Right. We'll end up. We'll end up naming the tribes or the squads or whatever we end up calling them. So it could. It could pretty much be in. Peter loves hiking and long walks on the beach with donuts. That's pretty good. That's pretty good. So these are just like, you know, for when you're going through and picking, these different elements are going to change. So we're going to do a little bit of that today. We're going to have four states and then so this is what, Team one. So this is when you're picking. And then boom. So we have that.
Your proportions are wrong.
Where are you talking about?
The little sidebar there.
This one. Tell me more. What do you mean they're too big?
No, no, one's too tall.
32. 32. They're all 32 pixels.
I knew that.
All good, man. It's like, you know, it's totally fine, dude. So I'm just gonna give this a little background here. Yeah, so it's like a hover. Like when you hover over this, you would see Peter and then Peter's gonna end up needing a. Peter actually needs another zoomed in version. So when you're here, Jude, and you click in on one of these items, do we have any more details about it? Or. Or is it just show up all. Like, could probably show up here. Right? And then you just select it.
Or. Well, I was thinking. Wait, I was thinking, like, instead of having the pet thing here, instead, we can make it where it shows, like, your slots in your bag, all the stuff you got in your bag. And then we can make maybe like a button down here, like to see pets. Click on it, and it shows this screen. Because I feel like the pet thing is just. It's a little bit more. It's a little bit overpowering.
The pets thing is a little overpowering?
Yeah. Cause it's kinda.
Okay.
I mean, we should just make it, like, right here.
Yeah.
And then all, like, the things in your bag, like your items, your moves, your stuff like that, your attack weapon things. Yeah, they could be like, there.
So. Okay, so let's actually. Jude, let's draw that out first, and then I'll mock it up. Okay. All right, so here is a piece of paper. All right, there you go. And then here. Here it is. So start off with just like a. Oh, I. Sorry, I dropped. Start off with just like a nice square rectangle. Okay. And then here, flip it this way because it's gonna go like. Just like as if this screen is already there. Beautiful. Beautiful. All right, Jude's gonna be sketching that while he does that. Then actually, here, do you want me to put it in aerial view or do you want to meet?
I don't care.
Okay, let's see what Jude took to. All right, so we got this sidebar, and I'll kind of talk it. Talk it over for you while you're doing it. So he's gotten the sketching. Here, let me even pan over to it. There we go. Cool. So you have team. You don't have to spell all, but you can just do.
Instead of like, T. Yeah, we got.
T. Well, one little trick, dude. Whenever you just. If you don't have room to spell it, you can just do, like, a line, and that counts as text. That we know that that needs to be text. And then we can fill it in later. Jax, it's fine right now. You can just go to the next one. So you have team. And then what's the difference between your. Your simplified version and this one?
I'm just gonna do? Basically, I'm gonna put the stuff that I think is good, and I'm just gonna cut off the stuff that I think we can make better.
Okay.
Okay.
All right, so that's there when we get into setup. Let's see here. So this Actually, this button right here is gonna be opening this pack. Oops. So this button right here is gonna be opening. This button opens the backpack, but I need to make a little bit more. We'll make more space here. But you were saying you wanted a simplified backpack, right?
Yeah.
Okay. So Jude's making the simplified backpack. But last week, when we had started on this, this was kind of like where we were at. But, like, I think one thing that we. We had done, we talked about the opening and the closing. I can actually start on that right now. So when you click on a level inside the bigger map. And what I'll do, Jude, is I'll kind of bring over this map right here.
What's after outputs?
Oh, yeah. Powers. So I'm just going to bring this over here. Oh, why did it do that? So when they click into the world, they are going to have this, like, I'm gonna design this other phase while you do that, Jade, drag this down, make a duplicate. This is like another state of that level. All right, cool. And we have some doors opening. Doors opening. Doors closing. Doors opening. Doors closing. All right, so I have this. Oh, you're thinking that they're just showing full.
Yeah. Here. I'm just. Basically this.
But, like, let's do drawing. Let's see if it's gonna get. Get to focus.
Come down. Can you make it, like, go further down?
Yeah, I can make it go down further.
Come down.
All right, There you go.
So it's basically the same thing, but everyone is stats and still gonna go, like, all the way over here and stuff. But all these stats represent, like, your moves. There could be a move there. There could be a Wombo combo there. There could be a single.
Yeah, those are moves, right? Yeah, that totally makes. That totally makes sense, Jude. So here, when we have this. This is just like, for. If you're selected on, like, pets.
Oh, yeah.
And the one that you just did was, like, another state. So, like, if we.
Let's just say this could be, like the resting state.
Yes, yes, yes, yes, yes. So let's just. Actually, we'll just do that. So imagine that that's pets. And then I know I'm jumping around, but hey, why not? Like, we're having fun here. Let's go over to power Ups. And what are all the things that a power that we need to display when it comes to power ups, June?
Oh, heck, yeah.
What do. So if we have, like, how many. Say we have a grid of like, six. Okay. And then the grid of six goes boom, boom, boom, boom. Boom. And I'm holding command D to make duplicates. Command D. So if you select anything and you hold alt and drag it, Jude. It makes a duplicate. And then once you do command D, it just makes a lot of those over and over and over. It's really neat. So if these are the power ups, I think that that might be because we need a space for name. Right?
Wait, one name.
Do you need to be able to read a name to the power up?
No. Yeah, like you click on the power up.
Yeah.
And then it shows like maybe like on the side right there. Like this power up does.
Do you not think it needs like a little description?
I mean. No, it'll have the description if you just click on it.
Okay. Okay. Got it, got it. So what? Oh, the cap fell. Sorry. Cap fell. So one thing that I'm thinking about, Jude, is if. Here it is. Sorry about that. So one thing that I'm thinking about. Let me pull you back over. Is if we have this grid and you see like little name. What's an example of a power up? Like invisibility?
No.
Speed? No. Turbo.
Remember, this is. This is like anime.
It can be more than just anime. Right? So say that's turbo. And then there's a little icon for turbo or whatever. Or. Or would you just put name.
Like put the name in and then click on it and then it will show you like what it is and what it does.
Lightning.
And then we're Sendon.
Seriously?
Yeah.
Bro, I don't think I know how to spell Racing on.
No, not an I.
Is it R? I? I don't know. Racing. I'll look it up later. Racing. Maybe. Maybe there's. Tell it like foresight.
No. Okay. Fireball Jutsu. Fireball. My Fireball Jutsu? Fireball Jutsu. No, it's a G. J.
You.
You. I don't know either. And then instead of fireball, we could do like. We could do like Y. Invisibility. But it's only for like 10 seconds. And if you try and like hit someone. Invisibility.
Should we call it a cloak then?
Invisibility stops. No cloaks. A little.
Okay.
Invisibility and civil.
Right. So we can stop here. Just so we're not like just spend the whole episode doing those things. So these are. These are all those. Right. So they see these power ups. But guess what? If they click a power up, how.
They get in the room.
That's right. Let's. Let's design that. I'm going to show you right now. This was gonna be that open and closed door thing where it's gonna be.
Like.
Does that make. I'll show you what I know we're doing designing multiple things right now.
Maybe sometime I could like, also.
So I'm thinking like, like, if there's like a magic door that this, like, spins this, like, like maybe different interactions happen right here. And then it'd be kind of cool. This is the door open. All right. And then we have our. A cool little middle door, that thing that opens. And then I'll get back to the second state of that.
Just some epic colors.
And then. And it kind of like I'm imagining Jude. It could be like really kind of. It's like under there and then there's like one more behind it. And so this, like, comes in. Or these.
Let's get back to.
Okay, sorry, sorry, sorry. All right, so we had the door opened. So this is the second part. So if this is the power up stage. So you click power up and then there needs to be a selection, a view of that page. Hitting command D. Oh, there it is. Okay, so now when you click, which one do you want to do?
One of Rusync.
Okay, cool. So, so then when you click it.
What do you do? What happens? Then you click resync. And then what happens?
So then I think it would be epic. And I'm gonna. I'm gonna just run this by you. Right? Okay. I think it would be really cool if you could see a. A video of what it looks like. A quick. Like a video that auto plays the move.
No, I don't think that's possible.
It's not possible. Why not?
I don't know.
Okay, so maybe it's a video of.
It or I was thinking, here, can I have the mouse?
Sure. Of course.
First time on the mouse. Okay, so I was thinking either. Oh, God. Oh, God. So either it's like on the side or it's like.
Oh, like it slides in as notes.
Yeah, it's kind of like a note on the side. Like.
Okay, you want to drag. So it would like slide in.
Yeah, like, and it shows like a picture. This is singing.
Hey, let me, let me, let me check something real quick. Choose. I just had a little thing I wanted to close. All right, we're back. So. So what you're saying is this would kind of like slide. Okay.
It's like just a little slide on the outside of the box.
That way we don't have to like, use.
Yeah, Wait, wait. It goes like in. And then when you click on something, it just comes out of that exact place.
That's exactly right. Okay, so here's, here's what we'll do. Bring these back. Alright. So that. So here's the thing. Okay. Okay, I gotcha. I got you. If we do this, here's an idea. Do to kind of clean up the space a little bit. Because this sidebar. What is going to be in the sidebar? Well, going to be notes, right?
Yeah. Like we could actually just write them.
Yeah, let's do it.
Sure.
Just at least get. At least get a couple ideas, right?
Yep.
So we have eight. And then what I'm doing right now is giving these things rounded corners. So a top right, bottom left. Okay, cool. So now we have our little sidebar. When you click Racing on, you click that. Then Racing on is gonna have a selected state. Okay. Let's choose like a blue for right now. So it like selects. Okay. Outside orange. Yeah, well, I mean we'll style this like I don't. I don't think. Okay. All right, cool. So that sidebar comes in and.
We gotta like just for a ref. Or we should just maybe, maybe like make like a. A picture. Maybe we could get a picture on Google of just like Racing On.
Okay. Let me. Let me. Racing On.
Oh God.
Is that. No, no, we're sing. Oh, we are way off.
Oh my God. Heck.
All right, let me come back to the. Let me come back to. Not yet, not yet. I'll get the picture. Hold on.
No, we didn't get better. That's trash.
This one. All right, here we go. We're back.
We're bad.
All right, so for inspiration we got Nerudo over here with this Rasengan. So it's like a power up.
I think we could actually put it in the game.
We can't like put an image that's like totally ripping. Yeah, we have to do. We literally have to draw it with a. Draw our own energy bubble.
My foot.
Your foot fell asleep.
Would never.
Alright, so the Rasengan's here and Jude, like there's probably some details right about it. Like what?
I don't want to make it too long and boring.
Okay, well what like so there's an image of it.
Yeah, image. And it's gonna show how to use the Rasengan. How to use the Rasengan.
Instructions.
Instructions.
It's like this shows like.
How to use their San keyboard. Short. No, not keyboard.
That.
This.
No.
Okay. Not keyboard. Shortcut. You would be like how to use your Sangon on the keyboard.
Well, that's kind of like instructions, right?
Yeah. It's decent instructions.
So how would you do it?
Okay, it could show. Go to the keybinds menu.
Go to the key. What?
Keybinds. Remember keybinds?
Is it called keybinds?
Yeah, keybinds.
Menu.
Wait there. You can pick what key you want Rasengon to be used on and program.
The keyboard and program the keyboard of what you want to do. Of what you want. What key you want. So that's probably there. And then we probably need to know, like, how strong it is, Right? So maybe we have something like this.
I think our sanguine should be, like, one of the most powerful moves in the game. One of the most powerful moves.
And then so we have stats.
I'm gonna make this 20, okay? You be like my strength guy. Okay? Make it go up more. Wait, no, no, no. That's way too lower.
Lower, lower.
That's insane. Power ups. Wait, that's. That's a stat. Power ups is a stat.
No, these were just. Well, it is. Power up. No, this wouldn't be a stat. No.
Okay, change that to what?
Strength Speed. I just added those, I think, last week for humor is in there. The pet has humor. Like, we want to bring some humor into it.
We gotta change this up.
Strength.
Strength, speed. And we can make like. You make it where it's like, I don't. I think maybe we should just get rid of them and just only have two. I think we should have four, though.
I think we should too. So let's just say, like, speed, strength. Is there, like, a regeneration type of thing that regenerates in a certain period of time? How long does it. Yeah, I think there should be something like that. Because you can't just keep using your power up over and over and over, right?
It takes. It takes 20. It takes 10 seconds to use the same one again. Wait, you should just put, like, cool down, cool down, cool down.
And then it's like, just 10 minutes.
No, not 10 minutes. What should be 10 seconds? 10 minutes. That's insane. Can you change how the color of that text is that better? Change the color.
Which one? Yeah. Why do you want to change the color?
I just think it could fit in more. We can make it. Yeah. 10 seconds, and then we can make the fourth one.
The fourth. Hokage. Oops. Sorry about that. I'm just messing around. We've been watching Naruto. We've been watching Naruto. Jude basically gives me a lesson every time we watch it.
All right, we got. Let's go. Go.
Let's go. Cool down. Is There. So there's cooldown. There's strengths there. What else is there? There is there. There's speed, like how fast it throws. Is there like a distance? Like a distance of.
No, that's just. All right, we already.
Okay, what other types of things are there? I Maybe let's just stick to this.
Let's just stick with this for now until we get like a big brain idea.
Yeah. So then there's all these other ones that will fill.
Okay.
So dude, that's gonna make the strength.
Flower and the speed lower. Okay. Because I have more ideas of different powers. That's much better. Okay, so yeah, we can make it like at half. Okay, cool. A quarter. Quarter. Imagine image of graphic or of saying on foot. Okay. Yeah. Can you make like the strength and speed like quarter?
Oh, like even lower?
Yeah, because I have better ideas for better powers.
Alright, so. So that's an example. Jeet. So what we would do next is we would need to actually. So say this was all filled out, right? You click this and then that thing slides out.
Oh, idea.
Okay.
You have to have like a certain level to use a certain power.
Okay.
Level system. Okay, so if that sengon could be like you gotta be level like 75. Level 75. Oh yeah. We could put it in the stats. Okay, we got the fourth. Let's go. Okay. No, not 77. 75. I'm like. You're like perfectionist.
All right, so. So this is gonna probably be some homework for you. Jude is to come up with another like all the other power.
Oh, I got them. I got them already, you know.
Okay. Okay cool. So you have access to this design with us file. So basically your homework this week is just gonna go in and. And fill these in. And here I'll just at least get the text in there. Or do you want to be able to do it?
I can do it.
All right, so I'll just put like example there. So you go in this week and fill those out. Right? That's your homework and awesome. Love it. So and then basically, Jude, if you even want to go in. So that's like, you know, here we'll just actually for inspiration, we'll have to change it later. Okay. But we'll put it there for now. And then I'm gonna give him a little rounded corners because Naruto's awesome. All right. All right. So we have. We have that you'd come in here. This is your backpack basically. Okay.
Should we do outfits now? Sure, sure.
So again, so if we were to look at this. So you Click. You click on racingon and it slides this open. Okay, cool. I think, though, like, from just looking at the space here, I do think that these need a little bit. These need to be a little bit tighter because I feel like it's a little close to that. I want to breathe. I want to breathe a little bit more. And when I say breathe g it, like, you know, I'm just looking for how things are spaced out.
Yeah, that makes a big difference.
Yeah. And then, you know, I can even see that these little diff. These are not equally so. 16. 16. And I would basically come bring this up so we could fit more or we could.
Ooh. One little idea. We could have, like, a. Can you make, like, an orange little button down here that just says save? Yeah, right there. Like, it says, like. Like it says, like, save. Yeah, save.
What was this button gonna do?
It's gonna, like, put it in your hot bar inventory. Not, like, your inventory there. Like, when you're gonna be using it.
We should say add to hot bar.
Yeah.
And then if it says that, you should already see the other ones that you have in there. Right.
Yeah.
That's cool. That's a cool. Yeah. That way you can plan better, right?
Yeah. And then we could make, like, right when this is add to hot bar, you can, like, down there or, like, right under the add to hot bar, it says, like, pick what? Click this and. And, like, C button. Yeah, like, click the button.
Oh, so maybe there's, like, how would. I'm trying to think about, like. Because this action is like a dialog menu, so it's like, over top of the screen. So, for example, like, this. This background right here. Let me unlock it. This background say, like, you. It's behind me one second, going down. All right, so. And I need a. I need a. I need an X. Let me get an X. Close. What? X? That's a good X. So maybe there's, like, a little X to get out of this. It's got to be bigger.
Yeah. Because I've been. This is funny, but, like, same thing with ads, like, on a phone. Like, they're so small because they don't want you to click off.
And this is a game. We want to be super, like, friendly. I just don't really like how there's a lot of space here. So we'll figure that out. I'd rather it be, like, a little cleaner.
We could make the naruto picture thing at the very top.
There. It might be okay if it's outside. But then again, the. Well if we fade everything that's in the game, like, it feels like we. We could play that, but I'm not in love with it. But we'll. Let's just figure out later. Okay. So there we go. Got the power up. That looks good. What do you think? So we have the hot bars. We'll figure this out too. Because, like, I think what I was hearing you say is, like, you could customize this, but go ahead. What's your idea?
So over here. Over here, like, we can make another, like, the fifth little dot thing that we have all these dots. We could make another. And that would say, like, keybinds. And you click on that and it shows like the. Your inventory, like in your hot bar. And it shows like you click on it. Like, you click on either sing on and you click any button on your key and it says.
I got you. It's a settings that allows you to customize. I remember. Dude, that is cool. So that's a little bit. Because these are kind of like all about your team, right? You can go in and see your team. You can see your pets, you can see your outfits, your power Ups. And then. Oh, my gosh, did we forget your. Oh, your accessories, right? Your blades.
Oh, God, I feel dumb.
We can call it blades.
Blades.
Yeah. So and then there's. There was accessories too, right?
Yeah. Maybe we can make that little accessory. What would accessories be? Like your blades? Like your actual blades? Like your.
I think we. Yeah, we'll fix that. But from.
You mean like the blades, like the weapons?
Right? So we had like speed traction style outfits. Yeah, I think. I mean, we. Let's see. Those are the key features. Coin system. Okay, let's go back. I'm just gonna leave it. Jude. If we need to, like, reduce things later, we can totally do that. Okay, so I'm just gonna do this once where I select these, and then I'm gonna select this go up to distribute spacing. So now they're equal. Oh, boy.
I selected that one.
So once you select all these, I'm holding shift right now on the keyboard. And then you got this. Awesome. You see me do that enough?
Oh, yeah.
Cool. All right. And then power ups. So basically what we're doing right now is building a little, like, framework for how you can get back and forth between things.
So we're gonna have to, like, do the same thing with, like, the power ups with, like, every single one.
Yes.
So, okay, I think maybe we should start working on the next thing next. We could. I think a really important one. We should probably work on keybinds next.
Yeah. Okay. And then even like the keybinds, do you want to bring up like, what it. What it looks like on your. Yeah, like in another game, like Open up Roblox on the iPad. They don't do it. Yeah, open it up and we'll look at. See what it looks like. But Jude, what I was going to say right here is like, if we decide like right now I'm using circles, but let's just say that circles ends up not being the here. I'm actually now thinking that we need a Power ups.
Okay. So I found a game. So this game, it's. It's like a Naruto game and they have like the moves. No, you're not a champion.
Do you want to show here? I'll do drawing mode and then you can do. The aerial camera will pick you up. Okay.
Oh, that is possible. Okay.
Ready?
Actually, not yet.
Not yet. Okay, we'll wait. I need to write a description for Power Ups because I think that each one of these, when you come in for new players, we can let them know, like, how to use Power Ups.
G. Yeah.
Power Ups.
Use Power Ups to pummel your enemies to a pulp. Collect Power Ups by doing missions or.
Yeah, by trading missions and playing against your friends. Oh, wow. Little party happening outside. Hope everybody had a happy 4th of July and is staying safe out there. Booyah. We heard fireworks till 2am in the bay area. Yeah, we did. So, Jude, what do you think of this? I think this is looking kind of nice. Like, even. Like. Like you have a sidebar.
We're ready.
And you have account information.
I'm ready. Can I show.
Yeah, yeah, let's do it. So I'm gonna do drawing mode. And Jude, if you want to come over here and I'll Wait.
Can you do the thing where it like connects to.
Yeah, let's see if this works. One second here. Let me go back to screen. Hold up.
Will it. Moment of truth. Oh, what is wrong here?
I'm. Oh, it's like a different camera.
Why am I purple?
One second home.
I'm purple. Why am I purple? Look away.
Yeah, that's not. That's not gonna. It's not gonna work. But here, let's just do this.
Okay, so basically. Oh.
Oh, go J.
Okay, so you have a menu. You press the menu button and you got your menu. So in this, you. You. You got your things. You got your things. You gotta, you know, get any. Any one of these if you wanted. And I mean, we can't get One. Because I mean, I don't gust. We don't got stats, but you can get them. You can see down here it's like your R, T, Y, F, G, H, 1, 2, 3. So all those, you can basically put like the moves in those slots down there. But the real thing, no games do this where you get to pick like what number there is or what there is.
So can you. Can you demo one of these? Can you add one for us? Like, so if we wanted to use the R, like R, how would I.
We don't got money.
Is there one that's. That you can just show and demo that. It's free. I want to kind of see how that works.
Okay, I'll try and grind.
Oh, right. Oh, you don't have to do that right now, Jude. We got about 15, 20 minutes left, but I get what you're saying and we can figure that out. Okay. All right, cool. So this is looking pretty cool, Jude. So we have our. We've really evolved it. Look how much we've evolved it. Just a short amount of time. Good job. So we have that. That's kind of like a framework where what we could end up doing is copying this, Jude. And then we can end up coming back over to our other arc boards and pasting it and the thing that we've done. And Jude, you don't have to worry about right now. So one thing that I do want to tell you, buddy, is once we get this side menu done, we can create a component.
Big brain.
And a component means. Do you have an idea of what a component might be? Here, let me slide you back in. A component is something that you want to reuse over and over and over. And if you've ever built a design system or if you've ever heard of a design system, a design system helps you systematize patterns that show up in your designs. So in our design, we're going to have 1, 2, 3, 4, 5, 6, 7 states here that are going to have consistent layout. So we can make that a component. So we could only build it one time and change out the content. Makes sense. Alright, cool. So we got that. We got that. And you again, Jude. You got your homework for what you need to do. Let's try to do one more big milestone before the episode ends. So if we did pick, pick up, I think this could also work for rollerblade suit. So if you want to watch here. Do you want to. Do you want to. Okay, so collect your favorite styles designs and select your favorite styles designs and well, Styles and designs could be the same. Pick your favorites, collect your favorites.
Wait, what are we doing here?
And equip. Yeah, so what I'm thinking here is instead of like, we could start with almost like a little bit of a different grid. Yeah. A little different approach. We could. They could be like, more like vertical.
I see.
And then you could just scroll like, the window.
Oh, perfect, perfect, perfect.
Do you know what?
That's from a game.
Yeah. So then, like, in these. Almost like, if you've seen. What's that, buddy? Here, let me. Let me. I need a browser open. Sorry. There we go. We're back. So let's just say that I'm just gonna search on roller. And I started actually creating a Pinterest board of rollerblades. Let me bring that open right now. I want to show. No, Pinterest is a great way to generate a bunch of ideas and really cool directions. So here, I'm going to bring it over. And I said searched for. Let's go. Let me go back to my. Here, let me pull this off here. Now I had. I want to open up one of my boards. And I don't. I don't use Pinterest, like, all that much, but I'm starting to use it more and more, and it's been really quite helpful.
That's pretty neat, bro.
Yeah, Jude. It's pretty cool. There we go. Roller world. So what I started doing was I started pulling in. As our next step of research, I wanted to pull in roller skating photos and things of different designs and moves. Right, Exactly. But imagine the rollerblades having a fun little design like that that we can create, customize, and trade. And then I also started thinking about what are different types of skates that could be inside the game and then what are different types of, like, moves and stuff? Like, for example, this girl over here, Michelle. She's a professional derby skater. Sweet. And I thought it was really cool, like, her style and, like, you know, how much she loves skating. And I was, like, thinking about, like, how. How we might be able to bring those movements inside. Inside this. You know, we're literally, like, lacing up and. And going and skating and doing these tricks and stuff, and we can bring some of that energy into the game.
Yeah, like, you could be like double, triple, quadruple, flip, like that.
Right. And then even, like, even, like this one, like, this guy's really cool, futuristic wheel skates. Like, we could redesign a version of that, and that could be one of them. So this could be like a. What we would name this like Big Wheels.
Big Wheels.
Big Big Wheels. It's gonna be fun like doing naming for all these g. We're gonna have a ton of fun naming things.
The speed on Big Wheels.
And we'll. We need to do the same sort of thing. Like endurance I think might be. There's a speed and then there's endurance. Yeah. Like how long you can skate for before you get tired. No. Okay, then what does it need? Speed skate and level.
Yeah, level. I mean there's not strength. What would the strength.
Maybe after a certain. Well, that's interesting. So maybe it's in. It's less about this. There's maybe there's no stats. It's all about styling it.
No, maybe it's just speed and level.
Okay.
I think you just need like speed and level. But.
And we're back. What level do you need to get these super skates?
The big one is probably like they're gonna be like a beginners. So we could. This could be like level 10.
Okay. It's gonna be fun doing that too. I don't know why all the decks went sideways.
One having a game.
And these don't need Hot bar.
Yeah, they don't. Because they're gonna be on you for the entire game.
Yeah. And as far as customizing.
Or you can make like a button like press like E to take off Rollerblades or just keybind.
Oh, toggle your skates.
Yeah. I think we should be able. They should be able to take off skates. I think that would just make it more cool.
That is cool. If you like to take off your skates.
Go to the keybind tab. Go to the keybind tab.
To. To configure. We can potentially also like just update that later down the road. Totally fine. And then also this will give us some scalability so in case we add other features down the road for skates. Like we'll be able to do that. Let me just give him a border of that same. I'm gonna put them up. I'll put them on it.
Click on it.
Sorry. I felt like I was gonna sneeze for a second. That looks kind of gross.
Yeah.
Bless me from that sneeze. Alright, cool. So this is Big Wheels. And you know what? I think Big Wheels. I'm just gonna explore this for a second. Jude.
Big Wheels is going to happen.
I'm gonna see if like.
What kind of cool. Oh, where did Big Wheels go?
I'm gonna make him a little low.
Yeah. We should bleep out his face.
We'll have to design like some cool cards for these. But I'm imagining like cares about.
Level.
10 because I'm wondering, Jude, if, if we design this in a way where you don't even need the sidebar.
No, I think there should be a sidebar.
Okay. For just notes and details and stuff. And then I think if like you already in your backpack.
You already in your backpack.
Because if they've.
What do you mean you already in your back. Oh yeah.
Do you know what I mean?
Yeah.
It's like they, they don't need to buy it.
People are gonna say like, how can all this fit in my backpack? We can make it like Mary Poppins back. Oh wait, I have an idea. Act like the shops, we can make it where it's like, like only this bag can carry this amount of power ups and this amount of wheels.
That sounds cool. I'm into that. You like that?
But we'll make it like cuz like there's this and we'll have an illustration. There's this app, it's called like Blender and it's like we're probably gonna like just make the wheel like the roller blades on Blender because Blender is like really good for doing that type stuff. So we'll just do it on Blender probably.
Yeah, let's do it. I think these are just skills that we haven't learned yet. But it doesn't mean we're totally gonna pick them up. Alright, so cool. And what I've noticed is that this. And so this is like I guess version one, right? Or not even. Like it's like beta. But like what I want to do, Jude, it's coming back in here is I want to look at like the grid and see if it, if it feels good. I want to like see the distance between like here and here. Is it equal on, on both? 64 pixels. Is it going to be equal here? 48 pixels. Right. So we want to like kind of make things uniform. So when you're clicking through each state, it feels like the page isn't jumping around like crazy. Right? Does that make sense? So like this distance and that's just like, you know, spacing and using grids and stuff. We'll get to that point. But just to get this moving along, we're just kind of like getting our brainstorming. All right, so cool. We got power ups, we got rollerblades.
Now I think we gotta work with the keybinds.
So do you imagine like. Oh, okay, you're right, you're right.
Because if we don't make. Yeah, we definitely need to get keybinds up because keybinds is one of the most, probably the most important one other than blades and power ups. Because without keybinds, you're not going to be able to use yourself and not customize it. And you're gonna get mad. Like, why does it have to be Q to punch?
So I wonder, Jude, if there's like a. You know how it was at the very bottom of the thing. What if we had like its own. So in here it's. We allow them customize which we allow them to do it in this dialog to make it easy and manageable. Customize your keyboard, your actions. And so what? So you use all like 1 through 9 on your keyboard and you can basically use any key.
Any key. It could be shift seven, it could be any key. Wait, we could just say like, we could make like a function where it's like click any key on your keyboard and it'll be those in the.
So add keybind. Basically.
This is gonna be a little tricky.
Why?
I don't know. This is just.
I'll show you. So basically, like if you had a plus here, let's get a plus. Because what we would want for people is to be able to add these, right?
Plus. Oh my lordy, that's a big plus. Countdown plus.
All right, here we go.
It's so big.
So if I add keybind, right, I'm.
Gonna get rid of this add key.
And this is. Say like this is Big Wheels is a B.
Or no, I don't think it should be that. I think like to take.
You could just change it to anything. Is there like cuz you know, like you can. And then there would need to be a way to like click to edit maybe. So something like you click into it and then this becomes like a edit box. And then you just hit the any.
Click it and then it goes out of that and then bam. Then click it again. It can change it to something else. Let's go. Big brains. Like big brains.
When you say big brains, what do you. What do you. What does that mean?
Like our head is like humongous. Like big brain cells. Like our head is so big that we have so many brain cells in that big head of ours. Big brain. The bigger the brain.
I don't think you need to know what level it is in this. Right?
Yeah, you don't need level.
And so basically that's like a little like text field and you just click into it. Is that is that white kind of hard to see, buddy. Maybe bees.
I think the black be kind of looks a little weird.
So basically when you, when you hit create, it creates like another. Like basically you get to choose your, your, your thing, your. If it's wheels, skates, whatever. Or is it typically. Do you choose what you want to add as a keyboard shortcut or how does it know what you want to pick? Is that. Is it only for power ups in some games or is it for everything?
Probably anything. Because that would just make it easier for people and make them like the game up.
Yeah, because basically why I'm saying that is I know that we're just about time. So we can wrap up here. But like the keybind, if, if I selected that I would have to. First I need to choose one of these things, right? I need to choose from pets, outfit, power Ups, blades, accessories. So I have five things I need to pick from. So that would be like a select menu which is kind of like a drop down. Jude. So like have you ever seen like, like where you have a little menu and then you click here? I'll just draw this real quick. We're gonna go over a couple minutes. Is that okay? Okay. Okay. So like, let's just say one that.
Looks a little weird. I'll center it. That's an odd shape.
It needs to be a little bigger.
Okay, big. Is that like a diamond or something?
It's kind of like a. I mean it's not. It's a chevron. Here, let me just get a chevron. I was trying to draw it, but I'll just grab one.
It's a chevron. Like a sheep. Is that like a type of sheep?
It's like something you use to open a menu.
That's a carrot.
Well here. That's a carrot. There we go.
Like someone's just searching for carrot and they see this. I know they're like. I didn't say diamond. So carrot.
Cool. Alright, so Jude, a select menu is something where you basically have a menu and then you would have pets.
No, I think your pets will just be open like all the time. You don't just take them.
Yeah, but what if you want a keyboard shortcut to change it? You could change your pets. Oh, that doesn't. That's how they work. Okay, Outfits.
No outfits. Because the outfits you just click on.
Okay. Power ups.
Yeah, Power ups. Definitely blades. Yes. If you want to take it off. Accessories. Wait, what is accessories? Is that like your blades?
So before there were like other objects, like if you wanted a sword if you wanted like other types of materials, like maybe a zip line or like.
Swords, we'll just. Swords.
Swords for now. Okay.
Swords. Yes.
That.
Is that definitely going to be a thing.
So the, the idea in this thing is like. So you. This is like a drop down.
We should make the select menu a little bigger. It's a little small.
It needs to be bigger.
Yeah, it's just a little small in my opinion.
Really?
Yeah, small, big.
So basically like when you, when you click it.
But also it would be.
What are you thinking? So basically like you know, you, you click this, this, this would, this would come out. You see this and then you, and you see you select power ups and then you get to see all your power ups and then you click it and then it's added big wheels. Right? So this would be like, you know, there might be like a secondary menu and this is one way to do it. We could pick. Find other ways. And then you have them list out like A, B, C, D. These are all the examples. Like these would not be letters. They would be the actual names of your things that are in your inventory. And there's something sitting right there. Does that make sense?
Yeah.
So you're basically sold. Why is it not lining?
Non. It's like all over.
It was not. You're. You're. All right, cool. So then, so then we have this, right? We have these. You would select that and then the final state of this would be you have your. It would be like this and it would say like a. Whatever that name is.
A.
And then you would be like, I want it to be zero on my keyboard. So that's one way to do it. So you could, and this is more like a settings. And then you could also maybe we allow people to change it on the, on the screen like when they're over here and there's like maybe a keyboard shortcut to open it up and then this thing opens up and then you have like a little way to change it down there. That makes sense. Okay, so that's just another example. Alright, so what we did today is we looked at, we started our power up screens. We got a little bit more fidelity as far as how we want to manage these things on and off. We looked at how we might show up rollerblades in different areas. We decided that accessories is gonna be probably swords to start off. Like really cool swords. And then we also looked at the keybind screen which is, you know, a little interaction as far as how this could work. And. Pretty clean. Pretty clean. We, you Know, we made some progress, and we also. I was playing with this, the door opening, and then what I can do is show you how this can open and close. Like, we could do that as a inside of, like, a video program or keynote or something. But basically what I was thinking was how it would open and close, and then this thing would be the wheel, and it would be spinning all kinds of fun stuff. All right, cool. So we have that. We did that.
This is a lot. We did a lot in just an hour.
We did.
I'll take that. We win at, like.
We win. All right, cool. So, yeah, so this is good progress, Jude. I think. I think this is really great. Let me just go ahead and let's do a quick roundup of reflection time.
Yeah.
So let's just switch back to our camera mode. And what's something that you think went well this. This episode? Something that you think you could have done better?
Insanely happy that we got to work on the power ups. Like, just like that. The backpack section. I am happy. I've been wanting to do that for a long time.
Or can I see how it was gonna work?
Yeah.
Awesome.
Okay. Well, I could have done better. I don't know. I think, you know, a. Okay, day.
What's something you are gonna do? That homework and fill in these. These ideas, these blanks.
Oh, I am, like, I'm excited to put more power ups.
Right, Jude? So you're gonna come in here and add power ups for next week and power ups, and then we can start naming our rollerblades and bringing in some of the other screenshots from there. And. And then once we do this, we could get some feedback from all your friends and see what they think and see how we can make this. They're gonna be our beta testers. Bigger, better testers, and then we'll continue on thinking about the world here as far as when you're in roller world and you're skating through and all the fun things that you're getting going, but we're making great progress. I'm super pumped about it. Something that I think went well is we had another great session of design June, and I think it was a lot of fun collaborating with you. And I couldn't. Like, I'm just. I'm really excited. I think next week we could work maybe on the map. That would be fun. Yeah, the map is right here inside the experience.
Hit the like button. Hit the sub button.
Yeah, Hit. Definitely do that. Hit the bell. You know, keep. Just. Thanks so much for joining us today. Hope you have an amazing rest of your weekend and we'll see you next week for the final episode of the season one of Design with us. And it's been so much fun and yeah, we're just gonna probably keep grinding and we'll see you then. So feel free to comment, ask questions. Even if it's not about Roller World, feel free to ask questions about product design, about creation, about any of this stuff and we'd be happy to respond to you. And then one more thing I wanted to share is I'm so close to releasing my next level UX coaching program. So this is a 12 week coaching program where you get to work specifically with for 12 weeks with a very structured and rigorous 12 week acceleration in design and beyond. So 12 weeks, I think I'm gonna put you through it with me. It's so much fun. And you know what, why don't I give you a quick little sneak peek since you're here.
Don't do it.
Should I give him a little sneak peek? Yeah, let me give him a sneak peek. I'm gonna do it. One second. Here it comes, Here it comes.
Wait, is it like aired? Can people actually see?
Yeah, people will be able to see it. All right, and here, let me go to screen cap. All right.
This looks sick.
So this is, I'm actually still like finishing and building some things, but so our next level coaching, we have our 12 weeks and what's included in there and make this full screen and then you get to see like what's all included in the 12 weeks, what happens from each week and what we do, you get to see a little bit of the framework of how, as far as how it rolls down. Talking about accelerating your, your ux, your career. In UX we have talking about commitment, career maps and just so much more and some testimonials, FAQs and yeah, I'm super pumped to be able to bring this to you. And yeah, it's coming, it's coming really soon. So.
Crazy cool, bro.
What do you think of the new. I've been trying out the new purple.
That's so cool. It actually looks like kicker your little.
Mountains, little next level action. So anyway, hope you enjoyed this. We'll see you next week. Bye.
