Skip to main content
Uber logo

Start ordering with Uber Eats

Order nowOrder now

Start ordering with Uber Eats

Install the appInstall the app
Engineering, Mobile

How the Uber Membership Team Developed the ActionCard Design Pattern to Do More with Less

February 2 / Global
Featured image for How the Uber Membership Team Developed the ActionCard Design Pattern to Do More with Less
Image
Figure 1: Old membership feature screens
Image
Figure 2: Future membership feature screens
Image
Image
Figure 3: Action models
Image
Image
Figure 4: ActionCard screen
Image
Figure 5: ActionCard screen data/layout structure
Image
Figure 6: Complete set of Cards used to create 16 screens
Image
Figure 7: Membership screens built from cards
Image
Figure 8: Data flow for rendering a card screen
Image
Image
Figure 9: Card screen presenter
Image
Image
Figure 10: Example of MessageCard
Image
Figure 11: Making a purchase 
Image
Figure 12: Maintain a small set of simple cards that are easy to reuse
Image
Figure 13: Dynamic flow
Image
Image
Figure 14: Dynamic card updates
Image
Figure 15: Dynamic flow Part 1
Image
Image
Figure 16: Dynamic flow Part 2CancelMembershipAction->successAction(NavigateBackAction-> successAction(RefreshAction))   
Image
Figure 17: Complete cancel membership flow
Andrew Paul Simmons

Andrew Paul Simmons

Andrew Simmons is a Mobile Product Engineer at Uber and is an architect of the ActionCard design pattern used by the Membership Team.

Posted by Andrew Paul Simmons