Peapod.com today barely resembles its early days. Launched 25 years ago, the current online grocer hit the market when there was no Internet, a computer didn’t come with a mouse, and consumers still used floppy disks.
But Peapod has evolved and kept pace with technology to become the largest online grocer. Today it is No. 61 in the Internet Retailer 2014 Top 500 Guide, with estimated 2013 web sales of $585 million. Peapod also is one of the most mobile retailers around. It is No. 45 in the recently published Internet Retailer 2015 Mobile 500, with estimated 2014 sales on smartphones and tablets of $300 million.
While the company has changed over the years, one thing has remained constant: It has always let its customers lead its design decisions, Thomas Parkinson, Peapod co-founder and chief technology officer told attendees in his keynote presentation today at IRCE Focus: Digital Design.
“You have to design for the type of customers you have,” Parkinson told attendees in his session entitled: “What your refrigerator is trying to tell you.”
Parkinson compared the refrigerator to the retailer’s customers and led attendees through the design decisions it made over the decades, harkening back to when Parkinson himself spent countless hours designing a single page, the company employed the archaic ASCII character encoding scheme and sent new customers a VHS tape explaining how to use this new and novel way to shop for groceries. In the beginning Peapod employees drove to and shopped grocery stores to fulfill orders and used their own cars to deliver the groceries, Parkinson said.
“Today Peapod is a lot more sophisticated,” Parkinson said. “We are shopping in warehouses (as opposed to supermarkets in the early days of Peapod). And we have commercial vehicles we are delivering in. As the Peapod business evolved so did our user interface design.”
Anticipating the rise of mobile devices, the retailer was one of the first to market in 2001 with a mobile app for the Palm Pilot, and it is now a mobile leader employing scanning and voice recognition technology. It also is pushing the mobile envelope, for example, placing shoppable billboards in subways and on the sides of delivery trucks in some cities, and at some sporting events and concert venues. Passersby can use their phones to scan the billboards and complete their orders on the spot.
Today, 47% of Peapod customers use mobile devices to shop and the average mobile order is $160 compared with $153 for desktop. The iPhone accounts for 48% of mobile orders, Parkinson said. Also, Parkinson added that mobile shoppers accumulate an average of six sessions per order, meaning they come back and modify their orders six times before it heads out for delivery. Desktop orders average four sessions, Parkinson said.
“All along the way, we have come up with great innovations of design,” Parkinson said.
One such mobile innovation includes creating what Parkinson calls a container app built around the HTML5 mobile site. The container app was the perfect compromise, Parkinson said, between the marketing and development teams. Peapod’s marketing department wanted customers to be able to find Peapod in the app stores and Parkinson wanted the business to have flexibility, keep costs down and to support only one development team. The resulting container app looks like an app, and loads from the same server as the desktop site.
Peapod is currently working on building connections with food-related apps such as recipe or meal planning apps via an application programming interface, or API, that will enable shoppers to go from reading a recipe to buying all the ingredients for it though Peapod in a few steps, Parkinson said.
Peapod is in the final steps of relaunching its 15-year old site on an ATG e-commerce platform provider (ATG is owned by Oracle Corp.) It will begin rolling it out to customers over the next two weeks Parkinson said.
The new site, which took about a year to develop, uses Google Inc.’s Angular open-source application framework to create a site that combines both responsive and adaptive design. With adaptive design, the retailer’s server detects the device the consumer is using and only sends down the elements the retailer wants to show on that screen. Compared with responsive design, adaptive design has the advantage of sending less data to the device—thus increasing download speed–allows Peapod to more easily design pages for specific devices, and does not require any changes to the desktop site. However, industry experts note responsive design is good for pages that display a lot of content. But for a page, such as a checkout page, where getting the layout precisely right on each device is important, adaptive is often a better approach.
With the forthcoming site, Peapod designed pages for the smartphone first and then worked to make those page designs scale up to tablet and desktop screens. “It’s fast on all devices,” Parkinson said. “And it’s the same user interface on all devices, just different sizes.”Favorite