Mobile eCommerce Guide: Design-Centric Mobile Experiences

In the past weeks, we have examined the mobile consumer and put mobile at the center of omni-channel eCommerce. Let’s now look at how to ensure that the digital experiences we create are truly user-friendly for mobile consumers.

Whether we’re talking about mobile-first, content-first, user-centered, customer-centric, or any other synonym out there in the design trenches, we’re referencing the notion of making digital experiences meaningful, simple, and easy for people to use. At the core of that notion is design and content for mobile.

How do you create a mobile shopping experience that customers want to engage with? Or, even better, one that compels them to convert? We now know that it starts with getting to know them and ends with never losing sight of their interests and motivations.

Creating Realistic Buyer Personas

Creating buyer personas is not a groundbreaking new concept. Personas have been used by businesses to gain insight into their ideal customer, or customers, for over a decade. The data collected through careful research into buyer personas can then be used to create a tailored shopping experience.

Our partners over at Hubspot shared this definition: “A buyer persona is a semi-fictional representation of your ideal customer based on market research and real data about your existing customers. When creating your buyer persona(s), consider including customer demographics, behavior patterns, motivations, and goals. The more detailed you are, the better.”

There are a lot of persona templates and resources available to marketers today, but there’s a few key items that are commonly lacking in personas.

Realistic images. It’s important to stress humanization when you’re making personas. The goal is to create the most accurate depiction possible of your ideal customer to share with your team. Although often overlooked, this includes imagery.

After you conduct in-person interviews to get a sense of how your customer looks, sounds, and acts, use that information as a basis for selecting or taking photos for your personas.

Choose an image that you can imagine your customer actually looking like. Try and imagine them saying things that you know your customers already say. This will help get your team on the same page and thinking cohesively about your target customer.

Imperfect scenarios. It can be beneficial to include imperfect scenarios to your personas. This makes your persona more realistic, lifelike, and relatable for the team while getting to know how your customer is likely to react to certain situations.

For example, include an emergency scenario of someone needing to buy an iphone charger on the fly because they’ve lost theirs. Or someone needing to replace a product because theirs was just stolen. Or if you’re a fashion retailer, including situations of people who suffer from body dysmorphic disorder and how that affects their purchase behavior.

Mobile-centric. As we’ve discussed earlier in this mobile series, mobile devices are weaved into everyday life. So it’s no surprise that, like your web design process, your personas should embody a mobile-first approach. Incorporate what you understand about the mobile consumer and their motivations to ensure you’re employing an all encompassing approach to your personas. Negative Personas. Take the time to create a persona for the type of customer that you don’t want. A negative persona is the opposite of your ideal customer, it’s the customer that you want to steer clear of.

Sometimes knowing what you don’t want paints a clearer picture of what you do want.

Content, The Mobile Way

Writing for mobile is a whole different ball game. It goes beyond collapsing your existing desktop content with a responsive framework. Writing content for mobile requires work, time, and thought. It should be done first and go hand-in-hand with your design process.

Here’s what you need to keep in mind as you embark on your mobile content creation journey:

People tend to look at images before content. Mobile users eyes naturally wander towards imagery. If you want your users to focus on your written content, try and limit the amount of images. If they don’t hammer your point home - scrap it. Tighten it up, don’t shorten it. Shorter isn’t always better, in fact it’s often the opposite. Don’t focus so much on the length of the writing but more so on eliminating the unnecessary words, phrases, paragraphs, and/or jargon. Emphasize what matters and put it front and center. Screen real estate is limited when it comes to mobile. The fold really doesn’t exist anymore. Be conscious of your title lengths. A user is barely going to be able to read the title of your blog if it’s too long (let alone reading anything valuable).

Make your titles short and impactful. Don’t take up too much valuable space, get the point across as best you can while engaging the reader.

Make it digestible. Consumers are less patient when they’re on a mobile device. Combat that by writing punchy headlines, short paragraphs, and be concise in your delivery. New game = new rules. We all know the F-shape that a user's eyes move in when they’re browsing the web on a desktop. While this is the norm for how people read content online, it isn’t on mobile.

A study from Briggsby states and shows: “On mobile devices, it seems that, on average, user attention is focused on the center and top half of the mobile screen. On average, 68% of attention is given to the top 1/2 of the screen and 86% of attention is given to the top 2/3 of the screen.”

When you’ve finished your writing, Sara Wachter-Boettcher and Eric Meyer recommend conducting a WWAHD (what would a human do) test. In their recent book, Design For Real Life, they suggest reading everything you’ve written out loud to yourself or someone else and try to think about how and what a human would do with your content. This process allows you to find flaws and inconsistencies with your content.

Writing for mobile can be challenging but the above tips point to an opportunity. One that can make your digital experiences more enjoyable for mobile users.

Creating a Mobile-Optimized Design

Earlier in this mobile eCommerce guide we looked at how to seriously boost your mobile conversion rates. Here let’s focus on a few small design hacks that can make your digital experience more user-centric for mobile users.

Design a fixed navigation. Thumbing through pages and pages of content on a phone is an everyday thing for your customers. This means they could be scrolling past an important CTA or the navigation and have a difficult time finding what they’re looking for.

Make it easy for your mobile users and implement a navigation that “sticks” to the top of the screen as they scroll.

Emphasize your product photos. As I alluded to earlier, people’s eyes tend to gravitate towards images first. You can use this to your advantage when you’re designing your eCommerce store.

Make your product photos the focal point and you’ll enable the natural habits of your mobile users, making your mobile experience more user-centric.

Finger-friendly sizes. Ensure that you’re designing easily clickable and accessible buttons, navigations, search bars, forms, CTA’s, thumbnail photos, scroll arrows for product images, zoom buttons and more for fingers.

Every aspect of how a customer engages with your site should account for proper finger size and accessibility standards. Smashing Magazine has a thorough and helpful post on the matter.

That wraps up our four part mobile eCommerce guide series. I would love to hear your feedback. Which part did you find most helpful?

If you have any questions about the content or would like to chat further please leave your comment below.