Bring your designs to life with custom phone vibrations
How to design a custom haptic pattern with Origami Studio
When I was recently crafting a “delightful” and “celebratory” experience for the Chime app, I immediately thought of the first time I experienced someone texting me “Happy New Year” over iMessage. I was enamored with the firework animation and how my phone gently vibrated in my hand, matched exactly to when each firework exploded. “Such good hand feel!” I delightedly squeaked.
For members at Chime, receiving their first direct deposit is a notable milestone since it is the first time they receive their early payday and access to Chime’s best features. We wanted to make sure members would pause and take note that this was a special moment in their larger Chime journey. In the same way enrolling a direct deposit enhances a member’s account, we wanted to enhance this moment with an experience that didn’t just happen on the screen, but in their hand as well. Here’s how to create a custom haptic pattern using just a few tools.
Download your tools
Origami Studio can be a really intimidating prototyping tool (honestly the noodles still haunt me), but in a few cases Origami is super powerful and worth digging into. In this case Origami is a good option because it accepts the AHAP file format, a haptic standard introduced in iOS 13. Don’t worry, James Sheak, a Director of Design at Chime, did the heavy lifting and set up a simple Haptic Design Origami file for you to use. First, download these free tools.
1. Download Origami Studio 3 onto your computer
2. Download Chime’s custom Haptic Design Origami file
3. Download Origami Live onto your phone
Set up your tools
Open up the Haptic Design Origami file in Origami Studio and plug in your device. Then open Origami Live on your phone and make sure you can see the prototype. If you’re having difficulty previewing you can also share the Origami file to your device using the share button in the upper right.
Once it’s previewing correctly, try tapping the green button on your phone and enjoy the delightful pre-loaded haptic pattern. Feels tickly, no?
Design your own haptic pattern
With your tools all set up, head over to Captain Ahap, a tool that allows you to quickly design a haptic pattern using a simple visual UI. Scroll down, then start by clicking and dragging boxes in the upper area labeled “Intensity”.
I recommend making 4 boxes varying in height and width like the image below (but honestly feel free to get creative here). That way when you preview you can get a quick understanding of what shape equates to what type of vibration. You can also manipulate the sharpness of the vibration in the lower area.
Once you’re done with that, click the Code button in the upper right and then copy the code from the panel that appears.
Preview your pattern
Head back to Origami Studio and make sure you’re in the Editor view. You can tab between views on the header bar. Then pan around the black working area until you find a green box with a purple and blue box inside of it.
In the blue box, click the ellipses next to the word “File”. A white popover should appear. Replace this code with the code that you copied from Captain Ahap.
Experiment like crazy
With the new code in place, preview the prototype again on your phone and tap the green button to feel the haptic pattern you just designed. You did it! Now go forth and experiment. It won’t take you long to get the basics. When you have finished your design you can share the JSON file with your engineer directly from the Captain Ahap website.
We hope you found value in this tutorial — be sure to follow the Life at Chime blog for more content as we help everyday people achieve financial peace of mind, together.
Special thanks to James Sheak for providing the tools to learn how to do this and so I didn’t have to touch any noodles inside of Origami. Additional thanks to Samantha Berg, Meijie Xia, and Ben Snyder for help with this article.
Additional resources
Starter Patterns
Origami Documentation
Captain Ahap Documentation
10 Principles of Haptic Design
