PinchToZoom.jpg

Binder Prototype

Binder Prototype

Project Contribution: UX Design | Playtesting | Interaction Design | Prototype


(click image to play video)

The problem: user can own thousands upon thousands of cards, but the current layout only allows for about 9 cards to be visible at a time. After doing some math estimates I realized that means that a SMALL collection of roughly 1,300 cards would actually require the user to scroll through nearly 75 feet of screen space before he has browsed his entire card collection (some users have medium-sized collections that span literally miles). That's an unacceptably long and tedious interaction process.

The solution: What I propose is a pinch-to-zoom system, whereby a user can pinch in to zoom in to see fewer cards at a time, or pinch out to see more cards at once. By doing this we can exponentially reduce the amount of physical space used to represent an entire user's collection. This also gives a user a more accurate view of his collection at a bird's-eye view when applying filters.


You made it!

You made it!

Here is a  50% view of the problem.

Left: Current app implementation with 1,537 cards displayed.

Middle: Same number of cards at the second zoom level. Takes significantly less time to scroll through the entire collection

Right: Top-level "bird's eye view" zoom. From this view a user only needs to swipe a few times to see their entire collection.