Intersensa 👾

Spatial Haptic Design Tool for Game Designers: UX Design, Web App Design

Role

UX/UI Designer

Team

2 Designers + 2 Researchers

Duration

4 months

Why?

Unlike traditional haptic devices that are limited to one-dimensional feedback, Razer’s Project Esther has the technology that can adapt to the content displayed and generate tactile sensations that vary in intensity, speed, and duration.

Multidirectional haptics are here! But what about how to design them for various gaming scenarios?

Problem

One of the primary challenges facing game designers regarding multi-directional haptics is the significant time and effort required for coding complex haptic interactions, as well as achieving consistency in haptic experiences across a diverse range of devices.

Solution

Intersensa, a plugin built for designing multidirectional haptics in the Interhaptics ecosystem. Here designers can start making multidirectional haptic patterns, all without days of coding, but rather with the ease of similar systems such as audio softwares, offering the capability to design for any device.

The prototype starts from Interhaptics interface to be opened as a plug-in. After an onboarding for the software you can watch a demonstration of a "sword cut" haptic pattern spatialisation process.

Design Process

Step 01: Desk Research

Through an extensive initial research on the trends and competitors we defined the existing ecosystem in the market as well as pain points regarding systems and softwares for spatial audio and haptic creation. The team also focused on research that can inform the upcoming user experience design process and how to create a seamless experience for the target user.An important remark here is the fact that the novel technology makes this software possible has also been developed by Razer simultaneously which lead us to a Research Through Design (RtD) process for the project where we explored ideas through various iterations.

Step 02: Experience Design

In order to create to most efficient and seamless interaction between the game designer and our software we firstly started off with thinking various gaming scenarios and what kind of features we might need in order to make the haptic patterns multi-directional. Here the motivation was to give users the simplest interface that can achieve the various amounts of gaming scenarios. These scenarios then informed the interface design and what kind of layout we can think of regarding the importance of all these functions.

Sketches

The design process for the UX and System Design than continued with low-fidelity sketches and wireframes to accelerate decision-making through visualization. These sketches were based on the initial use cases, the desk research, and the affordances for such software on the market e.g. 3D audio softwares and Interhaptics. They each pointed to the fact that there should not be too many distractions in the flow. We came back to the sketches throughout the entire design process to make sure that we don’t lose sight of our primary goals and ideas.In between multiple sketches we went along with the ones that requires less learning and has interactions speaks for itself. These sketches helped us move forward to a higher fidelity wireframing phase later on where we explored a combination of functions like keyframing, 3D viewports and settings regarding location and intensity to create the easiest way for creating spatial haptics.

Why?

Multidirectional haptics are here! But what about how to design them for various gaming scenarios?

Problem

Solution

The prototype starts from Interhaptics interface to be opened as a plug-in. After an onboarding for the software you can watch a demonstration of a "sword cut" haptic pattern spatialisation process.

Design Process

Step 01: Desk Research

Step 02: Experience Design

Sketches

Wireframes

Later on using Figma, we translated first sketches into wireframes. Then, we improved them by numerous meetings held with the Razer team. At this stage, since the development was simultaneously held by the Razer team we have been doing our using testings within the team as well. Based on these meetings, I’ve made firstly alterations on the wireframes and moved on to creating high-fidelity prototypes. These wireframes also helped us to have a clear roadmap for our user journey then also helped us creating the prototypes.

Step 03: UI Design

The interface design process was heavily iterative. Through many alternatives we followed Interhaptics' style guideline to keep a consistent design language but gave decisions regarding the final form regarding the functionality of each feature. My goal was always to create a visual identity that is aligned with the Interhaptic's visual style as well as making a seamlessly functional interface that backs up the user journey.A change in location and area impacted through the timeline have become the key adjustments to achieve various multi-directional haptic feedbacks. In this process, the main take-away was to leave ideas that are not clear enough behind and move on with the most viable features to ensure ease to the users. Blending a 3D viewport along with unique setting and a timeline for adding keyframes has been the biggest challenge.

Step 04: Usability Testing

For the usability testing, we held a workshop (N=10) with HCI master students, where we presented our idea through 3 different game scenarios in the form of a product demonstration video then interviewed our participants on their opinions, experiences and wishes about the product. Each participant helped us detecting some elements that are not communicating clearly in the prototype as well as some common problems that pointed out by the majority of participants. Findings were mostly directing to visualisation issues regarding the value changes on the timeline as the impact area and intensity. In our analysis process, we firstly coded each interview and then used a Thematic Analysis approach to pin point our findings.

Outcomes

The final design of the screens has been created regarding the iterations from our user testing findings and supervisor feedbacks. Overall, we wanted to achieve an easy and straight-forward design language that values the creation of multi-directional haptics and communicates each functionality clearly without distractions.

Interhaptics team is planning to produce Intersensa in 2025-2026.