A Cross-Platform Design System for Web and VR
Naer, a Norwegian XR startup, needed a robust design system for its web app and VR application to streamline development and improve design consistency. With a small startup team and limited resources, the challenge was to create a flexible, scalable system that could be easily implemented by developers while also being adaptable for future iterations across both 2D and 3D platforms.
As the sole designer on this project, I created the entire design system, including all components, UI assets, and documentation. I integrated Tailwind CSS and ShadCN for efficient developer handoff, organized assets in Figma and adapted the system for VR usage.
Launched the design system, ensuring seamless UI/UX for Naer’s web app and supporting its expansion in VR. The system provides consis-tent UI and improved development speeds across both Web and VR.
UI & UX Designer
9 months
I organized and conducted user testing for both the web and VR platforms, and created a user testing suite in Notion to collect the feedback. Weekly user testing sessions with in-house and remote participants helped identify key issues, which I incorporated into the user flows and design system. The research included understanding user behavior in 2D and 3D environments. By understanding our developers preferred workflows, I could easily tailor the design system to their visual languages/technologies; Tailwind and Unity. In this way our developers were already familiar with the tech and could implement immediately.
I based the design system on atomic design principles, using atoms, molecules, and organisms to ensure the components were modular and adaptable across platforms. The system was built in Figma with semantic naming, variables and animations to streamline wireframe creation and facilitate faster design iterations. It also incorporated cross-platform compatibility, ensuring consistency between web, mobile, and VR experiences. As Figma is based in 2D, the developers brought exports of 2D wireframes into 3D to recreate components in Unity.
Working closely with Naer’s development team, I ensured the design system was developer-friendly by reusing Tailwind CSS base metrics for fast, scalable imple-mentation. The system was continually updated as both design and development progressed, ensuring it remained the source of truth for all assets used across Naer’s platforms.
Each component was neatly documented to inform developers about the intended use-case. This included accessibility concerns, naming cenvention, empty-states, error, success and loading where it was relevant.
At the end of the project, the entire webapp had been rebuildt using the new Design System. The 2D aesthetics had also been applied and transformed to work with the 2D surfaces within the 3D app (whiteboards, menus and onboarding). The user experience therefore became more coherent as the users transitioned between our 2D and 3D environments.
The design system built in Figma is now used by the Naer team across its web app and XR app. It incorporates responsive, reusable components that can be adapted to different platforms, from 2D UI on the web to 3D interactions in VR through Unity. This design system has improved collaboration between designers and developers, reduced production time and increased overall design consistency across Naer’s platforms. This is a live demonstration of the webapp on mobile today.
With a reliable design system across platforms, Naer has been rewarded the best educational VR experience in the nordics and holds the position as the number 1 productivity app in the Meta app store. The app has also been featured in The New York Times, Wired and Bloomberg as a refreshing and exciting way of brainstorming.