top of page
UX/UI Design
See Roblox in a Whole New Light (Or Lack of It)!
01
Project Overview
Tired of Roblox’s bright interface burning your eyes during those late-night gaming sessions? It's time to bring the dark side to life with a sleek new redesign! This project is all about giving Roblox a fresh, sleek twist by bringing dark mode to its main landing page, character customization, and profile pages.
Goals
Reduce eye strain in low-light conditions
Boost Engagement and Accessibility
Figma, Adobe Illustrator
Role
Tools
Duration
Year
UX/UI Designer
8 weeks
2024
02
Problem
The current Roblox landing page, avatar customization, and profile screens can feel overly bright and harsh, especially during nighttime use, leading to potential eye strain for players. Additionally, the lack of a dark mode option limits users' ability to personalize their experience to better suit their environment and comfort.
“Of the 70.2 million daily active users and 300 million monthly active users, a whopping 60 percent are under 16.”
In 2023, the 17-24 group was the fastest growing Roblox demographic with a 35 percent increase year over year.
“...blue-turquoise light can impact sleep/wake cycles, meaning it can be difficult to get sufficient rest if you’re exposed to enough blue-turquoise light close to bedtime.”
“Of the 82.7% of people (201 in total) who actually do use Dark Mode...”
Roblox’s user base is expanding, especially among older players. With screen exposure impacting sleep cycles, Dark Mode offers a comfortable viewing experience that reduces eye strain, especially at night. Defaulting to Dark Mode creates a visually soothing environment, helping users avoid the harshness of Light Mode for healthier, more restful screen use.
03
Key Objective
How can a dark mode redesign for Roblox's main pages improve user comfort and enhance browsing, customization, socializing, and gameplay, while considering the effects of blue-turquoise light on sleep and user alertness?
I’ve thought of a few features that can enhance the overall gameplay experience:
Friends List on Main Page: Like Discord, showing a clear friends list would let users easily see and message friends directly from the main page.
User Statistics: Display game time, plays, and screen time on profiles to boost engagement.
Improved Game Browsing: Add a Netflix-style carousel for trending, popular, and new games to make browsing easier.
Quick Wardrobe Change: A faster way to browse favorite clothing would simplify character outfit changes.
04
Who is the Targeted Audience?
Children to Young Adults (6-22 years old)
Parents playing with their children
Aspiring game developers who design graphics to market on main browsing page
Educators and educational institutions use Roblox as a teaching tool for game design and programming in classrooms.
05
Competitive Analysis
Matrix Map
Comparison of functionality within competitors: In-Game Shop
Fortnite
Clash Royale
Pokémon Go
Roblox
Feature
Market Share
Visual Design
Navigable User Interface
Ease of Use
Engagement / Fun
Marketability
Product Visibility & Quality
Enhancement of Game Experience
Sims 4
Brawl Stars
League of Legends
Valorant
Minecraft
06
Visual Style Guide for Roblox Redesign
First Draft
07
Drafting & Revising My Wireframes
Final Revision
Updates Based on User Feedback:
-
Expanded tabs to improve page scrollability.
-
Added user statistics to track playtime.
-
Included a feature to display badges earned by players during gameplay.
First Draft
Final Revision
Updates Based on User Feedback:
-
Changed background to black for the dark redesign.
-
Added footers for navigation.
-
Added text under "Quick Customization."
Concern:
-
Distinction between "Quick Customization" and "Avatar Inventory."
Final Revision
First Draft
Updates Based on User Feedback:
-
Added ratings, players, and description of games
-
Added messaging friends chat in the right side under friends
08
The Selling Points
Homepage
Focus on Roblox's Most-Visited Pages for the Navbar Header
A carousel of featured, popular, or new games tailored to your play preferences.
Improved categories for browsing more games, making it easier to explore and read about each one.
Condensed sidebar options moved to the footer for a cleaner interface.
A sidebar showing your friends' activity, current games, and messages—all in the same convenient tab.
Profile Page
Display user statistics, including screen time, play records like longest and shortest game sessions, and join date.
Additional visuals of your Roblox character.
Update friend background shapes to a "squircle" design, aligning with the style of other sections for a more cohesive look.
Consolidate all badges into a single category.
Customization Page
"Quick customization" lets players easily switch between favorite items, simplifying the experience.
Organized clothing and accessories for a more relevant and intuitive display.
Include a brief description for each customization feature to explain its purpose.
09
See the Transformation: Before and After
Nav Bar
Homepage
Profile
Avatar Customization
10
Post Design Reflections
My Key Takeaways:
Exploring Roblox as a Design Platform: Roblox is a massive gaming platform that serves not only players but also creators. In the future, I’d like to focus on enhancing the designer's experience, particularly in tools like Roblox Studio, to support creativity and innovation.
Balancing Light and Dark Modes: Dark mode isn't always the best option—excessive darkness can lead to visual fatigue and reduced engagement. To address this, I’d prioritize making light and dark modes customizable, allowing users to toggle based on their preferences for a more comfortable experience.
bottom of page