Madison Miner, WompMobile CEO, delivers presentation, sharing best practices for building AMP-enabled, ecommerce shopping experiences
WompMobile joined forces with Google to lead a New York-based hackathon focused on engineering feature-rich Accelerated Mobile Pages. More than 50 engineers from 20 companies participated in the one-day hackathon, which challenged each team to convert landing pages into valid, beautiful AMP pages, ready for launch.
“AMP solves a legitimate problem by guaranteeing a fast and consistent mobile experience – no matter the network connection,” said Madison Miner, WompMobile CEO, while delivering his lightning talk. “Most ecommerce companies are confronted with the dilemma of mobile traffic outpacing desktop, yet conversions have not reached parity. With AMP, performance and speed ensure mobile shopping can rival the desktop.”
A team of WompMobile engineers helped participants troubleshoot and brainstorm ways to create highly functional AMP pages.
Unpacking AMP for Ecommerce
During the featured lightning presentation, Madison unpacked AMP for ecommerce, walking through common misconceptions and solutions to build high-converting, mobile shopping experiences.
“AMP eliminates frustration by delivering customers instant-loading first impressions,” said Miner. “Greater mobile speed sells more product – it’s that simple. We’ve measured the bottom-line benefits and from higher click-through rates to increased conversions, AMP works every time.”
AMP requirements also encourage best practices by embedding performance into the heart of mobile design. “AMP improves design by enforcing simplicity,” said one of Google’s UX designers and hackathon judges.
Madison also outlined the most commonly used AMP components for building complex, robust ecommerce pages, including:
- amp-list, which fetches dynamic content from a JSON endpoint, is a great solution for showing variable information on a product page, such as real-time pricing and inventory.
- amp-bind, which enables custom interactivity, brings to life an ecommerce page by updating the experience based on customer interactions, such as selected product colors, sizes and other user-driven variations in content.
- amp-form allows the usage of forms which capture user information, such as “add to cart.”
- amp-selector presents a list of options, letting shoppers browse selections and information while keeping the interface simple, with features such as product tabs.
What about the results of AMP for ecommerce?
WompMobile has generated more than 2 million e-commerce AMP pages – more than any company in the world – which offers a large sample for measuring the impact of mobile speed. In a recent joint study with Google, WompMobile aggregated performance across 500,000 ecommerce AMP pages. On average, click-through rates from search increased 29%, bounce rates decreased 31% and conversions went up 105%.
And the winner is …
After a full-day of problem solving and engineering, four semi-finalists were selected, including St. Jude Children’s Research Hospital, Autobytel, Jellyfish and Shoppers Choice. And to select the winner, the semifinalists – in a TechCrunch Disrupt format – presented their AMP pages to the judges andall the other participants, who then voted for the winner of the day. While many creative and impressive solutions were demonstrated, the winner of the day was St. Jude, who not only showcased a quality AMP page, but took the initiative to integrate the project with their existing CMS, demonstrating on-the-fly updates across desktop, mobile and AMP templates for the audience.
AMPs for Progressive Web Apps
What’s next for AMP? Progressive Web Apps (PWAs) of course. In the conclusion of his talk, Madison touched upon the ability to build PWAs using AMP pages as the data source, a technique known as PWAMP.
Progressive Web Apps offer the best of both worlds – the silky-smooth experience of a native app, plus the discoverability and convenience of the mobile web. Incredible speeds, smooth transitions and high-converting features make PWAs the ultimate shopping experience. With PWAMP, AMP pages serve as an entry point into the PWA, offering a pre-rendered, instant first impression, while the PWA and its assets load in the background. Once into the site, users enjoy the richness and reliability of the PWA, as well as fast, subsequent page loads.
Furthermore, compared to traditional methods, the AMP plus PWA pattern offers clear benefits:
- AMP-like speed across the website;
- Shorter time to market; and
- No duplication of engineering efforts.
How do PWAs work with ecommerce? Brilliantly. Just ask Carved, an online retailer of custom, one-of-a-kind phone cases. Carved is the world’s first, live ecommerce PWAMP and the results are amazing. To date, conversions are up 181%, bounce rates are down 35% and traffic has spiked 12%.
Experience the Carved PWAMP for yourself. On your favorite device, visit https://amp.carved.com/ to explore the silky-smooth and lightning-fast mobile website.
For more information about AMP plus PWA, check out this video with Paul Bakaus, Google’s fearless developer advocate, as he breaks down the advantages of the PWAMP pattern. As Paul says: Onwards.