Mobile Apps

The Ultimate Guide to Mobile App Design Chapter 3: Product Catalog & Customer Account

Continued from Chapter 2: Product Search & Form Entry >>

Product Catalog

The ability to access product information easily, including scanning product image, viewing product details, spotting special products and checking stock availability, is extremely important to mobile shoppers when making purchase decisions. Capture their purchase intent by present your in-app product catalog in the most delightful way to users.

10. Allow users to zoom in product images

Product image is one of the most important elements on the product page. The ability to have a clear view of the product is critical for users to make product decision with confidence. Unlike desktop screens, viewing product image from a small mobile device can be a challenge for users. To help them get a better view, allow users to zoom in and out the product images with their preferred level of magnification.

Allow users to zoom in product images
✖ There is no option for users to zoom in product images for a better view of the desired product.
✓ Users can handily zoom in product image and control the level of magnification as they prefer.

11. Provide full product options

For products with multiple options, let users browse all available product variations and their current status: availability, sizes, color choices,.. Lack of information about product options may lead to confusion and frustration. The product detail page should be designed to make product variations clear and intuitive to understand. 

Provide full product options
✖ It’s not clear to users if some options are ever available or just currently unavailable.
✓ Allow users to quickly understand all product options, which of them are available or currently unavailable.

12. Show stock availability on product listings

Users appreciate it when the product listings enable them to learn about stock availability. They may get frustrated browsing through a long list of products just to find out that their desired item is out of stock. Once again, be sure to show stock availability on listings to avoid this disruptive experience. Customers will still be able to look at your wide range of product offerings while staying informed of its current availability.

Show stock availability on product listings
✖ Users are not informed of product availability until they reach the product detail page.
Show stock availability on product listings
✓  Product availability is shown upon product listings to ensure a smooth product exploring experience for users.

13. Show product recommendations prior to checkout

When users need product recommendations on alternatives or add-on items, they expect the app to surface related products before they reach checkout. The best way to achieve that is to show product recommendations on product page, in the cart or relevant pages prior to check out.

Show product recommendations prior to checkout
✖ Product recommendations are provided after the purchase is complete, which is ineffective to users.
✓ Product recommendations provided before users reach checkout help guide better purchase decision for users.

14. Show both regular / special price and percent discount

Make the most of your promotions by showing users how much they’ll save on a discounted product. Both regular and special prices should be displayed as a comparison. Labeling your products with percent discount is a great way to catch users’ attention.

Show both regular / special price and percent discount
✖ Users are unclear of the discount as the original price is not showing.
✓ Original and new prices, as well as discount percent, are all displayed to show users how much they’ll save.

Customer Account

Growing customer base is one of the top priorities for most businesses. By encouraging mobile shoppers to create a customer account, your brand can deepen customer engagement and conversion opportunities while taking a step further in nurture long-term customer relationships.

15. Enable fast login using social accounts

Most users are bothered by having to create new accounts. Some of them would rather leave the app rather than complete registrations. In this case, providing a quick option to login via social accounts is a good solution. Third party login simplifies the account registration experience for users, which minimizes the number of steps required to create an account and enable one-click login to the app. Adopting a fast login method helps reduce the risk of abandonment and increase usability for the app. 

Enable fast login using social accounts
✖ With limited login options, users have to recall username and password, which takes more time and potentially causes errors.
✓ Offer a fast social login option to make account authentication a seamless experience.

16. Allow users to checkout as guest

For users making their first purchase, they may expect a convenient way to quickly checkout, which does not require them to create an account in order to complete a purchase. Forcing users to register at the start of the experience can annoy them or drive them away. A common solution is to provide guest checkout at the point of conversion. Prompt customers to sign in to save purchasing information for more efficient future experience while offering an option to checkout as guest and sign up later. 

Allow users to checkout as guest
✖ Users are forced to sign in or create an account to checkout, which can be a barrier to conversion.
✓ Prompt customers to sign in to checkout while providing an option to checkout as guest and sign up after completing checkout.

Continue to Chapter 4: Shopping Cart >>