Designing the Lyft
Split Payment Experience Using Pixate and Framer
Prototyping was a crucial part of our design process for exploration and iteration, gathering feedback from stakeholders, and communicating the details of implementation to our Engineering team.
Sending a Split Payment
Our aim was to make sending a Split Payment as simple and easy to understand. The first thing that was prototyped was the on-boarding feature cue and overflow menu that contains the Split Payment option. We decided to use a feature cue with animated movement as a lightweight solution to make it easy to discover the entry point for sending a Split Payment. I used Framer to create the initial prototype of the feature cue and in-ride overflow menu. View the prototype here: Framer Prototype
Framer let us quickly tweak the timing of the animation on the feature cue, as well as refine the scale out animation when the menu is tapped. Getting the details of the interaction was an important part of the design to ensure that our passengers would know where to find the Split Payment option during their ride. Prototyping the feature cue and overflow menu in Framer helped our team better evaluate the effectiveness of the design and allowed us to better understand how the animation would feel to users.
If you want to learn more about how to prototype your designs using Framer, they just updated their documentation with a ton of great examples to get you started: http://framerjs.com/learn/basics/
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.
I hope you enjoyed this quick look into how we crafted our Split Payment feature. You can split payment for your Lyft rides today on both Android and iOS.
Checkout my Pixate class and share your thoughts with me on Twitter. I’d love to hear your feedback as well as how you make prototyping a part of your design process!
