My work
Contact
About me
My work
Contact
About me

Waves XR: interactive surf tracking

An interactive surf monitoring system, allowing surfers to make informed decisions about their sessions, and maximise their time in the water.

XR/VR/AR
E2E process
Ideation

Project context

In 2023, I enrolled in an Interaction Design and Prototyping for XR course, curated by Circuit Stream. This was a 10 week intensive course, from which I obtained a comprehensive understanding of XR design and development technologies. I learned the basics of interaction design principles, real-time prototyping tools, Spacial design practises and performance optimisation.

The course emphasised hands-on project work, collaboration and design development. This has now equipped me to create engaging and immersive XR experiences from an end-to-end perspective for mixed reality products.
Client
Personal project showcasing XR-interaction skills, curated by Circuit Stream
My Role
Interaction design/development, Spacial design, Industrial design and animation, Design system development.
Methods
Research, brainstorming and ideation; Shapes XR, Interaction development tools; Unity, and design tools; Figma, Blender and After Effects.
Timeframe
March - September 2023

My concept: Waves XR

My original concept was to design and build an interactive product, based around forecasting surf conditions, to empower surfers with data-driven decisions and help maximise their time in the water.

My aim was to provide real-time data on essential surf conditions, including wave quality, tides, wind speeds and swell direction. The following case study, showcases my entire process from research and design conception, to real interaction development and spacial design.

By the end of the project, my goal was to have a working prototype, built using industry-standard softwares, showcasing as many authentic features built in as possible.

Research and ideation

The initial competitive research lead me to Surfline.com, a leading company in surf conditions and forecasting worldwide. Leveraging their interface as a template, I conducted research through heat maps and card sorting methods, which allowed me to identify the most useful elements for my end user. Through this process, Surf quality, Wind direction and strength, Swell direction, and Live webcams emerged as the elements of highest importance to users.

Research and ideation

From here, I was able to make sense of the data and start to build out a hierarchy for my initial designs. The use of these research techniques, based on an established and trusted source, would be my best bet for catering to surfers' needs effectively in delivering a seamless and user-friendly experience.

Re-imagining the UI

Throughout the design and development of the product, the main challenge was to find a way of transforming 2D designs into a fully immersive 3D space. For this, I had to introduce a new way of thinking and begin to bring spacial design practises into the project.

This new design approach would ultimately the gap between traditional 2D interfaces and an interactive 3D experience, coupled with machine learning, to elevate the products immersive potential.

Smart notifications using AI

By incorporating AI algorithms into the forecasting features, the goal was to create an innovative feature that elevates the product’s capabilities to enhance user engagement.

Waves XR can analyse real-time surf condition data and location preferences to intelligently suggest the optimal times and locations for the best surfing conditions. These AI-powered recommendations are integrated into the user interface through notifications and banners, providing surfers with personalised guidance. This proactive approach allows users to make informed decisions, about where, when and for how long they should surf.

Smart notifications using AI

By incorporating AI algorithms into the forecasting features, the goal was to create an innovative feature that elevates the product’s capabilities to enhance user engagement.

Waves XR can analyse real-time surf condition data and location preferences to intelligently suggest the optimal times and locations for the best surfing conditions. These AI-powered recommendations are integrated into the user interface through notifications and banners, providing surfers with personalised guidance. This proactive approach allows users to make informed decisions, about where, when and for how long they should surf.

Live wave simulation

Typically, users check their local surf conditions using 2D designs (screens). To enhance the AR experience and fully immerse my user, I sketched out a concept to introduce a 3D map element into the horizontal section of the UI.
‍
With the integration of a 3D model, the feature aims to replicate the actual surroundings of the selected beach, providing users with a live simulation of current surf conditions. The interactive nature of the 3D map would allow users to seamlessly scroll, zoom, and navigate within the virtual 3D space, offering a more engaging and immersive surfing experience.

By leveraging spatial design and introducing this innovative feature, Waves XR elevates user engagement, enabling surfers to not only access critical data but also visualise surf conditions in a dynamic and realistic manner.

Live wave simulation

Typically, users check their local surf conditions using 2D designs (screens). To enhance the AR experience and fully immerse my user, I sketched out a concept to introduce a 3D map element into the horizontal section of the UI.

Live wave simulation


With the integration of a 3D model, the feature aims to replicate the actual surroundings of the selected beach, providing users with a live simulation of current surf conditions. The interactive nature of the 3D map would allow users to seamlessly scroll, zoom, and navigate within the virtual 3D space, offering a more engaging and immersive surfing experience.

Live wave simulation

By leveraging spatial design and introducing this innovative feature, Waves XR elevates user engagement, enabling surfers to not only access critical data but also visualise surf conditions in a dynamic and realistic manner.

Storyboarding interactions

As part of the Circuit Stream course, we were required to utilise VR storyboarding templates to help visualise the design flows for the product effectively. Using these templates, I sketched out the various interactions from point A to point B, creating a comprehensive narrative of the user experience within the VR environment.

This specific type of storyboarding allowed me to map out the design in a 3D environment and showcased snapshots of the interactions that users would encounter as they navigated through the app's features.

Project context

By visually presenting the design flows as quick sketches, I was able to gain a clearer understanding of the product’s structure, user interactions, and how different elements would connect and function together in the immersive 3D space.

This process ensured that the user experience was well-planned, seamless, and aligned with the overall vision for Waves XR, which would contribute to the app's overall success and user satisfaction.

Rapid prototyping with Shapes XR

In order to transform my storyboard designs into tangible prototypes, I started to build out my designs using Shapes XR; a powerful tool for building rapid prototypes in an immersive space. By utilising Shapes XR, I was able to create interactive 3D prototypes, which allowed me to experience my designs firsthand within a virtual environment.

Using a combination of Blender for modelling, and Shapes XR for storyboarding, it was possible to simulate user interactions, and test the product’s flow through the various use-cases. Through this immersive prototyping process, I gained valuable insights into the user experience, identifying strengths, weaknesses, and areas for improvement.

Adopting agile workflow

After finalising my designs in Shapes XR, the immersive nature of the tool revealed the need to simplify UI designs due to excessive cognitive load. Playing the storyboard in this way provided valuable insights, showcasing that certain elements were overwhelming for users to process effectively.

This agile design process allows for refinements, UI tweaks and helps to ensure an intuitive and user-friendly product, while adapting to Apple's VisionOS design systems and interactions.

Adopting agile workflow

After finalising my designs in Shapes XR, the immersive nature of the tool revealed the need to simplify UI designs due to excessive cognitive load. Playing the storyboard in this way provided valuable insights, showcasing that certain elements were overwhelming for users to process effectively.

This agile design process allows for refinements, UI tweaks and helps to ensure an intuitive and user-friendly product, while adapting to Apple's VisionOS design systems and interactions.

Rapid prototyping with Shapes XR

My next step after this conclusion was to re-visit the UI layout, taking more influence from apple’s VisionOS design system.

After doing so, I had managed to simplify the overall design to create a cohesive user experience, consistent with their ecosystem. This quick redesign aims to leverage the full potential of Vision Pro's capabilities, offering surfers an app that integrates flawlessly with their Apple devices.

Storyboarding interactions

My next step after this conclusion was to re-visit the UI layout, taking more influence from apple’s VisionOS design system.

After doing so, I had managed to simplify the overall design to create a cohesive user experience, consistent with their ecosystem. This quick redesign aims to leverage the full potential of Vision Pro's capabilities, offering surfers an app that integrates flawlessly with their Apple devices.

Developing a design system

To fully create my interactions within the product, I needed to start to build out the branding and subsequent design systems for Waves XR. By combining apple’s VisionOS principles with Waves XR's branding elements, I was able to devise a wholistic experience throughout the product. This design system needed to encompass a set of design elements, guidelines, prototypes, and components.

The integration of VisionOS principles ensured consistency and familiarity for users within the Apple ecosystem. At the same time, the infusion of Waves XR's unique branding elements reinforced the app's distinct personality and aesthetics.
VisionPro - Spacial UI Kit

Developing a design system

This meticulous approach facilitated efficient design iterations and ensured a harmonious flow of interactions. By adhering to the design system, you created a visually compelling and user-centric app that resonated with surfers while adhering to the familiar design language of VisionOS. The result was an engaging and intuitive user experience, elevating Waves XR as an indispensable companion for surf enthusiasts.
WavesXR - UI Toolkit

2D -> 3D design

Transitioning from 2D to 3D designs while leveraging my design system was a pivotal step in bringing the product into the extended reality ecosystem. My design system; created in Figma and inspired by VisionOS, provided the foundational visual guidelines, ensuring consistency in branding and user interface elements. This then served as a reference for the 3D design process, maintaining the app's unique identity.

To convert these designs into immersive 3D environments, I used a combination of Blender and Unity. Blender was instrumental in sculpting the intricate 3D map system, and all attributing materials. Unity, on the other hand, became the platform to implement interactive elements and create the immersive user experience.

Building interactions in Unity

Once UI designs, 3D designs and desired interactions had been planned, the next step involved bringing them to life using Unity. Throughout my course with Circuit Stream, we had regular seminars and classes to teach us how to create a variety of interactions to use in our projects. Through the classes, I was able to add functionality, interactivity, and animations to each element of the product, allowing me to create the desired user experience.

Building interactions in Unity

Unity's scripting capabilities enabled me to program in VisionOS interactions, such as eye tracking, hover effects, scrolling through the 3D maps, and exploring real-time surf condition data.

This stage of the project allowed me to refine the app's functionality, ensuring that user interactions were intuitive and responsive.

Final output

The design and development journey of Waves XR has been a remarkable and rewarding experience. From the initial concept to the final product, I have learnt so much about data integration, leveraging research, VR storyboarding, and spatial design practices.

Throughout this ambitious project, I have tried to demonstrate best-practise techniques at a professional standard to  to bring Waves XR to life. I have chosen to demo my final designs as a visual representation of how the product could look with the right amount of software development and correct hardware tools (VisionPro). As such, my project output is a mock design, built using a variety of industry-standard tools, and showcasing all of the skills I have learnt throughout this project.

3D map integration

For map accuracy, I obtained data from Google Maps to gather precise contours of the earth's topography. By integrating this data along with surf and tide information from Surfline, I created an accurate and dynamic surf map within Blender. The result was an authentic 3D map that surfers could interact with, via the VisionOS ‘pinch’ action.

The integration of these actions provided a lifelike experience as they explored different surf spots and viewed virtual waves, enhancing the overall enjoyment and experience of the product.

Forecasting timeline

Adding an interactive timeline element allows users to scrub through points in the day providing insights into how wave height, wind speed and swell direction will evolve.

By adding an intuitive feature like this, surfers can make informed decisions on the best times to get into the water. This feature enhances planning, enabling users to maximise their time in the water by selecting optimal conditions, ultimately elevating the overall surfing experience.

Forecasting timeline

Adding an interactive timeline element allows users to scrub through points in the day providing insights into how wave height, wind speed and swell direction will evolve.

By adding an intuitive feature like this, surfers can make informed decisions on the best times to get into the water. This feature enhances planning, enabling users to maximise their time in the water by selecting optimal conditions, ultimately elevating the overall surfing experience.

AI generated notifications

Waves XR's AI-generated notifications are a proactive and user-centric feature. By leveraging AI algorithms, the app analyses real-time surf and weather data, offering personalised suggestions on the best times and locations for optimal surf conditions.

These notifications provide surfers with valuable insights, empowering them to plan their sessions with precision. This thoughtful integration of AI technology enhances the app's functionality, ensuring users catch the best waves while making the most of their time in the water.

Live camera feature

The Surf Cam feature adds an interactive and dynamic dimension to the overall product, offering a virtual window into actual surf spots in real-time.

As Surf Cam's were selected as a high-priority feature they have been allocated their own space within the VisionOS sidebar. This allows users to fully immersive themselves with the locations nearby and check the chart data is correlating with real waves.

Live camera feature

The Surf Cam feature adds an interactive and dynamic dimension to the overall product, offering a virtual window into actual surf spots in real-time.

As Surf Cam's were selected as a high-priority feature they have been allocated their own space within the VisionOS sidebar. This allows users to fully immersive themselves with the locations nearby and check the chart data is correlating with real waves.

Prototype demo

The Waves XR project has been an exciting journey where design, innovation and action sports converge. Starting with research from Surfline.com and Met Office, I created an app for real-time insights. Figma helped to shape my WavesXR design system, and my skills in Blender and my learned knowledge in Unity (via Circuit Stream) have helped to bring it all to life.

The videos below are short prototype demo, and a narrated deep-dive demo of the final output for my project. It showcases spatial design practices, data integration, and innovative technology platforms. These practises have helped to create a product that elevates surfer's experiences, maximises their time in the water, and empowers them to ride the best waves with confidence.
©NickJoDesign2024