In order to compete with Amazon Prime Day, Walmart is currently offering customers free shipping with no minimum order now through Friday, July 15th, 2016. They are even claiming to offer lower prices than Amazon.
We all know the importance of imagery, especially on mobile. However, the focus on icons and the fear of oversized pages has caused many designers to forget the power of pictures.
The right emotive photograph of the right proportions that loads rapidly is a fantastic way to bring your offline identity in a homogenous digital world.
In the physical world, many people love (or love the idea of) shopping in independent shops – music shops, fashion, books, surf shops, bicycles, delicatessens etc. –, eating in independent restaurants and/or staying in independent hotels. There’s some joy in their individuality, expertise, quirkiness, familiarity. However, this differentiation often fails to translate into the digital world.
This is particularly the case in retail. Too often websites are simply a list of products, often the same or similar products as can be found on plenty of other retailers… sometimes at a better price, with little (bar a logo) to express the retailer’s unique selling proposition (USP) that is so evident offline.
A perfect picture is worth a thousand words
On the high street consumers are attracted into stores, restaurants, bars by what they see. The façade, name, logo, and any call-to-action, e.g. 50% off all helps gain attention, but mostly it is what we see inside.
This is why all shops and many other establishments have big windows. Sometimes it’s just a showcase window display, but often the window provides the opportunity to gaze into the soul and grasp the identity of the place.
It is this unique identity that most websites lack online and really lack on mobile.
Take a look at the mobile site of Daunt Books below. That photograph of the flagship London store tells you more about this retailer than any “about” section, review or product catalogue.
It’s there: front and center, whatever the device. You don’t need to ever have visited the real store to know this isn’t Amazon, Walmart, Tesco or Barnes & Noble.
Daunt Books is not a perfect mobile experience, but it is considerably better than many independent retailers (plenty of chains also) and, with those images, it is certainly one of the most elegant.
If you’ve got it, should you flaunt it?
So while we’re shopping in London, let’s visit the iconic department store Liberty. The image below shows the different experiences that greet the visitor to the physical store and to the mobile site. To find a picture of the store on the mobile site you need to look in the location tab.
Then let’s skip across the channel to Paris, to compare the gorgeous interior of Galeries Lafayette, pictured below, with its digital presence.
As you visit more sites of the world’s iconic department stores, it quickly becomes clear that they have all taken the decision to focus solely on product, with a utilitarian (though ironically not always user friendly) mobile web presence.
Try this: put your finger over the logo on any site (web or mobile), would you recognize the site? Is there anything that gives a hint of retailer’s real world physical presence, heritage or brand? Is there anything that demands: when I’m in New York, I’m going straight to this store?
Does this matter?
It seems surprising, when you have an iconic physical presence not to capitalize on it online, just to remind the customer of the heritage. But these department stores have strong brands, perhaps they feel the logo (with the look and feel of the site) is all that is required to give customers a sense of place, belonging and loyalty.
And of course, you can be sure that every retailer has conducted methodical tests to see what works best with mobile customers. Right?
But what about smaller stores, that aren’t such well-known brands?
Pick a list, any list.
Here’s the test.
Everybody loves a “best of” list. Best hotels in Singapore. Best restaurants in Berlin. The best surf shops in the world. Best coffee, boutique, pubs… whatever your poison.
All best of lists have a tried and tested format.
- Name of store/outlet/place
- Photo of store
- Description of store
- Name of store
- Photo of store
For example, take a look at: America’s 15 Greatest Independent Record Stores according to Gear Patrol. This was chosen purely at random for this test.
Record stores are great example because they look fantastic in photos, even if you are not a big fan. If you are a fan… you can almost smell the vinyl. But all sorts of outlets look great in a good photograph, inside or storefront: skateboards mountain bikes, shoes, garden nurseries, bars, restaurant, hotels… That’s why we love the tried-and-tested list format.
The question is: when you tap through to this outlet that looked so great in the physical world, do you get a mobile (or PC) experience as compelling that image? Because, let’s face it, no normal person is going to physically visit 15 record stores from San Francisco to Brooklyn; but plenty of people might indulge in a little m-commerce.
The image below shows a screenshot of our record store list on the left (a tablet view, much reduced), with screenshots from various examples, good and bad, mobile friendly and not, from the sites to which the list linked (the screenshots are taken on a Samsung S6, but iPhone 6 looks similar using Mobilizer, which is a freemium tool).
How to research
Conduct tests repeatedly on all best of lists you can find. You can use directory services such as Yelp or TripAdvisor, but these are less fun or interesting than random curated lists.
- Pick lists related to, and unrelated to, your business.
- Try best in the world and by country, city – not just your own.
- Conduct it on a mobile devices – ideally more than one type of device.
- Don’t just do it on WIFI, do it at the bus stop, on the train, in the pub.
- Rate each sites on immediate impact. Does it grab your attention and draw you in? Why?
- Did the images make the site slow to load? Enough time to make you bored?
- Do images justify the real estate they take up on the screen?
- Then conduct a more thorough investigation.
- Then back up your findings with user testing.
Mobile as a brochure for your real world experience
Arguably it is even more important to capture the essence of your physical presence, if mobile (and digital) is a vehicle to drive and/or pay for visits to your business in the real world.
If you are in the any of the following kinds of businesses, it’s not just a very good idea, it is, arguably, an imperative to use powerful, compelling imagery:
- Hotels, restaurants, bars and clubs.
- Museums and galleries.
- Entertainment e.g. sports centers, bowling, ice skating.
- Shopping centers.
- Locations – countries, cities, neighborhoods, parks, beaches.
Not only do customers need to know what they are committing to/purchasing, i.e. is it their sort of place, people, good time; but also what the place actually looks like, so they can find it.
The following image shows four mobile experiences for the first five featured on Top 10 Museums and Galleries according to National Geographic. Two of the five, Le Louvre, Paris, France; and The Acropolis Museum, Athens, Greece (not pictured) lacked a mobile-friendly presence.
The homepages of The Smithsonian Institution, Washington, D.C. USA; State Hermitage, St. Petersburg, Russia; and The British Museum, London, England all suggest quite different approaches to mobile – including use of imagery.
Now let’s look at hotels:
The following image shows the four results randomly chosen from Top 10 good-value hotels in Singapore according to The Guardian.
The images are iPhone 6 screenshots using Mobilizer. While all sites appeared to be mobile-friendly, Mobilizer found some of the sites slow to load and other sites on the Guardian list impossible to load. This may indicate some usability issues, which may or may not be caused by the images used.
Is your picture worth its weight/wait in gold?
A quick test of the four museum sites highlighted above using the excellent WebPagetest revealed that the best performer over a mobile network (at the time of the test) was the homepage of The Smithsonian. Looking at the images you might guess that, but the other results were less predictable.
- The Smithsonian had a mobile load time of 2.3 seconds.
- British Museum: 4.1 seconds.
- The Louvre: 5.8 seconds.
- State Hermitage: 13.3 seconds.
With the exception of Smithsonian, the WebPagetest results suggested that one of the issues was images and suggested compressing the images should improve performance for all three.
Images will always come at a small cost when it comes to performance on a mobile network. It is essential to test your site to check that images are not causing unnecessary delay to page load. Consumers are becoming increasingly intolerant of slow mobile sites, so you must take measures to identify and reduce performance lag.
It is absolutely imperative that you test. Read this guide to testing the mobile-friendliness and performance of your site.
The following tools will help expose any issues, including image problems:
- Site Speed Data tool in Google Analytics.
- Google Mobile Usability Report.
- Google Mobile-friendly test.
- Bing Mobile Friendliness Tool.
- Google PageSpeed Insights.
It is absolutely imperative that you also user test to establish if your imagery works with the users and if it justifies any latency in page performance. Read this guide to how to user test.
Among other measures, you should:
- Use onsite and remote user testing.
- A/B testing.
- Heatmaps, such as Clicktale.
This is Part 24 of the ClickZ ‘DNA of mobile-friendly web’ series.
Here are the recent ones:
- The three Us of mobile design: UX v usability v UI
- Mobile design and the art of doing one thing well
- The essential role of wireframes and flow diagrams in mobile design
- Understanding the mobile customer journey and user journey; use cases and user stories
- Getting to grips with mobile design methods and lingo: empathy maps and storyboards
- The key ingredients of mobile design and UX methodology
- Why user testing should be at the forefront of mobile development
- Why and how to comprehensively test the mobile usability of your site
- When will responsive websites respond to user context?
Read the report: DNA of a Great M-Commerce Site Part 1: Planning
Pinterest added several ecommerce features this past week. Here are six figures highlighting its increasing prowess as an advertising platform.
Pinterest, once seen as “where you go if you like cupcakes,” has become quite a force in ecommerce between its promoted Pins and improved targeting capabilities.
According to Mary Meeker’s annual trends report from last month, 55 percent of people on Pinterest use the platform for shopping. On other social networks, that number is only 12 percent.
Perhaps that’s because Pinterest isn’t as inherently “social” as other social media platforms. While you use Facebook to connect with your friends, most people actually use Pinterest to engage with brands. Which home remodeling project sounds better: the one your friend is talking about or the one Lowe’s is talking about?
Earlier this week, Pinterest positioned itself as the platform that may be the biggest competition to Amazon. Like the ecommerce juggernaut, Pinterest now has a shopping cart on both its website and its mobile apps.
Pinterest is also improving its visual search capabilities, showing users similar items to those featured in a post, and allowing them to search for products with the pictures they take IRL. In addition, the platform is bringing its Buyable Pins beyond the app and extending them to the website.
With those enhancements in mind, we decided to dedicate this week’s stats round-up to Pinterest and its expanding ecommerce efforts.
There are million of products to see on Pinterest from more than 20,000 merchants. How do people find the ones they want to buy? The largest group – 30 percent – who makes Pinterest purchases does so via search. The platform’s homepage and Related Pins each account for 25 percent; 20 percent, The Pinterest Shop and boards.
According Pinterest’s the initial tests with its new commerce products, one-third of purchases were initially found on mobile. That number seems a little low, when you consider that more than 80 percent of the platform’s traffic comes via mobile.
Oracle found that if someone sees a Pin, they’re twice as likely to buy it in-store. If that Pin is promoted, the customer is five times more likely to buy it IRL.
Millward Brown, the market research division of WPP and a new Pinterest partner, found that 93 percent of Pinners use the platform to plan purchases. Nearly as many (87 percent) have made purchases after coming across a Pin for a product they liked.
It makes sense that Pinterest is improving on its visual search. Each month, people do 130 million of them.
This isn’t a new stat, but it’s a good one: 8 p.m. is the best time to pin, if you want clicks or repins, according to 2014 data. Repins are also more likely at 3 p.m., while clicks extend all the way through 10 p.m.
In a fast-paced society where consumers want things yesterday, there are several factors within the online checkout experience that can cause frustration for users.
Below, we’ve listed a few bugbears surrounding forms, and some ways you can combat these problems to help shoppers sail through your online forms.
1. Explain why you want the information
People often hesitate when asked to provide their personal details, partly because they are afraid this will land them on lots of mailing lists.
By explaining why you need their details, you will increase trust levels and let them understand that they will benefit from giving you their info.
For example, if you’re asking for their phone number/email address so that you can send them updates about their delivery, let them know.
If you want their date of birth so you can send them a free gift on their special day, then tell them and you’re less likely to lose them and their order.
Here an example from ASOS:
2. Launch the right keyboard
When optimising forms for mobile devices, ensure you are specifying the correct attributes in the HTML code to launch the best keyboard.
For example, if the field is tagged correctly, a numeric keyboard will appear for completing the phone number field, allowing users to input their number more quickly and easily.
It is also a good idea to stop the mobile browser from trying to autocorrect words, which is particularly useful for customer names and street names that are not recognised as correct words.
3. Use search engine-style auto-suggest to save typing addresses
Almost half of the top 100 grossing ecommerce sites use some form of address validation to check that customer addresses are accurate, but selecting the right verification service can also improve your user experience by reducing the time it takes to fill out address fields.
Smart address validation tools allow the user to search any part of an address, predicting the address users are searching for and suggesting accurate matches – even if errors are entered.
4. Make it the right size
Smaller screen sizes and touchscreen keyboards on mobile devices can result in customers making mistakes when entering their details or accidentally clicking links that take them away from the checkout.
It is important to adapt to the customer’s device, making the checkout experience for mobile users just as good as it is for desktop users.
Automatically resizing form fields and buttons for mobile screen sizes will create a better experience for mobile customers.
5. Let customers see their progress
If your checkout is spread over more than one page, adding a progress bar to the top of your forms is a great way of letting customers know how far along the process they are so they can see how much is left to go.
It is also a good way of telling them what is coming up next so that they can be prepared with their payment details or gift voucher.
6. Use top-aligned labels and fields
Positioning labels above form fields is more effective than placing them alongside the fields as they are easier to view on mobile devices, removing the need to scroll around or zoom in.
Make sure that fields are correctly labelled so that users are able to identify what type of information needs to be entered, you might need to give them an example if you need it in a specific format, eg: DD/MM/YY.
As a rule, we would also recommend against using labels inside inputs as this is lost as soon as the user begins typing.
7. Don’t ask for the same information twice
Asking customers to input an email or password twice in an attempt to minimise typing errors may actually result in more.
This is because customers are often not able to see what they have typed due to sensitive information being hidden. They then have to type twice as much and may end up copying and pasting mistakes.
Instead, as customers to enter their details just once, and include an option to unmask their password. Implementing email validation will also help users to understand when they have entered an invalid email address, bringing up a warning message and giving them the opportunity to correct it.
Email and mobile phone validation help the user to identify when they have entered their email address or mobile number incorrectly, giving them the possibility to correct it before it’s too late. Anticipating these errors means you’ll have cleaner data and fewer delivery issues too.
Keeping the consumer in mind when creating your forms is key as it will help you to deliver a better online experience, and prevent form abandonment – keeping them coming back time and time again.
PCA Predict contributed to our new Checkout Best Practice Guide. This, as well as guides on mobile commerce, customer experience, and social customer service, are all available under the ClickZ Intelligence banner.
Alex and Ani demonstrates how today’s businesses must operate like silo-less ecommerce brands, avoiding friction between different departments.
Brands that have been founded within the last 20 years, like Amazon and eBay, tend to have ecommerce figured out. Their chief intelligence officers (CIOs) and marketing officers (CMOs) also tend to be on the same page, focused on maintaining a single channel through which they sell products and services.
There are no silos. Everyone works in harmony.
Traditional brick-and-mortar brands, however, tend to have more of a struggle when it comes to bringing internal departments together. They are much more likely to have traditional CIOs that focus on technology that supports the enterprise as a whole and traditional CMOs that focus exclusively on traditional media.
And as these companies attempt to integrate ecommerce, too, they bring in vice presidents focused on selling products in new channels. This often results in a struggle between three departments that can’t see beyond their own conflicting objectives.
The technology traditional CIOs bring in to support the enterprise doesn’t necessarily also support ecommerce or marketing. And more traditional CIOs don’t always fully understand new channels, often relying on large enterprise systems to fill the gap.
Traditional CMOs, on the other hand, steer clear of ecommerce and want technology to support their specific marketing efforts. Meanwhile, the ecommerce portion of the business tends to be more new media-focused.
As a result, none of these departments work together or understand what the others need . They rely on their own technology to fulfill their own specific objectives and suddenly, there are islands of information throughout the organization and no one wants to share. And that’s no good for anyone.
While L Brands, the retailer behind brands like Victoria’s Secret and Bath & Body Works, tends to be focused on that more traditional sales model, Gap Inc. and Alex and Ani, have really embraced a multichannel approach.
According to Ryan Bonifacino, who recently served as Alex and Ani’s CMO, he met the brand’s founder back when it had a single store and no online presence. It was doing well in terms of sales per square foot, but it was a seasonal business. Shortly thereafter, Bonifacino helped grow the business from $ 1.5 to $ 300 million in topline revenue over five years.
Bonifacino was able to do this by bringing in the digital tools necessary to help the brand figure out attribution, data management, predictive behavioral analytics and the like. He also helped all internal departments work seamlessly together.
Here are his top tips for ensuring every business operates like a silo-less ecommerce brand.
1. CIOs and CMOs must be true partners
First and foremost, Bonifacino said the CMO/CIO relationship needs to be a true partnership. In other words, these executives must work together in establishing a technology roadmap for the brand, but it must extend beyond this to an actual personal relationship.
“They have to go out and do one-on-ones, get dinners, go out for drinks, and do a retreat together: something to get them out of the daily grind and get to know each other,” says Bonifacino. “When your peers see that happening, they tend to view you as partners.”
At Alex and Ani, the CIO and CMO came up with a partnership concept that eventually extended to a buddy program uniting employees who wouldn’t normally cross paths. For example, an engineer and a social media manager would sit next to each other for a time, and go out to dinner or on yoga retreats together.
“We knew this system would be fun, but we didn’t expect the level of success we saw,” says Bonifacino. “Now these relationships are intact and there are lifelong friendships with different people.”
2. Internal departments can’t play favorites
Bonifacino points out that one department can’t add new technology that supports or benefits one channel over another.
“If a CIO is selecting a technology and forcing it on the business without creating a partnership, that puts a process behind a selection and key business drivers, then you’re going to have conflict and friction,” says Bonifacino. “These technology decisions are typically made like that with legacy companies that have traditional structures and don’t have a digital center of excellence.”
He adds that he was lucky to have a blank slate at Alex and Ani. He was able to start from scratch, and build a complete structure and strategy focused around the customer, rather than having to deal with legacy systems, business units and processes.
Further, when either the CIO or CMO make a decision that shifts the budget away from the other, it can disrupt the business in huge ways. It goes back to profit and less management; if there is a disconnect in alignment, costs or calendar, revenue or margin forecasts can be highly impacted and it can create chaos within the relationship. On the flip side, CMOs making technology-purchasing decisions without the CIO’s knowledge can have costly implications.
3. The CFO should be right there with them
CFOs should be in the middle of this CIO/CMO relationship because they understand both modern digital concepts and traditional technology approaches.
“Looking at these two approaches with one lens and a portfolio mentality is best suited for a CFO,” says Bonifacino. “Having a CFO involved at an early level helps determine what’s best for the company and shareholders versus any one sales channel or business unit.”
Governance committees are also important because they help eliminate sales bias.
4. Weekly updates are key
While noting there are “a million different things to call them,” Bonifacino also recommended weekly meetings that include updates on all decisions.
“These meetings allow for open discussion that addresses technology decisions and methodologies, leading to early decisions. What’s more, they reduce or eliminate biases associated with experience, vendors and even time,” he says.
Additionally, it’s healthy for companies to get a product management office – the group within a business that defines and maintains project management standards – view into existing projects at the status level. That validates the the initial business assumptions or value assessments that should be conducted when a non-technology executive sponsors a project.
5. Maintain a knowledge base
During Alex and Ani’s growth period, Bonifacino said he made a decision to say “yes” to any vendor calling on the company. From there, he gathered all the resulting pitch decks, whitepapers and webinars and built an internal knowledge base.
He recommends doing something similar, even if it’s as small as getting things organized on Dropbox and sharing that link with partners in other business units.
“It can go a long way,” he said. “I don’t know if Alex and Ani would be where it is today if it didn’t have this type of foundation for digital literacy.”
Google is testing yet another venture into the mobile payments space. Will this one catch on?
Google’s Hands Free Puts Your Money Where Your Mouth Is
Google on Wednesday announced that it has begun testing an app dubbed “Hands Free,” which allows Android and iOS smartphone users to make purchases via their devices without taking them out of their pockets or purses. Early adopters in Silicon Valley can use the payment system at a small number of McDonald’s, Papa John’s and other eateries. The app offers hands-free connectivity via Bluetooth Low Energy, WiFi and location services on a user’s handset, which can detect when it is at a…
See all stories on this topic
It’s already been seven months since the PayPal/eBay break-up. Here is the vision for each company, presented by their CEOs.
Breaking up not so hard to do: PayPal & eBay CEOs
Digital payments’ biggest competitor? Cash: PayPal CEO Dan Schulman, PayPal CEO, discusses the company’s split from eBay, and weighs in on global spending trends and shares his vision for the future. Seven months after PayPal’s spinoff from e-commerce giant eBay, the transition is going smoother than many might have thought, said Daniel Schulman, chief executive of PayPal. After re-listing on the Nasdaq stock market last July, PayPal — one of the world’s largest online payment firms…
See all stories on this topic
As Amazon keeps growing, they look to lower their incremental costs. Their latest strategy is to lease their own jets to doing shipping in-house. How will this affect the big shippers like UPS and FedEx? Will they lower rates to compete, benefiting smaller merchants?
Move Over, FedEx – Here Comes Amazon
Amazon has been negotiating a lease for 20 Boeing 767 jets as it executes on plans to start its own air cargo business, according to recent reports. It launched a pilot of the service in Wilmington, Ohio, where Air Transport Services Group, or ATSG, has been managing airfreight on Amazon’s behalf, according to The Seattle Times. The activity in Wilmington caught the attention of Vice’s Motherboard, which learned that ATSG had moved into the Wilmington Air Park under contract with an unnamed…
See all stories on this topic
If you sell anything online, you’re going to find this infographic very useful.
17 E-commerce Conversion Boosters [Infographic]
No retailer can succeed in modern-day commerce without a web presence. But simply running an online store doesn’t guarantee a boom in revenue either. To become a successful retailer, you must work out an effective strategy, which is undoubtedly a time-consuming process. For some quick tips on increasing your conversion, check out this Infographic dubbed 17 eCommerce Conversion Boosters. The Infographic gives a compact overview of tried and tested ways to maximize the efficiency of any web…
See all stories on this topic
Internet retail sites experienced record traffic this past Cyber Monday. Target wasn’t prepared. PayPal went down. Neiman Marcus and Victoria’s Secret also experienced outages over the Black Friday through Cyber Monday weekend. Need some help, guys?
Target’s Website Misses the Mark on Cyber Monday
Target’s website traffic hit a wall when a record number of shoppers showed up in search of Cyber Monday bargains. Having offered a 15 percent discount for any purchase made through the site, Target began to experience problems shortly after 10 a.m. It then placed customers in a virtual queue that effectively held their place in line so they would not lose their purchase orders after refreshing their page. The company posted an apology to customers on its Twitter page, noting that traffic was
See all stories on this topic