In this article, we’ll walk through all of the vital steps when planning a highly converting mobile e-commerce website. The most important questions you need to ask are:
Who are we building this mobile website for?
How will we measure conversion success?
What design factors affect mobile e-commerce conversion rates?
What is the ideal product page?
Let’s get started.So, Who’re We Building This Mobile Website For?
The mobile customer is someone we are constantly learning about as mobile adoption becomes more widespread and filters into everyday life. To plan a mobile e-commerce store, we need to put ourselves in the mindset of the mobile customer and understand their intentions and mood.
PHONE USAGE LOCATIONS
The mobile device is a life-invading piece of equipment. We use it in diverse situations:
while watching TV;
while shopping or on a night out;
in bed or in the bathroom;
while eating a meal (a pet hate of mine!);
when bored or waiting at our desk, at a train station or as a car passenger.
In each situation above, the person’s mind will be in a different state and may or may not be in “purchasing mode.” We also use mobile at different times of the day.
How does this help us? Well, for example, you could strategically place different banners on the home page of your mobile e-commerce website, such as price promotions, discounts or coupons, perhaps offering early-morning discounts for commuters, while offering TV dinner viewers something else in the evening (something like “Bored of watching soaps? Grab a DVD bundle now!”).
THE MAIN TYPES OF MOBILE SHOPPERS
Columbia Business School identified five types of mobile shoppers in showrooms and stores: exploiters, savvys, price sensitives, experience-seekers and traditionalists. I have gone one step further by thinking about how people use their phones outside of the showroom to decide whether to purchase products.
The comparer
The comparer browses products in brick-and-mortar stores while price-checking on their mobile device. They might buy in-store, using the online price as negotiation leverage. However, if the online offer is strong enough and the product is available, they will purchase on their phone there and then or when they get home later.
The deal lover
This person loves a bargain, and when they are in store, they’ll look for an online voucher, a Groupon deal or something to save them from buying at the high street price. They differ from the comparer in that they want to believe they are getting a special deal, a limited offer or an exclusive promotion (think Secret Escapes’s exclusive deals or Booking.com’s lowest-price guarantee).
The social shopper
Constantly connected to a range of social channels, the social shopper follows celebrities, industry leaders and brands on Instagram, Twitter and Pinterest, seeking out the latest fashion trends, gadgets and the like. Clicking through everything from vintage-filtered photos to heavily liked dresses, they just have to buy to be ready for the weekend.
The time passer
This person just needs to pass the time while waiting for someone or something. They are normally an impulse buyer, browsing stores they already know (a form of direct traffic) for the latest products. They might subscribe to news feeds or email lists and click through from direct promotion in social channels, too.
How Will We Measure Conversion Success?
We need to define what conversion success looks like. Typically, a conversion falls into one of the following categories:
Purchase
The visitor has completed a purchase transaction.
Social promotion
The visitor might follow your social channel; share, tweet or like your product or brand; write a review; subscribe to a newsletter; etc.
Complete a task
The visitor has completed some task, whether playing a game, filling out a poll, entering a competition, etc.
We then need to set ourselves some SMART goals (as defined by Paul J. Meyer) to track and measure our success. These goals will also help us focus on the project and not get carried away with over-spec’ing or over-designing the website. So, what are SMART goals?
Specific
The goal should be unambiguous and should define what we are trying to achieve.
Measureable
How are we going to measure this? By what method? We could go further by saying who will be responsible for reporting this and whom they will report to.
Attainable
How will this goal be achieved? What needs to be done to make this happen? Do we have the budget, skill and time?
Relevant
Is this in line with our overall vision? Is the market ready? Are we the right people to do this?
Time-bound
How quickly can this be achieved? When are we going to start and finish?
Below are three sets of goals we’ve set in the past. These would directly affect how one goes about designing and developing a mobile e-commerce store.
SMART GOALS 1
Specific
Increase mobile e-commerce conversions by 35%.
Measurable
Segment sales report in Magento.
Attainable
Do this by creating a responsive e-commerce store.
Relevant
This aligns with our overall conversion targets and goals to adopt mobile technology.
Time-bound
Accomplish it within three months of the website’s launch.
SMART GOALS 2
Specific
Increase the average order on mobile by £5.
Measurable
Combine the segmented sales report in Magento to give an average daily order value.
Attainable
Improve upselling and cross-selling on product pages, and recommend complementary products in the shopping cart.
Relevant
This aligns with our overall conversion targets.
Time-bound
Accomplish this within 30 days, and then continually improve through testing and iteration.
SMART GOALS 3
Specific
Reduce bounce rates to below 56% for top-level categories.
Measurable
Analyze the report of page visits within a set time period in Google Analytics.
Attainable
Improve loading time to below four seconds on a 3G network, and improve the landing page design.
Relevant
Although not a direct conversion itself, this would improve all other conversion rates by keeping users on the website for longer and increasing the number of pages visited by each user.
Time-bound
Test over a 14-day rolling period, iterating on the design until we hit the target.
Tip: Print these goals in a large font size and put them where the whole team can see them. Ask the team members how their work will contribute to the shared goals. If a task doesn’t contribute at all, then question whether it’s needed.
What Design Factors Affect Mobile E-Commerce Conversion Rates?
Let’s go through the factors that affect how customers browse an e-commerce website, from a mobile perspective.
HIERARCHY AND NAVIGATION
Space is at a premium on mobile. We don’t have the luxury of providing mega menus for users to browse multilevel categories. Therefore, we need to prioritize key features and content and provide a search box that’s easily accessible in a consistent location. The adoption of off-canvas navigation is becoming widespread as users start to understand how to use it.
TRADING USABILITY AND LOADING TIME FOR BRANDED NAVIGATION
Sometimes you need to make a tradeoff. When we developed Crockett & Jones’ mobile website, our branding guidelines and the company’s heritage and reputation for quality led us to a more pictorial menu system, to reinforce the brand. We experimented with five intuitive navigation methods:
TRADING USABILITY AND LOADING TIME FOR BRANDED NAVIGATION
Sometimes you need to make a tradeoff. When we developed Crockett & Jones’ mobile website, our branding guidelines and the company’s heritage and reputation for quality led us to a more pictorial menu system, to reinforce the brand. We experimented with five intuitive navigation methods:
FINGER FRIENDLY
All of those critical calls to action should be large enough to be pressed by a finger. According to “Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes,” that’s about 57 pixels wide for a finger and 72 pixels wide for a thumb. The article also notes, “This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller. A small target slows users down because they have to pay extra attention to hit the target accurately.” I would say that most of us have overlooked this fact for many years, especially as we adjust out of our 1024 × 768 mindset.
This is very important for all areas that are common to mobile e-commerce websites:
navigation of category tree;
search buttons and filters (especially checkboxes that require precise touch);
all buttons, including “Add to cart” and “Pay now securely”;
form fields to enter billing and shipping details;
thumbnail pictures of products;
swiping for product photos, instead of tapping left and right arrows.
CONTRASTIVE COLOR AND LIGHT CONDITIONS
Whatever color palette you choose, strong contrast is imperative for buttons and calls to action. If an object blends in, users will likely miss it.
Consider the lighting conditions of your mobile users and how to accommodate them in the look and feel of the website. Try turning off the lights, going out into bright sunlight and huddling under a reflective lamp to see how your color palette performs. You can adjust the CSS to account for different lighting conditions with what are known as light-level media queries.
Tip: Don’t be afraid of red buttons. Conversions have increased on a ton of websites that switched to red for strong contrast. Test and iterate!
Who are we building this mobile website for?
How will we measure conversion success?
What design factors affect mobile e-commerce conversion rates?
What is the ideal product page?
Let’s get started.So, Who’re We Building This Mobile Website For?
The mobile customer is someone we are constantly learning about as mobile adoption becomes more widespread and filters into everyday life. To plan a mobile e-commerce store, we need to put ourselves in the mindset of the mobile customer and understand their intentions and mood.
PHONE USAGE LOCATIONS
The mobile device is a life-invading piece of equipment. We use it in diverse situations:
while watching TV;
while shopping or on a night out;
in bed or in the bathroom;
while eating a meal (a pet hate of mine!);
when bored or waiting at our desk, at a train station or as a car passenger.
In each situation above, the person’s mind will be in a different state and may or may not be in “purchasing mode.” We also use mobile at different times of the day.
How does this help us? Well, for example, you could strategically place different banners on the home page of your mobile e-commerce website, such as price promotions, discounts or coupons, perhaps offering early-morning discounts for commuters, while offering TV dinner viewers something else in the evening (something like “Bored of watching soaps? Grab a DVD bundle now!”).
THE MAIN TYPES OF MOBILE SHOPPERS
Columbia Business School identified five types of mobile shoppers in showrooms and stores: exploiters, savvys, price sensitives, experience-seekers and traditionalists. I have gone one step further by thinking about how people use their phones outside of the showroom to decide whether to purchase products.
The comparer
The comparer browses products in brick-and-mortar stores while price-checking on their mobile device. They might buy in-store, using the online price as negotiation leverage. However, if the online offer is strong enough and the product is available, they will purchase on their phone there and then or when they get home later.
The deal lover
This person loves a bargain, and when they are in store, they’ll look for an online voucher, a Groupon deal or something to save them from buying at the high street price. They differ from the comparer in that they want to believe they are getting a special deal, a limited offer or an exclusive promotion (think Secret Escapes’s exclusive deals or Booking.com’s lowest-price guarantee).
The social shopper
Constantly connected to a range of social channels, the social shopper follows celebrities, industry leaders and brands on Instagram, Twitter and Pinterest, seeking out the latest fashion trends, gadgets and the like. Clicking through everything from vintage-filtered photos to heavily liked dresses, they just have to buy to be ready for the weekend.
The time passer
This person just needs to pass the time while waiting for someone or something. They are normally an impulse buyer, browsing stores they already know (a form of direct traffic) for the latest products. They might subscribe to news feeds or email lists and click through from direct promotion in social channels, too.
How Will We Measure Conversion Success?
We need to define what conversion success looks like. Typically, a conversion falls into one of the following categories:
Purchase
The visitor has completed a purchase transaction.
Social promotion
The visitor might follow your social channel; share, tweet or like your product or brand; write a review; subscribe to a newsletter; etc.
Complete a task
The visitor has completed some task, whether playing a game, filling out a poll, entering a competition, etc.
We then need to set ourselves some SMART goals (as defined by Paul J. Meyer) to track and measure our success. These goals will also help us focus on the project and not get carried away with over-spec’ing or over-designing the website. So, what are SMART goals?
Specific
The goal should be unambiguous and should define what we are trying to achieve.
Measureable
How are we going to measure this? By what method? We could go further by saying who will be responsible for reporting this and whom they will report to.
Attainable
How will this goal be achieved? What needs to be done to make this happen? Do we have the budget, skill and time?
Relevant
Is this in line with our overall vision? Is the market ready? Are we the right people to do this?
Time-bound
How quickly can this be achieved? When are we going to start and finish?
Below are three sets of goals we’ve set in the past. These would directly affect how one goes about designing and developing a mobile e-commerce store.
SMART GOALS 1
Specific
Increase mobile e-commerce conversions by 35%.
Measurable
Segment sales report in Magento.
Attainable
Do this by creating a responsive e-commerce store.
Relevant
This aligns with our overall conversion targets and goals to adopt mobile technology.
Time-bound
Accomplish it within three months of the website’s launch.
SMART GOALS 2
Specific
Increase the average order on mobile by £5.
Measurable
Combine the segmented sales report in Magento to give an average daily order value.
Attainable
Improve upselling and cross-selling on product pages, and recommend complementary products in the shopping cart.
Relevant
This aligns with our overall conversion targets.
Time-bound
Accomplish this within 30 days, and then continually improve through testing and iteration.
SMART GOALS 3
Specific
Reduce bounce rates to below 56% for top-level categories.
Measurable
Analyze the report of page visits within a set time period in Google Analytics.
Attainable
Improve loading time to below four seconds on a 3G network, and improve the landing page design.
Relevant
Although not a direct conversion itself, this would improve all other conversion rates by keeping users on the website for longer and increasing the number of pages visited by each user.
Time-bound
Test over a 14-day rolling period, iterating on the design until we hit the target.
Tip: Print these goals in a large font size and put them where the whole team can see them. Ask the team members how their work will contribute to the shared goals. If a task doesn’t contribute at all, then question whether it’s needed.
What Design Factors Affect Mobile E-Commerce Conversion Rates?
Let’s go through the factors that affect how customers browse an e-commerce website, from a mobile perspective.
HIERARCHY AND NAVIGATION
Space is at a premium on mobile. We don’t have the luxury of providing mega menus for users to browse multilevel categories. Therefore, we need to prioritize key features and content and provide a search box that’s easily accessible in a consistent location. The adoption of off-canvas navigation is becoming widespread as users start to understand how to use it.
TRADING USABILITY AND LOADING TIME FOR BRANDED NAVIGATION
Sometimes you need to make a tradeoff. When we developed Crockett & Jones’ mobile website, our branding guidelines and the company’s heritage and reputation for quality led us to a more pictorial menu system, to reinforce the brand. We experimented with five intuitive navigation methods:
TRADING USABILITY AND LOADING TIME FOR BRANDED NAVIGATION
Sometimes you need to make a tradeoff. When we developed Crockett & Jones’ mobile website, our branding guidelines and the company’s heritage and reputation for quality led us to a more pictorial menu system, to reinforce the brand. We experimented with five intuitive navigation methods:
FINGER FRIENDLY
All of those critical calls to action should be large enough to be pressed by a finger. According to “Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes,” that’s about 57 pixels wide for a finger and 72 pixels wide for a thumb. The article also notes, “This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller. A small target slows users down because they have to pay extra attention to hit the target accurately.” I would say that most of us have overlooked this fact for many years, especially as we adjust out of our 1024 × 768 mindset.
This is very important for all areas that are common to mobile e-commerce websites:
navigation of category tree;
search buttons and filters (especially checkboxes that require precise touch);
all buttons, including “Add to cart” and “Pay now securely”;
form fields to enter billing and shipping details;
thumbnail pictures of products;
swiping for product photos, instead of tapping left and right arrows.
CONTRASTIVE COLOR AND LIGHT CONDITIONS
Whatever color palette you choose, strong contrast is imperative for buttons and calls to action. If an object blends in, users will likely miss it.
Consider the lighting conditions of your mobile users and how to accommodate them in the look and feel of the website. Try turning off the lights, going out into bright sunlight and huddling under a reflective lamp to see how your color palette performs. You can adjust the CSS to account for different lighting conditions with what are known as light-level media queries.
@media (light-level: normal) { p { background: url("texture.jpg"); color: #333 }}Although no browser currently supports these, light-level media queries are a cool feature that will hopefully be adopted soon because mobile devices really are used in different lighting conditions. This sort of technology could improve conversions with mobile usage in dark and bright sunlight. One could even imagine swapping promotional banners for daytime and nighttime!
@media (light-level: dim) { p { background: #222; color: #ccc }}
@media (light-level: washed) { p { background: white; color: black; font-size: 2em; }}
Tip: Don’t be afraid of red buttons. Conversions have increased on a ton of websites that switched to red for strong contrast. Test and iterate!
0 comments:
Post a Comment