Integrating Same-Day Delivery Into World Leading e-Commerce Checkouts
Shutl is a same-day delivery platform (acquired by eBay in 2013).
Shutl connected consumers, retailers and point-to-point delivery drivers. Customers could click ‘Buy’ and be holding their order in under 30-minutes – our record was under 15-minutes. Instant gratification.
Shutl made delivery convenient for the customer. As it should be.
For such a great customer experience, retailers were required to do a few things… (1) have real-time in-store stock visibility, (2) communicate with the Shutl API and (3) build same-day delivery choices into their checkout flows.
This story looks at #3: how we helped world-leading e-commerce companies build same-day delivery choices into their checkout flows.
Same-day delivery was (and still is) a rare delivery option. A decade after Shutl was founded and two decades since the original delivery startups (Kozmo.com and Urbanfetch.com) most retailers still aren’t offering it. Amazon is getting there.
So it was our responsibility to develop UX patterns that retailers could easily adopt.
Additionally, every retailer was building their own Shutl integrations – it was a massive duplication of effort. We needed to make it easy for retailers to integrate.
And finally, every retailer looked different, so we needed to balance customization of Shutl with retaining Shutl as a branded delivery option.
The Design Process
With those goals in mind, we set out to research and design guidelines for all future retailers integrating with Shutl to offer same-day delivery.
Researching user flows of top e-commerce retailers
I started by reviewing the checkout flows of all the top e-commerce retailers (including those already integrated with Shutl). Taking time to focus on the major similarities and differences, after all, guidelines must be able to tackle anything that’s thrown their way.
The majority of online checkout processes include product detail pages (the items that are being sold), a basket, delivery options & address, taking of payment, order confirmation. But the order of these stages and the information asked at each step differed. Ultimately there were 4 different common pathways online retailers were using.
Ideation
With these 4 pathways acting as a foundation, we were able to design guidelines flexible enough for each pathway, whilst gathering the delivery postcode effortlessly and providing the customer with pricing information as early in the flow as possible.
Rapid prototyping
Using Middleman, Bootstrap and Amazon S3, the sketches and mockups were quickly thrown into code for us to play around with and ultimately get in front of people. We built key workflows that imitated familiar buying experiences.
Later, the team presented these prototypes to retailers for feedback, after all, it was the retailers that had to implement our guidelines.
Guerilla usability testing (in-person, moderated)
Due the wide nature of online shopping in the UK (60% of the population back in 2012), we took to our local co-working cafe to recruit usability testers in exchange for coffee.
Our test scripts were centered around 6 different prototypes (over 2 rounds of usability testing). Each testing a different approach, including an embedded expanded view of time slots, a pop-up modal and integrated Shutl/non-Shutl delivery options dropdown.
All tests were recorded using Silverback to allow the wider team to review the test later.
The Results
Price Calendar
The biggest win of the project was the development of the Price Calendar. A simple one-line JavaScript drop-in for retailers to present delivery quotes in a user friendly way. It was quickly adopted by major retailers such as Argos, Schuh, Maplin, Coast, Oasis and Karen Millen.
Retailers were also able to customize the fonts, spacing and colours by adding custom CSS.
Clear implementation guidelines
In collaboration with sales, marketing and product, we had a clear set of guidelines we provided prospective retailers. It incorporated language, logo positioning, styling, element positioning and user flows.
Round-up
Through thorough research, rapid prototyping and guerilla usability testing we were able to design and develop a user-friendly widget that made same-day Shutl delivery simple and fast to implement for e-commerce retailers. Allowing their customers to choose delivery at a time and price convenient for them.
Bonus: Are you interested in Shutl’s use of (graph database technology) Neo4j to make the Price Calendar and rapid quoting possible? Check out this blog post.
🙏 Thank you for reading. This is a story from Fraser Deans’ design portfolio — a digital product designer.
