We are a design team of over 20 members, including User Research, User Experience, User Interface, 3D designers, and Project Managers, responsible for the UX/UI design of various company products. Our design system and visual style have reached a certain level of maturity and are continuously optimized to enhance design consistency and development efficiency.
As a UI Designer, I am responsible for:
Challenge
In the early stages, the team lacked a project manager to assist with scheduling, resulting in scattered project progress and collaboration information, making it more challenging to switch between projects efficiently.
Action
I proactively built a project database in Notion to consolidate project timelines, key stakeholders, and essential information. This allowed me to quickly grasp the status of different projects and effectively manage my own workload.
Challenge
The design system is extensive, and the product lines are diverse. Additionally, I had to start working on designs within my first week.
Action
I quickly familiarized myself with the design guidelines, focusing on key design principles while verifying details during implementation. At the same time, I assessed the system from a fresh perspective, identifying areas for improvement and proposing optimizations.
Challenge
Designing in a 2D interface does not always reflect the actual experience in a VR environment, requiring testing and adjustments in Unity.
Action
I took the initiative to learn Unity and consulted engineers to understand how UI elements behave in VR. By independently testing and validating designs in Unity, I reduced the need for repeated adjustments with the engineering team, accelerating the development process.
Challenge
Cross-team communication is time-consuming, information synchronization is challenging, and frequent iterations can lead to misunderstandings, affecting development efficiency.
Action
I established a clear record of design changes to maintain transparency throughout the revision process. After each design update, I proactively confirmed details with relevant teams to minimize back-and-forth communication and ensure accurate implementation.
Utilized Unity to validate the design of features in VIVERSE.
Implemented Design Tokens to enhance scalability and consistency in the design system.
Systematically optimized UI components for eye tracking feature.
Designed the transparent UI theme.
* Details cannot be disclosed due to NDA restrictions.
I collaborate with various UX designers to develop and optimize VIVERSE features. In this feature, users can take photos with the camera and upload them to the wall as personalized decorations.
When designing, it is essential to consider Direct Touch and Eye Tracking interaction modes in the VR environment and define appropriate touch areas for each button and interactive element.
As the design system expanded and was applied to an increasing number of products, we decided to implement the Design Tokens to enhance collaboration and improve development efficiency.
01
->
Establish the Design Token framework
02
->
Organize and standardize tokens
03
->
Align naming and implementation with the engineering team
04
Integrate into Figma Variables
We defined the following tokens: Color / Spacing / Radius / Border
To accommodate the eye tracking feature, we needed to optimize the UI component design without affecting the existing controller and gesture operations.
01
->
Consolidated research findings and feedback from the UX team
02
->
Formulated design hypotheses and defined optimization directions
03
->
Conducted iterative testing and validated design parameters
04
Synchronized updates across the design system and Unity components
In total, I optimized 26 UI component sets and worked closely with engineers to align the component styles in Unity with the design system, ensuring visual and implementation consistency across both. Below are the key design adjustments I led:
Button Shape
Rounded rectangular buttons tend to draw the user's gaze toward the corners. To improve visual focus and stability, all buttons were standardized to a capsule shape.
Border Design
Redesigned the borders of components outside the focused state to minimize visual interference during interactions.
Tooltip Behavior
When a component enters the hover state and displays a tooltip, its interactive target area is extended to include the tooltip. This prevents the hover state from being interrupted when the user's gaze shifts to the tooltip. Additionally, the tooltip is now set to appear only after the user's gaze remains on the component for a certain duration, reducing potential workflow disruptions.
Interactive Target Area
The minimum interactive target area for all components was redefined as 56×56 px, with at least 8 px spacing between elements. This ensures accurate targeting and better gaze focus during interactions.
Overlay Effect
In the original design, some components displayed a semi-transparent overlay on hover, which obscured their content. This was problematic for eye tracking users who hadn’t yet read the content. We revised the hover effects to ensure that information remains clear and legible during interaction.
This was my first time joining a team of multiple designers working within a well-established design system. In the past, whether it was a short-term or long-term project, I was used to building design processes from scratch. As a result, my top priority was to quickly adapt to the team’s design principles and workflows.
Through this exploration, I learned that instead of memorizing documentation and component specs, it’s more effective to understand the rationale and logic behind design decisions. This not only helped me ramp up faster but also allowed me to apply the system more flexibly in actual projects.
While working on VR interface design, I also developed an iterative process of hypothesis–testing–validation. Since 2D mockups often fall short of conveying the real experience in a VR environment, I adopted the habit of proactively testing in Unity and collaborating closely with engineers. This approach ensured a better user experience and helped me build a solid foundation of transferable knowledge for future projects.
Additionally, the team was composed of designers with diverse professional backgrounds. Their unique perspectives and constructive feedback constantly inspired me to break through my own design thinking, explore new possibilities, and grow through collaboration.
