When brainstorming an idea for a game, you may freeze up at the thought of making it look and feel nice. Designing an experience that’s easy to navigate and enjoyable for players is no easy task, so today we’re hearing from @unroot, a seasoned Roblox UI/UX designer 
.
In this spotlight, unroot shares how he went from working at a call center to designing full-time at Studio Koi Koi, while also making games with Moonbeam and creating his own projects. He also provides us a deep-dive into his design process from start to finish. Check out our conversation with unroot below! 
How did you discover Roblox and what made you want to start developing?
I remember discovering Roblox in first grade in the school bathroom while washing my hands when a kid asked me if I was familiar — I was hooked from then on. My mom was a web developer, which fueled my interest in computers generally, and the game Strobe by @Rudimentality made me want to develop games. At this time, I made friends with other aspiring Roblox developers, and we formed Moonbeam. I started scripting and making UI in 2014 and continued on the side throughout high school. I wanted to attend college as a computer science major, but that didn’t work out so I ended up dropping out and working at a call center while refining my Roblox development skills.
I was never really good at math, and my scripting skills were pretty basic, so I tried my hand at UI. At first, UI seemed “easier” to pick up than scripting, but I found it was still challenging and stimulating while also being creative. I came to love it. I find the design process really enjoyable, and each design project feels like its own unique challenge.
Walk us through your professional journey on Roblox. How did you get to where you are now?
After building up my portfolio, I got commissioned to design the UI for a game called Skate Park by @StarMarine614. I made the shop UI where you can customize your skateboard (board, wheels, griptape, trucks).
That game took off, and I made enough from it to quit the call center and pursue game UI full time. For a while, my work on Marble Mania also sustained me. Then, some developers I met through working on Skate Park encouraged me to apply to a role at Sawhorse Productions. I was a little hesitant at first applying for a studio, but I ended up working there for almost two years. I had the privilege of collaborating with a ton of interesting brands that I never would have dreamed of working with, including Netflix’s Stranger Things Immersive Watch Party, FASHION KLOSSETTE, Fenty Beauty Experience, and more.
Then, this past February, I started full time at Studio Koi Koi. I had met that team earlier, as friends, when I was working at the call center, so it’s been cool to work and grow with them now. So far, I’ve mainly worked on Ragdoll Simulator, and have helped out on Boxing Beta and Would You Quiz.
I’ve also been commissioned for a lot of games outside of Studio Koi Koi and Moonbeam, including Project Smash (I was already a huge fan when they asked me), Da Hood, Mermaid Life, and All Star Tower Defense.
Today, I juggle working at Studio Koi Koi, working with Moonbeam, maintaining my own game Crash, and developing my own plugin, Draw Visualizer. It’s a lot, so I have to prioritize my time based on what’s expected of me. During the week, I push content updates for Studio Koi Koi, and on the weekend and sometimes weeknights, I’ll switch gears to work on my independent projects. I’ve been developing on Roblox for so long and am so passionate about it, that it often doesn’t even feel like work.
What is your approach to designing UI from start to finish?
-
Scope: I start by identifying what is being asked. For example, someone will come to me and say, “I need a shop UI”, and leave it at that, so it’s up to you to uncover the full context. What type of things are being sold in the shop (virtual items that their avatar interacts with, abstract boosts/upgrades, etc)? How will players buy things (in-game currency, Robux, etc.)? What information or items are more or less important for players to complete their goal? The more context you have upfront of the overall experience, the more informed and higher quality your UI decisions will be.
-
Find the vibe: When designing UI, I try to pinpoint the experience’s personality and “vibe.” Is the game supposed to be fun? Fast-paced? Chaotic? Memey? Serious? Scary? Are these vibes intentional from the developer, or do they come up as a byproduct of the gameplay and game design? If you can figure out what they are, it will help a lot when deciding specific visual aspects of your design like corner radius, color palette, font choice, and animation, but also when making less obvious design decisions like shape and scaling, how your layout flows, or your tolerance for information density. Emotions and psychology are incredibly relevant to UI design.
-
Visualize the layout: With some UI requests, I have a pretty strong vision for the exact layout to make. “Vision” is a really important concept — it’s not a literal hallucination that you can see, but rather an exceptionally useful term (even outside of UI) to describe the concept that someone has in their head. With a vision, I can reduce the elements of the layout to basic squares and circles, which makes it much easier to start wireframing.
-
Wireframe: I’ll start sketching a low-fidelity wireframe which forces me to work through the layout in a less abstract way and quickly highlights possible issues in the layout (e.g. too much space dedicated for something not important, awkward whitespace in some areas, flow of information is incoherent). If it’s a bigger project with multiple screens or for an entire experience, then I’ll use Figma to lay it out. For smaller projects, I’ll either whiteboard or sketch out low-fi prototypes in a notebook.
- Apply visual styling: Once I’ve created the basic design, then comes the fun part — adding the visual style to the assortment of blank squares and circles.
- Get feedback: There are usually multiple rounds of back and forth on granular details when I work with a brand or on a studio project. For those projects, and when I’m commissioned for a one-time project, I’ll share hi-fidelity UI work for feedback so I can be 100% certain they’re satisfied with my work. But if I’m working on my own project, then I’ll share the low-fidelity UI with other Roblox developers for their thoughts. A heuristic I try to follow is, if my UI is good and I hand it to a 9-year-old, they should pretty quickly understand what to do.
- Before feedback:
I sent this to the Project Smash team, and they recommended moving some of the elements around.
- After feedback:
- Final with animations:
- Build in Studio: When I’ve finalized my idea, I bring it to life in Studio using the UI Editor and then code my UI in Blend. This plugin lets you convert UI instances into Blend code which saves a lot of time.
What are some best practices when designing UI?
- Think mobile-first. The majority of Roblox users are on mobile. You should be thinking about how your layout will scale at its largest and smallest. It’s much easier to take a layout that works on a small screen and scale it up to a large screen; the opposite is much harder.
-
Consistency is key. If you’re trying to make UI that looks good, pay attention to details both individually and collectively. Some questions I ask myself:
- Does this specific color or UI element in this specific place look good?
- Does this look good next to the surrounding UI elements?
- Does this fit in this UI’s color palette?
- Be flexible. Try to be as flexible as possible with the design throughout the entire design process as you can. There have been plenty of times where I changed the design of something after finishing the building phase because I thought it would look or feel better. There have also been times where I wasn’t able to do that because of the project’s requirements or timeline. In almost every case where I had enough control over the project to be able to add something unplanned, it was usually worth it.
What design resources do you recommend?
For referencing other games’ UI design, there are two prominent websites I go to for inspiration:
For practical tools, I use:
- Google Icons to save time on making icons from scratch
- Adobe Color and coolors to generate color palettes
- Apple’s Human Interface Guidelines to read up on UI philosophies and best practices
- NN/g for UI/UX research reports
What project are you most proud of?
Stock Crash — it’s my baby. It’s a 17+ game that involves stock trading and investing. First and foremost, I’m so proud of the incredibly talented developers on my team that I get to work with. I’m extremely proud of the visual cohesion we achieved in the experience, combining the map, lighting, UI, sound effects, and more. It would not have been possible without them.
When we added investing to Stock Crash, we focused on figuring out what we wanted the vibe to be that would most complement the gameplay. Our thought process was “investing” → “wealth and luxury,” so the map feels like a high-class establishment, which heavily contrasts with the chaotic gameplay experience (especially with voice chat). This approach helped us achieve visual cohesion, and by combining our unique skill sets, we created a beautiful experience that I truly am proud of.
What other plugins do you use when working in the UI editor?
-
QUIck Actions
- Handful of miscellaneous UI actions bound to a context menu
-
Reclass
- Change the type of an instance (useful for converting stuff like Frames → CanvasGroups or TextLabel → TextButton etc)
You mentioned you’re making your own plugin called Draw Visualizer. What does it do?
One common feature of the UI editor in Roblox is selecting the UI. When publishing games, selecting a piece UI is pretty difficult, as you have to sift through multiple layers of drop downs. I knew the solution was easy so I made my own plugin. With Draw Visualizer, you can select different UI instances. Let’s say you have three different UI instances on top of each other. When you enable the plugin and hover your mouse over, it will highlight every instance under your mouse and let you press “tab” to cycle through up and down the stack. This makes it incredibly easy to debug UI.
There are other features I plan on adding, like fuzzy finding editing properties — a way for you to type and search for a property name, type in a new value, and hit enter. I can’t make any promises for now… but I’m aiming to have it released by winter 2024. There’s still more I want to add to it, so it’s far from being complete. 
You’ve been on this platform for 10 years. What’s been your secret to success on Roblox?
As cliche as it sounds — believing in yourself. If you have a vision for something that you think should exist, and unless there’s something physically stopping you, there are no limits to anything. This mindset has fueled my ambition to create what comes to my imagination.
What are you working on now?
-
Stock Crash updates -
Moonbeam game (hopefully before RDC!) -
Draw Visualizer plugin -
New Studio Koi Koi releases
Thanks so much @unroot for sharing your story with us and the Roblox community! Connect with unroot on Roblox and X to see what he designs next.
