Designing Mobile Commerce Sites for Performance

The speed of a website or app is a crucial piece of a great mobile commerce experience.

The average U.S. retail mobile site loaded in 6.9 seconds in July 2016, but, according to the most recent data, 40% of consumers will leave a page that takes longer than 3 seconds to load. And 79% of shoppers who are dissatisfied with site performance say they’re less likely to purchase from the same site again. – Think With Google

Responsive was a great start at improving the mobile commerce experience, but it’s only a small piece of the puzzle. Adaptive went a step further by adding in some additional features and functionality. But with companies like Facebook, Google, and Apple setting customer expectations on mobile, a further shift is needed.

Google’s latest Progressive Web App technology is based on the principles of progressive enhancement, meaning it starts with basic functionality for everyone, but provides an enhanced version to anyone with a more sophisticated browser or additional bandwidth. Designing for this new way of delivering a mobile commerce experience requires a shift in thinking.

All About Performance

Designers have a tendency to leave performance up to the engineering team, but all the love and care designers give to typography, color, and layout means nothing if the shopper bounces before the page is finished loading.

Your site’s experience determines how much your audience trusts your brand, returns to your site, and shares it with others. Page load time and how fast your site feels is a large part of this user experience and should be weighed equally with the aesthetics of your site. – Lara Hogan, Designing For Performance

When performance is every team’s responsibility from the beginning, both you and your customers win.

Minimizing Bloat

At Mobify, we’ve incorporated Google’s Progressive Web App technology into our mobile customer engagement platform to create Progressive Mobile. The platform already addresses important issues like accessibility and optimized file delivery, so the biggest challenge we face – as far as performance goes – is project bloat.

Since Progressive Mobile is entirely a front-end technology, Mobify’s tech works as a layer on top of the desktop experience. It blocks the site from loading, then uses bits and pieces from the desktop’s document object model (DOM) to complete the mobile experience. Essentially, we treat our customer’s desktop sites like an application program interface (API), calling in specific data or scripts to populate the shell we create.

Because we have no control over the back-end, we have no means of fixing things like load distribution and shared resourcing. That means we need to be extra diligent on the front-end side to make sure we reduce bloat as much as we can. Luckily, with Progressive Mobile we can create our own front-end entirely, meaning we have total control over HTML, CSS, Javascript, images, etc.

Delivering Value

We follow a set of five principles to ensure we are creating products that are exceptionally crafted, solve real user problems, and give us business insights along the way: 

Mobify Design Values Image

Designing for performance is a concept that falls into every category of our principles. Speedy performance means:

  • Creating solutions that are tailor-made to suit real customer needs
  • Making sure our products are communicating to shoppers in exactly the right way
  • Delivering value on an ongoing dialogue between stakeholders, and compromising wherever we can in favor of the shopper
  • Striving to execute usable, elegant designs with simple layouts and interactions benefiting both the business and the shoppers
  • Creating work that is lovingly crafted, built with care and passion, and presented with pride

It’s a no-brainer to us that our Progressive Mobile web and native apps should be designed with performance in mind. We believe that everybody on an ecommerce project must be responsible for the user experience  –  and it all begins with design.

The speed of a website or app is a crucial piece of a great #mobile commerce experience. Click To Tweet



Posted in Tips and Tricks