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 implementation. 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 with intended use-case and other design decisions. This included empty-states, error, success and loading. Upon recreating the old user journeys each flow and interaction was organized for responsive screen sizes and kept tidy by using appropriate spacings and arrows.
Each component was neatly documented with intended use-case and other design decisions. This included empty-states, error, success and loading. Upon recreating the old user journeys each flow and interaction was organized for responsive screen sizes and kept tidy by using appropriate spacings and arrows.
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.