Rec Room
Maker Pen
Team: Maker Team
Role: UX, UI Designer, User Testing, Strategist, and Visionary.
Tools: XD, Figma, Adobe Suite, Rec Room, Unity, Sigma, Amplitude, and Hex.
Results: We improved discoverability and introduced up to 13 new features without a full menu redesign, including AI tools, Favorites, pullout menus, a debug menu, contextual settings, and expanded circuit options. The new Maker Pen menu is optimized for seamless creation across all platforms, ensuring a consistent user experience and smoother transitions between devices.
Release: 2019 - 2020
The Maker Pen is an in-app creative tool that allows creators to build experiences directly within Rec Room. As a growing company with a creative user base expanding across multiple platforms, Rec Room originally launched as a VR-exclusive platform but has since expanded to many other devices. This shift has introduced unique challenges for our creator tools, which must not only function seamlessly across current and future platforms but also support social creation. Ensuring consistency in interactions, language, and movements across devices is essential as creators collaborate in classes, build rooms, and share experiences. As our platform grows, effectively communicating techniques and tutorials across different devices becomes increasingly important.
Maker Pen Menu
Screen Creation
VR Third Person Creation
Mobile Creation
Design Solution
As new creation tools and features are added and deployed across multiple platforms, we face the challenge of designing a system that scales with company growth, adapts to new features, and works seamlessly across platforms without requiring a complete redesign for each release. The Maker Pen menu is a particularly complex project, requiring transitioning from an old UI interface to a new one while improving the visibility and usability of tools and settings. This ensures it meets the needs of our existing user base and future users across various platforms.
Results: We saw increased discoverability when using tool settings, navigating inventions, and switching colors and materials. Designers and developers were able to introduce up to 13 new features without requiring a full menu redesign. This allowed for the addition of AI tools, Favorites, pullout menus, a debug menu, contextual settings, room hierarchy improvements, expanded circuit settings, custom colors, and a direct path to "This Room" inventions, props, and circuit categories.
The new Maker Pen menu is optimized for seamless creation across all platforms (VR, PlayStation, Xbox, mobile, Nintendo Switch, etc.). Consistent usability across platforms reduces the need for players to learn different menus, making transitions between platforms smoother while they create.
Key Improvements: Tool settings are now surfaced as contextual options on the main page for MVP, allowing creators to quickly access relevant settings without navigating through multiple menus or pull-out menus especially when using screen creation versus VR.
User Feedback: User Feedback: Long-term users appreciated the old UI's bubbly buttons and pagination but found the new menu a bit too large. To address this, we plan to add collapsible sections and tool shortcuts, allowing creators to work in virtual space without needing to open menus. Additionally, we aim to improve the flow for logic creation.
Next Steps: Before implementing collapsible features, we focused on refining the 2D menu and improving left/right-hand interactions, as well as pulling out menus to enhance usability.
Design Process
The legacy Maker Pen menu was in dire need of a redesign, primarily due to its lack of scalability. Internally, we constantly faced the challenge of figuring out where to place new buttons or how to fit additional categories within the existing structure. If the menu couldn’t expand to accommodate new tools and features, how could we possibly meet the evolving needs of our creators? This question drove the redesign process, aiming to create a more flexible, scalable menu that would allow us to deliver the tools and features creators desire, both now and in the future.
The Need For Growth
We retained the familiar layout and systems that users were accustomed to while updating the creation menu to align with the new interactions and layouts implemented across our new app interfaces. This consistency in user patterns ensures a seamless UX across platforms, allowing both long-time and new users to navigate menus effortlessly without needing to adapt to entirely different interaction methods between creation versus other in app menus.
The creation menu successfully launched on multiple platforms, including the Nintendo Switch, without requiring a redesign. This cross-platform consistency allowed users to create, communicate, and collaborate seamlessly, enabling friends and community members to teach, learn, and connect regardless of their platform. This approach has been a significant success. Not only does it function effectively across current and future platforms, but it also empowers our internal team to add and expand features without the need for a complete redesign.
While the system works well across platforms, there are still opportunities for iteration and improvement. Addressing existing issues and refining the creation experience will further improve usability and ensure continued success.
Key Challenges
& Opportunities
Cross-Platform Consistency: Moving pull-out menus across platforms disoriented users, complicating Rec Room’s otherwise seamless, collaborative UX.
Readability: Transparent menus overlapped with content, making them hard to read and limiting new creators to basic tasks.
While the system works well across platforms, there are still opportunities for iteration and improvement. Addressing existing issues and refining the creation experience will further improve usability and ensure continued success.
Discoverability: Nested tools and the lack of contextual settings required frequent menu switching, slowing creators down.
Accessibility: The absence of tooltips and reliance on icons hindered usability for creators with visual impairments.
Old Menu Design
Strengths: Charming, colorful interface with familiar paginated navigation.
Weaknesses: Required extra steps, struggled with scaling for complex tools, and was less intuitive for new users.
Maker Pen Menu Architecture
Prototyping
The new Maker Pen menu was built to support Rec Room’s cross-platform experience and scalability, ensuring long-term growth while preserving the fun, creative branding that is iconic to Rec Room's culture. This deep-rooted creative identity continues to drive the platform's success in fostering creators of all skill levels.
Prototyping Stage 1
First draft of the prototype—looking for opportunities to streamline information while still allowing creators to pin settings with tools, scale tubes across platforms, explore future growth potential, and ensure layout consistency on all platforms.
Prototyping Stage 2
After discussions with stakeholders and engineers, we moved forward with concepts that retained elements of the original UX while prioritizing growth and scalability. We enhanced usability across all platforms while preserving pull-out menus as an option for those who prefer them.
During this phase, we engaged multiple groups of creators to test the menus and provide feedback on various directions.
Prototyping Stage 3
After identifying what worked best for creators, engineers, cross-platform accessibility, and feature growth, we began the development process. We then gathered user feedback and made rapid iterations based on creator input.
Prototyping for a User-Centered Experience
The new Maker Pen menu was built to support Rec Room’s cross-platform experience and scalability, ensuring long-term growth while preserving the fun, creative branding that is iconic to Rec Room's culture. This deep-rooted creative identity continues to drive the platform's success in fostering creators of all skill levels.
Iterative Design Through Prototypes
Partnering with the UI team, we developed multiple prototypes using the new UI system. These prototypes tested consistent interaction patterns, ensuring creators could easily adapt to the updated menu. Interactive prototypes were tested in-app to validate usability, helping identify how creators navigated tools, completed tasks, and rediscovered familiar workflows.
Balancing Workflows
Through testing and close collaboration with creators, we identified various workflows, including, basic creation, creating art, organic designs, circuits, and room testing. Each workflow has unique needs that we are still refining.
Incorporating Familiarity
To support these workflows, we introduced a way to pull out menus, a nod to the old design that some creators enjoyed. This proved especially beneficial for circuit creators, who often switch between configuration and search menus simultaneously while editing and configuring. Since circuit creators typically remain stationary during their work, this flexibility improves their efficiency.
Addressing Testing Needs
Room testers, on the other hand, require mobility and collaboration. They often need both hands free and multiple people in the room. To support this, we ensured testing logs could remain open without closing when the Maker Pen isn’t in use.
Features for Scalability
To accommodate different workflows across platforms, we implemented features like pull-out menus, menu pinning, and scalable menu sizes. These changes not only improve current workflows but also provide a foundation for future features, ensuring the Maker Pen menu evolves with creator's needs.
Key Challenges
& Opportunities
Design & Layout
Updated to align with the app’s overall UI for consistent cross-platform experiences.
Introduced a larger layout to surface contextual tool settings more effectively.
Added support for contextual settings, enabling creators to adjust tool-specific options without switching menus and providing clear visibility into how settings affect each tool.
Navigation
Improved accessibility by surfacing more options directly in the interface, minimizing the need to navigate multiple layers.
Incorporating collapsible sections (in progress) to streamline navigation and reduce visual clutter.
