Why Cards are great for mobile shopping apps

In this multi-part series, I will be taking a close look at the Spring shopping app on iPhone

Part 2: Spring is ahead of the curve for representing products through cards

The concept of a card to represent related pieces of information pre-dates the age of flat-design. Think business cards that are swapped for contact information and Costco cards that seal marriages to name a few. This paradigm has been widely and successfully adopted for the digital medium. Prominent examples that come to mind are Pinterest, Microsoft’s modern and Google’s material design language and Instagram.

Narrowing focus to mobile UI for mobile e-commerce based applications, the card UI is a perfect choice for representing product information. The design paradigm represents information in digestable chunks and is optimized for rectangular screens. Despite this, shopping apps out there have not fully embraced using cards for products. They try to fit hundreds of products over many rows and columns. The product pages are not interactive and you are required to navigate to the next level to get full product info or make a purchase.

While it’s worthwhile to make the product feed minimal and clean, it is crucial to have a self-contained and interactive product representation . Adding more hoops between the first product impression and intent to purchase discourages on the go mobile shoppers.

One of the few mobile apps that has nailed translating card style interface to an interactive shopping experience is Spring. Spring very astutely picked up on how Instagram is becoming a medium to advertise retail products. They went a step further and created an Instagram like card encapsulating each product however in this case you can actually check out(or buy)the product without losing your place in the feed.

The complete guide to an effective card style design prescribes 7 design requirements a great card should have and here is how Spring performs (spoiler: successfully) for each requirement: