Stop Creating Mobile Versions of Desktop Sites

Building desktop websites first and mobile second has worked in the past, but if we’re going to make up the conversion rate gap between mobile and desktop ecommerce, we need a lot more than incremental improvements — we need a paradigm shift. We need to start creating web experiences that were designed for smartphones first.

I love digging into every nook and cranny of an ecommerce site to find shopper friction. It feels fun and productive to find those rough edges and smooth them over. I love moving pixels around an interface, iterating and fine-tuning until the experience is amazing. The problem I’m facing is that mobile users are taking over, yet we’ve hit the ceiling of what a mobile ecommerce experience can be. Continuing the cycle of iteration can only get us so far because the underlying foundation of our sites is the desktop.

Everyone still starts building desktop first

Luke Wroblewski’s great talk at Conversions@Google 2017 crystallized my ideas on this subject. Wroblewski framed his presentation around the urgent need to stop applying the same processes and results from 30 years of desktop interface design to mobile design.

I feel we can do more. I don’t think spending 30 years moving pixels around is the opportunity that mobile provides especially at the scale mobile brings. — Luke Wroblewski

All of the major ecommerce platforms are built around the idea of generating a desktop site first, even the platforms that are promoting “mobile-first” responsive templates. If you aren’t considering the mobile shopper as a first-class visitor to your website, someone who deserves an experience designed specifically for their context and screen, you aren’t mobile first. In my experience, almost every retail design team still begins thinking about the shopper’s experience from a desktop-centered perspective. After the fact, they begin to address the mobile experience through either responsive, adaptive, or progressive web techniques. They take all the business logic and user flows and copy them onto a smaller screen.

Letting data make your decisions

Data has become canon. Compounding the design culture of pixel-pushing is our desire to use data to make every design decision. Testing a green button vs. a red button to see which one is tapped on more has created a design culture of being reluctant to move too far, too fast. Thinking on a small scale doesn’t allow you to rethink the fundamentals of the experience and revisit assumptions and structural decisions that are fundamental to the experience.

Most multivariate tests are only helping teams with small optimizations. These small optimizations have sapped the creativity from the design teams. Bill Pardi, a principal content engineer at Microsoft, has a great Medium Post that can help teams understand when data can be useful and when you need your team to use their intuition and creativity.

Creativity allows us to take the data we have, question our starting assumptions about what the data is telling us, and experiment until we make something useful out of it. It’s not about the ingredients, it’s about the cook. Ingredients alone don’t make a meal. — Bill Pardi

Data-driven creativity is what will help us break away from the constraints of desktop and think of ways we can create mobile commerce experiences that are better than their desktop counterparts.

Desktop drives all my revenue

Since the dawn of ecommerce, desktop screens have driven ecommerce revenue, but the tide is turning on that long-held data point. Most retailers have already seen their mobile traffic surpass their desktop traffic, but revenue has been slow to follow. That time has come to an end. This holiday season, we will see the first significant cohort of retailers with more mobile revenue than desktop.

Mobile revenue will overtake desktop revenue in the second half of 2017, just in time for the busiest shopping season of the year.

In Mobify’s Q1 2017 Insights report, we show that many ecommerce leaders will drive more revenue through mobile than any other channel by Christmas 2018. But ecommerce retailers still don’t think from a mobile-first perspective. Desktop UX is prioritized within retailers’ teams, and the quality of today’s mobile ecommerce interfaces shows the result.

Even here at Mobify, our design team has fallen into this trap. It’s too easy when project timelines and budgets are tight to simply say, let’s just match desktop. With what’s at stake now in terms of mobile revenue, I don’t think any retailer can afford this approach any longer. I believe the retail design teams should focus the majority of their attention on the mobile experience.

People just like desktop better

Our research asks shoppers about which device they typically use to make purchases. Often they respond that they start browsing on mobile but switch to desktop to complete their purchase. Why is this?

In an important piece of ecommerce research, Let Your Fingers Do the Shopping: How Touchscreens are Changing Purchase Behavior, professors Ying Zhu and Jeff Mers help us understand the mindset of a mobile shopper. Their research showed that touchscreen users have higher experiential thinking styles and lower rational thinking styles than users of desktop devices have.

The playfulness of a touchscreen interface is more likely to put you into an experiential thinking style, which resonates with the playful nature of hedonic products. — Ying Zhu

In a recent interview, Ying talked about what might be running through a shopper’s mind while buying a Gucci bag. Her conclusion was that based on the shopper’s familiarity with the brand, (the product, the price, and the purpose) they would lean more heavily towards one device type or another. If it was a first time purchase that included research, they may lean towards desktop. But if it was a repeat purchase for a non-critical product, mobile might be the way they go.

We can take this a step further and divide the mobile shopping experience into experiential criteria and rational criteria. Product browsing and selection fall into the experiential side, while a final product comparison and checkout would fall to the rational. A great challenge to designers is to find ways of incorporating experiential behaviors into the areas where rationality prevails. For example, how could we make comparing products within the cart more experiential?

Now that we’ve uncovered these habits I tend to fall into, what can we do about it? I started my journey by setting out a set of starting principles that I believe will help myself, and maybe you too, break these desktop-first habits. These principles are meant to help you pair the characteristics of a mobile device with the desires of a shopper — putting the shopper back at the center of your decision-making.

Every screen deserves a great experience

I am a huge believer in the power of adaptive and progressively-enhanced UX. I won’t delve into great detail on what these mean philosophically, but for me, it comes down to creating custom experiences for a particular screen size and then adding features unique to the device to make the experience the best it can be at that moment.

Progressive Enhancement is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience. — Smashing Magazine

I am rarely happy with the user experience of responsive ecommerce sites. Usually, it results in unacceptable compromises throughout the page. Responsive design is all about bending one code base to your will to provide an ‘ok’ experience across big and small screens. With hundreds of billions of dollars spent on ecommerce every year around the world, every screen deserves to be an exceptional experience. Adaptive solutions allow you to create an experience that suits a specific screen size. Elements can be positioned where they need to be and not simply fall down the page as the responsive framework dictates.

This is especially important in ecommerce. If you look at a product detail page, it is critical that you place all of the key action elements, such as price, product selection, and the add-to-cart CTA close together. We can take an adaptive approach and place those elements exactly where they need to be for a particular screen size with no constraints of the framework. Now imagine the shopper selecting this product on an Android Pixel device, and they go offline or lose connectivity. Instead of receiving the dreaded offline error page, the shopper could continue to review a product page and even add that product to cart — all while offline. The site could then prompt them once they are back online to complete their purchase. A truly seamless experience.

Maintain attention through focused experiences

You should be sure about one thing: you don’t have your shopper’s attention. Most retailers believe that when a shopper is on their site they have their full attention, but they don’t. The average attention span of humans is a mere 8.25 seconds and falling. We design interactions in a world where a shopper using a mobile device is in a continuous state of partial attention.

Continuous partial attention. — Linda Stone, technologist, Calm Technology: Principles and Patterns for Non-Intrusive Design by Amber Case

Shoppers spend very little of their time on your site and usually go months between visits. Most retailers consider themselves lucky if they see the same visitor more than a handful of times in a year. We need to ensure that our mobile experiences are focused and take this fragmented attention into account. For optimal conversion rates, shoppers should spend less than 15% of their session waiting for pages to load. Shoppers who spend 25% of their visit waiting for pages to load are half as likely to convert as shoppers who spend 10% of their time waiting.

From a design perspective, we can deal with this continuous partial attention in a couple of ways. First, we need to make our experiences fast. The time to interactive needs to be fast, but the experience also needs to feel fast through the use of perceived performance patterns. I am super excited about the ways that Progressive Web Apps (PWA) can make the experience feel super fast through the use of smooth, app-like transitions so that the shopper doesn’t have to wait for pages to load, and they can complete their tasks much faster.

From a visual interface perspective, we can create focused interactions by removing all the background clutter and focusing the shopper on a single action. For example, when interacting with a search field, hide the page content and navigation, and focus the shopper on simply entering a keyword and seeing the resulting autosuggest results clearly. Focus on the speed and performance of every single interaction: if you have the shoppers attention for 8.25 seconds, what are you going to do with it?

Reduce the effort in completing an action

Your phone is a magical device that knows a great deal about you. It knows who you are and where you live, through simple techniques it can provide that information to retailers with a single tap. Shoppers often go back to desktop to close out purchases because data entry is easier on a full-sized keyboard. But so often the data that needs to be entered is already stored on their mobile device. We just aren’t making it easy for shoppers using mobile.

Simply using the right contextual keyboard makes entering information easier on mobile. There are specific keyboards for text entry, numeric entry, search entry, and more. There are other things we can do to make the shopper’s life easier: associating the text field with the right auto-suggest label allows the device to suggest content based on the shopper’s contact card. Address, full name, and phone number can be a single tap to enter if this is enabled correctly. Instant payment technologies like Google’s Payment Request API or Apple Pay allow the checkout experience to be completed with a single tap — a truly delightful experience.

I’m optimistic that ecommerce retailers will begin to break these desktop-first habits to embrace and understand what a great mobile experience is. The principles I set out above are helping me and my team at Mobify keep the shopper and the device at the center of our decision-making. I still love digging into every nook and cranny of an ecommerce site to find friction, but now most of my focus is finding ways where we can make the experience uniquely mobile.

Originally published at www.mobify.com on October 4, 2017.