Logo JMango360
Return to blog

How to design a killer eCommerce app

Tap. View. Add to cart. Pay.

Mobile shopping should be that simple, right? Yet despite the rapid advances in mobile app design and functionality, not all are created equal.

The m-commerce boom of the last two years is driving brands to get out an app, any app. Many are being built quickly. Which is to say, badly. 

Without thinking through the content, design, and overall user experience (UX), rushing a shopping app onto Google Play or the iOS App Store can do as much harm as good.

As people become increasingly attached to their smartphones, the number of hours they spend on apps is at an all-time high. Their UX expectations are being set by A-listers like Instagram, Netflix, Uber and Amazon. 

That raises the bar, and a lot of apps don’t reach it. 

Mobile commerce teams regularly battle low engagement and retention, and e-commerce app design mistakes are often to blame. A successful mobile shopping app requires careful planning and audience-focused design.

In this blog we’ll look at some of the most common e-commerce app design mistakes that get in the way of mobile sales growth, with advice on how to overcome them.

 

Error 1: Lengthy onboarding

 

Customize the app experience, or send users straight to the product catalog? Capture country and location automatically or let users choose?

When you’re bringing a new user onboard there’s a balance to be struck between knowing them better and converting a fast sale. 

Gathering more personal detail opens the possibility of better long term engagement and higher lifetime value. 

On the other hand, making it easy for a new user to start browsing and shopping can result in quick revenue. Every strategy has its pros and cons, but at the start of a new mobile relationship, it’s best to make onboarding fast & painless. 

At the outset, ask for country and language and remember the selection, then get them to products and promotions with a prominent search function so they can find what they want fast.

Then you can start incentivising more data collection, perhaps by offering saved favourite lists.

 

Error 2: Making registration mandatory

 

If there’s one mistake almost guaranteed to send a new user out of your app it’s forcing them to create an account before they can make a purchase.

Of course you want personal data and e-mail address, but creating an account on a smartphone can be a pain that sends users heading for the virtual exit.

Instead, let new users make purchases as a ‘guest,’ then give them a simple click box option to save their info at checkout (when they’ll have to provide address and contact info). 

You can also offer a middle option: fast login using a social account.

 

Error 3: Too much going on

 

Simplicity is king in e-commerce app design. It’s really down to screen size. Users need an interface that helps them easily find what they are looking for.

As shoppers make the purchase journey through your app they should hit as few distractions as possible on the way to checkout.

Simple, bold layouts let users look at your app for longer without growing impatient. Things that narrow the options for users or limit their freedom should be binned. Get rid of any minimum purchase thresholds, for example and make checkout easy.

 

Error 4: Lack of personalization

 

Mobile is a highly personal medium. Smartphones are fashion items and functional tools. The way we use them to interact with friends and colleagues is shaped by style and personality.

In a hyper-competitive m-commerce market where users have a nearly unlimited array of choices, they expect more the brands they buy from to be able to recognise them in a crowd

That’s why more and more brands are investing in app capabilities that present content and recommendations tailored to user preferences and past shopping behaviour. The idea is to make the user feel that the shopping experience has been designed especially for them — something that boosts conversion and drives more return visits.

You can do that by using the data captured in user profiles, and by analysing past purchases.  Personalisation has proven to turn seconds of engagement into minutes, and convert visits into purchases.

 

Error 5: Failure to delight

 

Because mobile is a personal medium, it’s also emotional. That needs to be reflected in shopping app design. Users want to be entertained, recognised, surprised, and delighted by the mobile experience.

One popular way to do that is through micro-interactions. They can be a small animation to an icon, a swipe that leads to an unexpected feature, funny messages that confirm the status of an action (thinking, thinking …), nudges to encourage more interaction, or anything that adds interest to a user action.

Micro-interactions simplify navigation and make it easier for users to get around inside the app. Users get instant feedback when they take an action and see that the app has recognised what they’ve done. 

They can also lead users toward a sale with suggestions and tips while browsing products. They can also surface additional information about a product that might not be apparent in the standard listing — sales, promotions, things other people bought along with the same item.

 

Error 6: Making checkout too complex

 

Nothing ruins a shopping experience faster than a long line at the checkout. 

Instant gratification is one of the advantages of online shopping. Forcing shoppers to go through too many checkout steps adds time and effort. Mobile users are notoriously impatient. They just won’t stick around. 

Nearly half of all cart abandonment happens when users have to do things like manually enter address and payment information. Another issue is lack of information (more on this below). 

Once a customer has selected the products they want to buy, at checkout they’ll want to see a detailed snapshot of everything they’ve placed in the cart, colours, sizes, individual prices, and so on.  Having everything at a glance helps boost conversion by removing anxiety and making it easier to say yes.

 

Error 7: Too many words

 

Mobile shopping is personal, it’s also highly visual. Buyers want to find what they want quickly, and have just enough info to make an informed decision — fast.

That suggests using more images and graphics than words to help users navigate around your product catalogue. If you’ve purchased anything online with different colour options, you’ll have seen an array of coloured dots under a product image. 

Click the colour you like, and the image will re-render with the product in that colour. There’s no need to type text, clic a drop-down, or search again by colour.

Payment is another element where icons beat wordy explanations. If a customer wants to access a different country site, for example, or pay with a different currency, you can display a series of country flags and currency symbols ($, £, €, and so on). For every page element that appears on-screen, see if icons can get the job done.

 

Here you can read more about eCommerce app design.

 

Ready to design the best eCommerce app ever?

 

The rise of m-commerce is raising mobile shoppers’ expectations. As more people demand more oomph from the small screen purchasing experience, app designers have to find ways to deliver more value with less. 

The question is, how do you create beautiful app designs in a strategic way that improves engagement and conversion?

Ten years ago we started a mobile revolution at JMango360, making it possible for businesses of every size to have a premium shopping app. We’ve been immersed in app design best practice ever since.

With our easy, Open SaaS platform, you can have a beautifully-designed app incorporating all the latest graphic, checkout, and UX innovations in 30 days or less — for a flexible monthly plan. Unlock the power of mobile e-commerce today.

Written by

Lisanne Barnaart

More information

Start grasping the full potential of mobile. Today!

Before you go...Does your webstore need a mobile app?

Find out in 2 minutes!

Start chat
Hi there👋

How can we help you?