NEON WORLDS
I led the research, design and development of a large-scale virtual immersive social platforms with generated digital avatars.
I led the research, design and development of a large-scale virtual immersive social platforms with generated digital avatars.
Company
@Samsung Research America
@NEON AI
Time
2022.12-2023.5
Intro: Samsung NEON creates Artificial Humans that interact with people in ways indistinguishable from the real world. With this idea, NEON is looking into a future where You are You in the virtual immersive world in the future.
NEON Worlds is a project coming alone from our NEON humans. It is a universe of user-generated communities for people to connect, create and collaborate with others to explore the possibilities of Metaverse using various tools and resources.
Location
Mountain View, CA
NEON was a relatively new team in STAR Labs, and we have the opportunity to take on responsibilities in areas that have not yet been covered by the team. I have served as an interaction designer who also got the chance to take charge of the quarter milestone demo development. I crafted fundamental design documents, collaborated on UX/UI designs with another interaction designer.
Research and analysis serve as the foundation for informed decision-making. We aim to gain a deeper understanding of the product's potential, identify opportunities for differentiation, and pave the way for design principles and guidelines for this product.
- Product Research -
Before conducting deeper research for our product, we initiated a brainstorming session to identify and explore the possible features and functions we want to focus on. We brought a diverse team of individuals with varied backgrounds to ensured a wide range of perspectives, enabling us to explore different angles and possibilities.
- Competitive Analysis -
As we strive to create a unique and compelling virtual world, conducting a competitive analysis is crucial. By studying our competitors, we can gain valuable insights into industry trends, identify gaps in the market, and develop a strategic edge.
- Target Profile -
We conducted user interviews and extensive research with existing products to gain valuable insights into our target audience. These endeavors allowed us to identify our target user profiles:
- Design Concept -
NEON Worlds is a universe of user-generated community for people to connect, create and collaborate. This virtual space allows individuals to collaborate and connect with others to create and explore their own worlds using various tools and resources. The use of life like avatars enhances immersion and personal expression. NEON Worlds aims to shape a new digital reality through a trusted, open network for the next generation.
The milestone phase demo 2.0 was the first real-time play demo showcasing the progress and potential of the project. With a 10-week timeframe to build a playable demo in Unreal Engine 5, we need to develop the mechanics for several scenarios, work on UX/UI design and world design. In addition, documentation was essential for our team, as the project was still in its early stages. I am primarily responsible for all UX/UI designs for all the scenarios. I worked with another UX designer together for building all the designs we need.
- Case breakdown -
HUD System
Considering the length of this case study, I'll delve into a specific scenario to provide a more in-depth understanding of our design process. I choose the first case we worked on: The HUD (Heads-up-Display) design, because it serves as the foundation system for the world.
- Mechanic Design -
To establish the foundation for the world and design the HUD, I focused on designing the core mechanics. I conducted analysis of the current world structure, which consisted of key functions such as the social square, maker space, marketplace, NFT gallery, and community galaxy. I aimed to understand their individual roles and how they interrelated. Additionally, I examined the scavenger hunt world since it is the only prototype being developed with a background and world setup. I consolidated all the gathered information and sought to create mechanics that could be applicable to both worlds.
For instance, I envisioned a function where players could search for objects in a specific manner within the world and then utilize those objects as elements for creation. They could collaborate with individuals from the maker space to work on designs, and the resulting creations could be showcased in the NFT gallery and used for trading. I use this as a core mechanic served as a clear connection that tied all the functions together, fostering a cohesive and immersive experience for the players.
What we need next is a medium to conduct the collect activity. I came up with the idea adopting from 3D scan technology as how we capture data to build avatars to also be used in the world. To enhance the collecting experience further, we introduced additional elements such as finding clues and engaging in puzzle-solving activities. This elevated the gameplay beyond simple pickup and scanning actions, creating a more immersive and challenging experience for the players. To connect all these skills and functionalities, we conceptualized a central item known as the "pendant." This pendant served as a versatile tool with different functions, providing a cohesive and interconnected gameplay experience.
The mechanic provides players with a multi-dimensional and interactive gameplay experience, where they can manipulate the physical and intangible aspects of the world, gather resources, and explore the narrative elements through the tool's unique abilities.
- user Flow -
- Information Architecture -
- UI Research -
Prior to commencing the actual UI design, Leah and I conducted research on various platforms and games, including Roblox, Spatial, Fall Guys, etc. By studying these existing UIs, we aimed to identify effective design patterns, learn from their logical approaches to usability, and leverage this knowledge to inform our own UI design decisions.
- Wireframe -
After conducting thorough research and system building, I proceeded to organize and arrange the various UI elements. I began by sketching wireframe prototypes on paper to establish the overall layout and structure of the user interface.
- UI Design Decision Making -
Building upon our wireframe prototypes, we focused on creating visually appealing and functional interfaces that enhance the overall user experience. To ensure the quality and effectiveness of our UI designs, we actively sought feedback and critique from the design team. We presented our work and facilitated open discussions on various aspects, such as overall UX, color schemes, layout, card usage, icon design, and interactions.
Example 1: Chat Box & Interaction
We conducted several iterations to refine and finalize the design of the chat box interaction, aiming to present visual content in the most effective way. Additionally, we explored multiple versions of UI designs for the layout, ensuring a seamless and intuitive user experience.
Example 2: Sensor/Skill Indicator
We incorporated skill information presentation on the HUD, providing users with visual feedback based on their actions and activities. Instead of using button-like interactions, we implemented non-intrusive visual feedback to enhance the user experience. To achieve the desired effect, we explored various animation designs and gathered feedback from the team.
To enhance the user experience, we strategically placed current indicators near the mini-map. Users can quickly and easily orient themselves within the virtual world, improving their overall navigation efficiency and reducing cognitive load.
Example 3: NEON Assist
We aimed to minimize the number of UI elements on the screen to create a more immersive experience for players while ensuring they have access to important information. We have NEON assist provides tutorial and guidance for players which we would like to keep a record for them to find. To address this, we introduced an interaction that allows players to enter a focus mode, where the assist's presence is enlarged and they can review past information and storylines.
Example 4: Function/Menu
We implemented a "looped menu" approach as we expanded designs for new functions. Each feature is categorized and represented by a clickable element that opens a menu with quick action functions. This design allows for efficient and streamlined access to the various features, enabling players to navigate and interact with the system more effectively.
- ui delivery -
- More Prototype Showcase -
Social Interaction: Picture & Album
Social Interaction is a core system we want to show and expand. The system contains several functions which can be accessed through the "Quick Action" button at bottom left corner of the HUD. Taking selfies/group picture with friends together is one of the main functions. We also developed the album system where players can access their photos with meta data to search specific pictures.
Social Interaction: Friend Management
Friend management system is also indispensable in a social platform. The previous phase has explored the design of friend list with wireframes, so we took on the format of the original design, and built into Hi-Fi UIs combining with our new mechanics.
- Design system -
Since NEON Worlds is still in early stage development, and Demo 2.0 is the first real-time play demo and, building a fundamental design guideline is very important for further development. Leah and I worked together for the overall consistency of the UI aesthetics and build a design system & guideline. Below are some selection pages:
- Play test -
We just conducted several play testings. Our engineer team build our HUB with current implanted function as a program to register the design team in through Epic. We had 10 people participated to test the ability of handling multiplayer too. We record all the bugs encountered for the engineers to do the iteration. Below are some problems we found:
As the only team member with game industry experience, I recommended creating a comprehensive game design spec for NEON Worlds to streamline the design process.
Difficulties & Challenges: I've had experience writing MMORPG spec - progression system from my past experience, but this is also my first time making the fundamental document from scratch by myself. I conducted extensive research and developed the initial version of GDDs for various systems of NEON Worlds.
I am grateful for the opportunity to work at NEON as it has allowed me to gain invaluable insights into the entire design and production process. Moreover, the startup atmosphere also provided me with the opportunity to assume a leading role in the NEON Worlds project. Stepping into this leadership position has empowered me to hone my product management skills and build project fundamentals and mechanics from scratch. I want to share some of my learnings:
Plan wisely, collaborate better
For producing a demo within a tight deadline, always need plans first to work with others. Good plans and consideration can save each others' time and boost the efficiency.
Research Pushes Development
Working in the R&D team has reinforced the importance of research in driving product development. I have come to understand that investing time in researching industry trends, understanding user needs, and analyzing competitors allow for more informed decision-making and ultimately leads to the creation of more innovative and impactful products.
Pay attention to details for better experience
I have learned that focusing on the details is crucial for delivering an exceptional user experience especially for user interface design. I have learned a lot of the perspectives from our design lead, director and other designers on the detailed designs and subtle interactions on UIs.
Good documentation for better future
Working in the R&D team has shown me the importance of maintaining documentation throughout the product development process. Creating clear and concise design guidelines and design documents not only streamlines communication and collaboration within the team but also serves as a valuable resource for future reference.
