Designing the Lyft Split Payment Experience Using Pixate and Framer

After building an initial prototype on Framer, we moved everything to Pixate in order to iterate and respond to feedback from stakeholders more quickly.

The first challenge was to figure out how to prototype the feature cue movement (repeatedly up and down) that was originally done using Framer.

After some trial and error, we figured out a neat Pixate “hack” for prototyping the feature cue animation. Shout out to Marc on our team for helping find this gem: By pairing a move animation with a spring curve that has Friction set to “0" and a very low Tension, “10" in this example, you can create an object that repeatedly moves up and down. Sweetness.

Next, we prototyped the overflow menu, using conditions to create a toggle to display and hide the menu.

After creating the overflow menu, the contacts list for sending Split Payment invites was created using a scrollview, and a quick scale animation was used for the success toast at the end of the flow.

You can view the send split payment prototype here: Send Split Prototype

If you’d like to learn more about how to use Pixate, consider purchasing my comprehensive online Pixate Class. The class covers all the basics and every advanced concept and will teach you how to prototype nearly anything with Pixate.

Accepting a Split Payment

We wanted to create an experience that was simple and delightful when accepting a Split Payment. After several iterations, we arrived at a full-screen dialog design with a single full-bleed call to action at the bottom of the screen, to keep the design focused on accepting the split and who it was sent from.

Once a Split Payment is accepted, an animation of a coin splitting in half plays, adding a little delight to the end of the split experience. Explorations for the animation were prototyped entirely in Pixate.

View the accept split prototype here: Accept Split Prototype

Building this animation in Pixate was fairly simple, using a couple move animations paired with a fade animation for the opacity change. Each half of the coin was sliced as a separate asset for the animation, and initially placed outside the view at the bottom edge. The pink overlay was drawn directly in Pixate and set to fade to 100% after the accept button has been tapped. Two move animations were used on each half of the coin, one to move the coin upwards into view, and a second delayed move animation to move each half of the coin off the screen. A spring easing curve was added to the first move (up) animation, to make it’s movement more fluid and natural.

The beauty of creating prototypes in Pixate and Framer is that the prototypes feel very close to actual native code. They help facilitate the conversations we have during design reviews, letting us critique interaction details that would be difficult to evaluate using only static mocks.

Fully functional prototypes are also invaluable to have when working alongside engineers to get the implementation details right. The iOS & Android Devs on my team were able to accurately recreate the accept split animation using just the prototype, without needing much additional direction from our end. Finally, prototypes are also great for gathering user feedback on your work, whether you’re doing some quick guerrilla research around the office, or conducting more formal user research studies.