Enable Accessibility features

When setting a push-to-talk hotkey, we needed to guide the user in enabling Accessibility permissions.

I explored two options — a text list w/ illustrations, and a singular small paragraph with this accompanying animation, heavily inspired by CleanMyMac X's instructional flow.

The animation was keyframed in Sketch, created and sequenced in Origami, and then recorded with Cleanshot at 60fps. It's not an ideal toolset, but I know nothing about motion graphics software, and this got us a working solution in under a day.

The illustration is drawn in such a way that most elements, with the exception of a few icons, scale cleanly down to 1x.

In production, the asset bounds are flush with the gray panel, and the rounding is a border-radius.

Finally, Origami allowed me to do a few cool/different things here. The typing affect on the password input is a pulse firing at a random interval between .05 and .3s — if one were to view the file, that typing sequence is different every time. The unlocking padlock is a keyframe animation created by a pulse firing every 1/60 second, passing through 38 keyframes. The rest of the animations aren't keyframed, but are typical timing + curves, and a couple of pop animations.

Posted on Aug 24, 2020
Zello Design
Designing the world's best business push-to-talk solution

More by Zello Design

View profile