Link to the “Table of Contents” sectionTable of Contents
Link to the “About the Project” sectionAbout the Project
Designing haptic feedback in React Native is slow. Picking the right feedback is hard. Describing it to others is harder. This project speeds that up.
It pairs an open-source npm module with a mobile app. The module adds a practical way to build vibrotactile impact patterns in React Native. Designers compose patterns in the app, export them, and hand them to engineers. Any React Native app that uses the package can play those patterns.
"Haptics" vs "Vibrotactile Feedback"
This project focuses on vibrotactile feedback. The industry often says "haptic feedback" or "haptics" instead. Those terms are broader: haptic feedback covers any touch-based feedback. For clarity and consistency with the rest of the field, I use the industry terms in the prototype and its documentation.
Link to the “Existing Vibration APIs” sectionExisting Vibration APIs
The W3C defines a Vibration API for accessing the device motor. At the time of writing, iOS browsers do not implement it.
expo-haptics and react-native-custom-haptic-feedback.Both wrap only part of the native APIs. In practice they expose a shared subset: impacts that feel comparable on current Android and iOS devices.
Link to the “Design Process” sectionDesign Process
The design process had four phases. Each phase answered one question:
- Who is the user?
- What is possible?
- What should it be?
- Does it work?
Link to the “Who is the user?” sectionWho is the user?
Link to the “Interviews” sectionInterviews
I interviewed four product designers to learn how teams handle vibrotactile feedback. Two had designed haptic interfaces before. The other two brought a fresh perspective.
The designers without haptic experience still noticed apps that used it well. As product designers, they archive interesting interactions and UI elements for inspiration.
The experienced designers shared a common pain: they struggle to describe the vibrotactile pattern they want. Some mimic patterns with sounds. Others fall back on documentation as a last resort.
The table below lists breakdowns, workarounds, and user innovations from the interviews.
Link to the “User Personas and an Extreme Character” sectionUser Personas and an Extreme Character
Two common ways to sketch users are personas and extreme characters. Both get a name, age, job, and traits. Extreme characters exaggerate one angle on purpose, like a caricature. That exaggeration can surface edge cases normal personas miss.
Emilie
, 33
Senior Front End developer
- React Native expert.
- Knows the code base very well, and is familiar with its limitations.
- Has never worked with vibrotactile feedback in a React Native application, but is aware what is possible.
Martin
, 27
Junior Product designer
- Familiar with the design system, but often needs to design components and screens that the design system does not support.
- Works on one product at the time.
- Not familiar with development
- Has never designed for vibrotactile feedback
Nathalie
, 38
Senior Product designer
- Extreme: In charge of many aspects of the design system and the design process. She maintains the design system, tracks how much of it ships in code, and still runs other projects and design meetings.
- The most senior designer in the company.
- Owns the design system: she built it and keeps it current.
- Used to work as a front-end developer, but switched to design 10 years ago.
- Has limited experience working with vibrotactile feedback.
Link to the “Current scenario” sectionCurrent scenario
The current scenario is a short story all three personas share. It shows how they would handle one task with today's tools. Setting, time, and context stay realistic.
It follows the same three people shipping a feature that needs vibrotactile feedback. The story made the friction concrete.
Exaggerated for effect; the real scenario is shorter.
Link to the “User Profile” sectionUser Profile
From the interviews and exercises, I defined a user profile for the system.
Users work on a product that ships features fast (e.g. a startup). They build the UI of a React Native mobile app. The time they get for a feature rarely includes non-visual interfaces. With limited time, they need a way to design vibrotactile feedback without deep research into the technology.
Link to the “What is Possible?” sectionWhat is Possible?
Link to the “Brainstorming” sectionBrainstorming
Link to the “Design Dimensions and Design Space” sectionDesign Dimensions and Design Space
Brainstorming and user research produced ideas with clear attributes or dimensions. For example, increasing font size helps accessibility. A custom palette improves personalization. I arranged those dimensions into a design space.
A design space shows where ideas cluster and where gaps remain. You can also shift ideas along a dimension to see how they change in another context.
I categorized ideas with the design dimensions and design space. The image below shows the result. Shifting ideas along the dimensions produced more ideas.
Link to the “Design Concept” sectionDesign Concept
Those methods led to a design concept for the next two phases.
The system lets designers build vibrotactile impact patterns. A pattern is a series of impacts at different strengths with short pauses between each one. The tool lets you pick impact strength and pause length. You export the pattern and paste it into application code.
Link to the “What Should it Be?” sectionWhat Should it Be?
Link to the “Future Scenario” sectionFuture Scenario
The future scenario uses the same cast and situation as the current one, but adds the new tool. It shows how they would work with the prototype and where the concept still breaks.
I reused the current scenario as the base. The only change was the new tool from the design concept. The future scenario highlighted potential breakdowns.
Link to the “Prototype” sectionPrototype
The tool has two parts: a mobile app to author patterns, and a way to run those patterns inside React Native.
I built two prototypes along the way: first the editor only, then the full loop.
Link to the “Does it Work?” sectionDoes it Work?
Link to the “Improvements” sectionImprovements
After I showed the prototype to the design team, their feedback surfaced clear next steps.
-
I noticed not every pattern was production-ready. Pasting patterns into code works, but it is slow during early design. Next step: let designers save patterns for later.
-
The team could not compare patterns side by side. The tool only edits one pattern at a time. Next step: add side-by-side comparison for saved patterns.
-
Copy and paste through the universal clipboard between iOS and macOS works, but it is clunky. Next step: improve export.
Link to the “Implementation” sectionImplementation
Available React Native packages only support preset vibrotactile impact patterns (success, warning, danger, and so on). They do not let you build custom patterns. The OS decides the timing of impacts and pauses on each device.
react-native-custom-haptics on npm.I also shipped a React Native (TypeScript) app for Android and iOS to sketch and preview patterns. It has the editor and a playground of sample patterns.
Link to the “Conclusion” sectionConclusion
The companion app will ship on the App Store and Play Store so people can try the package and author patterns without wiring everything by hand.
Thank you for reading!
