Hub · Blog

13

Oct

UI best practices for retail apps

This is the third part to a series dedicated to explaining how to develop a successful mobile strategy that brings you more conversion. You can catch up on Part 1 here & Part 2 here.

With almost 100% of retail commerce growth now coming from mobile channels, businesses need to put more consideration into how to fully optimise their customer’s journey on the mobile screen. Part of the process of developing a successful mobile app involves careful planning of the User Interface (UI), besides just making your app look good. Sure, it doesn’t hurt to be good looking, but it’s more about designing for the ease of use for your customers and in return high conversion for you as a business. Let’s go through the user journey of an app, and look at some best practices for designing a UI that customers love and that bring you high conversion.

Landing screen

Your app’s first impression matters. It sets the tone for the rest of the app user journey. ASOS is a great example of a well-designed retail app, so we’ll use them as a reference through out this post.

Splash screen          Screenshot_2014-10-10-15-34-13          Screenshot_2014-10-10-15-34-23

First thing first, your app should load quickly, before your customers change their mind about shopping with you. 57% of mobile customers will abandon your app or site if they have to wait 3 seconds for a page to load. 74% will abandon after five seconds. Every 100ms increase in load time decreases sales by 1%. Some companies’ apps prompt users to sign in or register on the landing screen. And that’s fine, as long as you also offer an option for users to skip that and go straight into browsing for products as a guest.

It’s tempting to try out new and creative UI patterns, but stick to patterns that are familiar and intuitive to your customers. For example, “My Account” or “Sign In” buttons are usually on the top right corner, the menu button is usually on the top left, and when you tap on it, a full menu with all your product categories usually slides out from the left.

If you want go the extra mile to provide a sterling cross-channel experience, ensure that the customers’ saved items or items in shopping cart are available on all of your digital channels. Trust me, it’s a pleasant surprise to see that a pair of boots I decided to buy on your website are still sitting pretty in my shopping cart, despite the fact that I’m now using your mobile app to pay for it.

ASOS PC            ASOS Basket

ASOS does it right. When I leave this pea coat in the shopping cart, it is automatically synced with their app. So when I open their app, the coat is also in the app’s shopping cart. 

Browsing

The goal is to keep it simple, but informative. Give your customers enough features and functions in your app to make the shopping journey convenient, but be mindful to not go overboard and clutter their screens.

Let’s look at some standard retail app features:

Option to sort / filter products

 Screenshot_2014-10-10-15-47-28          Screenshot_2014-10-10-15-47-53          Screenshot_2014-10-10-15-48-03

This is really helpful for buyers who know exactly what they’re looking for. In the ASOS app, you can sort and refine the product listing based on price, sizes, colour, style, etc.

 

Save item / add to wishlist

 Screenshot_2014-10-10-15-53-21          Screenshot_2014-10-10-15-53-31

Your user might not be ready to buy yet, but may like the option to save the item for next time. Again, be sure to have the saved items or wishlist available for your customers to access across all of your digital channels.

 

Multiple clear images of product

 Screenshot_2014-10-10-16-03-21          Screenshot_2014-10-10-16-03-25          Screenshot_2014-10-10-16-03-28

Images of the product need to give your customers an accurate idea of the quality of the product especially in Retail. If possible, show the product in various settings, being used in different ways. This will help inspire your customers which leads to higher conversion. To go the extra mile, drop in a quick product video to give a 360 degree view. 85% of people are more likely to purchase a product after watching the product video.

 

Detailed product description/specifications

 Screenshot_2014-10-10-16-10-23

We’d like to think this is a given, but not all brands do this well. Your customers want as much information as possible to help them make a purchase decision. After all, they are not available in person to try on the products.

 

Clear “add to cart” button

 Screenshot_2014-10-10-16-20-18

Make sure that your “add to cart” button is as obvious as possible. Use a bright colour. (Who doesn’t like to press on a brightly coloured button?) Your customers should not have to think about what you want them to do. Also, make sure the button is above the fold. Extra point to you if there’s a confirmation message after an item is added into a customer’s cart!

 

Product availability

 Screenshot_2014-10-10-16-38-50          Screenshot_2014-10-10-16-39-01

Manage your customers’ expectations. Display the availability of your products and try to update that as frequently as possible. If your company has physical locations, you can also use geolocation technology and provide a “check availability at the nearest store” option.

 

Ratings & review

 Screenshot_2014-10-10-16-45-17

Customers find reassurance in a previous customer’s rating and review of a product. Give your customers the option to not only learn more about the product through the description written by you, but also verify the quality of this product from other like-minded customers. 63% of customers are more likely to make a purchase from a site which has user reviews.

Checkout

The customer is now ready to buy your product. Don’t pop that champagne bottle too soon, he’s ready but he’s not done yet. How can you successfully take your customer from the shopping cart to completing payment?

Here’s what we’d recommend:

Enclosed checkout environment

 Screenshot_2014-10-10-16-50-59

They’re ready to pay, so why distract them further? As you can see from ASOS’s example, once you’ve tapped on “pay securely now”, they then remove the upper menu that allows you to do other things within the app.

However, do have the shipping and return information ready within the checkout screens, those are things that customers would want to know more about during the checkout process.

 

Offer a guest checkout option

 Screenshot_2014-10-13-10-52-38

I know, this is counter-intuitive for you. But forced registration has widely been proven to be a main cause of checkout dropout. Offer an option to complete registration after the checkout process has been completed may be for purposes of tracking their order. By then you would have collected all the details you need to register the customer anyway, all they need to do then is come up with a password. Simple.

 

Progress indicator

 Screenshot_2014-10-13-10-59-00          Screenshot_2014-10-13-11-01-29

A progress indicator is the best way to manage your customers’ expectation on how long the checkout is going to be.

 

Minimum form fields + right keypad at the right time

 Screenshot_2014-10-13-11-03-24          Screenshot_2014-10-13-11-03-51          Screenshot_2014-10-13-11-03-43

On mobile, customers have less patience, so don’t give them a long form to fill. Make sure that you’re only collecting necessary information. Any form on mobile should be as minimal as possible and optimised for the small screen. No pinching or zooming in to type, please. 61% of payment abandonment occur today purely because businesses don’t take care of these simple points. That is as good as leaving money on the table and walking away.

Provide the appropriate keypad at the right time. If you’re asking for a phone number, provide a number keypad, there’s no use for the full QWERTY keyboard there.

 

Option to change sizes or colour

 Screenshot_2014-10-13-11-05-39

What if your customers want to change the size or colour of a product within the checkout process? Of course they can return to the product information page, but that would increase the chance of them getting distracted or changing their mind. Let them change those options easily within the checkout page. No distraction, no dropoff.

Payment

The final stretch. You definitely wouldn’t want to jeopardise the purchase journey by not getting payment right.

Payment is what we do, and we do it well. If you’re one of our clients, you’re in good hands. If not, here’s a few tips on what a good payment system should look like:

Offer various payment option

 Screenshot_2014-10-13-11-13-00

Some might want to pay by alternative online payment accounts like PayPal. Some might rather charge it to their mobile phone bill (Boku does that). Let them pay you, in whatever way that they prefer. Also, if your default is to make customers pay by debit/credit card, then don’t ask what kind of card they have. Your payment system should be smart to detect that with the first four digits of the card.  The right payment solution for the right channel can actually increase a business’ conversion on mobile by up to 6x.

 

Avoid redirecting to 3rd party page

Redirect is bad news for conversion. It means a longer payment process, and also a chance for customers to change their mind and drop off the purchase journey. We don’t want that, do we?

 

Security reassurance

 Security

Have some sort of security reassurance to let your customers know that their card details and credentials are in safe hands. Such a small detail, but it makes such a difference.

 

Reprise: Minimal form field + right keypad at the right time

We’ve stressed on it once, and we’ll stress on it again. If you’re asking for customers’ card number, there is no need for a full QWERTY keyboard to pop up. And do you really need their address, again, to process this payment?

What we went through in this post are just some of the most common best practices for retail app UI. You should consider carefully what works for your brand and what doesn’t, then fine-tune your app’s UI base on that consideration. Just remember that when you’re designing the UI of your app, you’re designing for your customers first, aligning all aspects to meet their needs and providing the best possible shopping experience.

 







About Judopay · Judopay simplifies in-app payments, enable frictionless checkouts and intelligently prevents fraud for leading companies globally. Our payments and mobile experts help guide businesses and their development partners to create best in class apps to make paying faster, easier and more secure. Founded by serial financial technology entrepreneurs in 2012, Judopay is backed by leading venture investors and supported by banking and card scheme partners to offer in-app payments that are simple, frictionless and protected.

m-com snapshots

85%

of people are more likely to purchase a product after watching a product video


63%

of people are more likely to make a purchase after seeing user reviews

Contact us, we'd love to hear from you

* Required. We will get back to you soon and we never share your details.