"Shop everywhere, checkout here"
That was the tagline for Shop.co, where the vision was simple: create one online checkout experience that allows you to simultaneously buy from all websites at once with the power of AI. The user would locate each product they would like to buy and, using a browser extension, add it to their universal cart. Then, upon requesting checkout, the AI system would revisit every website and complete the checkout process on the users behalf.
The Opportunity
Shortly after the company was founded in Dusseldorf, Germany, and early version of the application was launched into the world with a bare bones interface for checking out at just one site at a time. Sadly this failed to capture enough attention. While there were significant functionality limitations, this was also seen as a failure of the UX to properly express their vision. The company then relocated to San Francisco, California to regroup, develop, and relaunch to a new market, this time with an interface that could properly express their vision.
The Ambitious User Base
The intricacies of the user base and research was handled by Product Management but the mandate was that the broad persona of “the online shopper” was our target user. The vision of Shop.co was to empower small online retailsers by bringing the “Amazon experience” of a single checkout to the entire web. The primary pain point of shopping from around the web would be eliminated: registrations at new sites with email confirmations and passwords to remember. That is a pretty exciting idea, and we hoped to make it a reality.
No Time To Waste
The company was created for this purpose, so there was tremendous pressure to design, develop, release, and then iterate quickly. This history has been compiled in hindsight as the actual development of this application was a frenetic process where whole aspects of the application could be reworked daily.
I was the sole user experience and user interface designer for the entire company, so all aspects of the UX, product design, and brand identity were my responsibility. This meant that from day one the UX was married to the UI - the development was one and the same and there wasn’t a lot of sketching on paper.
It Begins
Online shopping is built on trust. How do you maintain trust and confidence when checking out of several retailers at once, on the user’s behalf? How do you enable them do use different payment methods, discounts, and shipping addresses all in one cart?
All of these questions swirled around us as we began the journey of producing the universal cart. Prior to my involvement the company had produced a sidebar as part of their browser extension. This version only allowed the user to purchase one product at a time.
From Small Beginnings
I actually began the UX design process before I knew I had the job. I had been given a trial opportunity to do a one off project for the company, part of which involved dreaming from scratch what a universal cart could look like.
From this very first mockup I had made some assumptions that became concrete goals. We would develop a true dashboard landing page where users could manage all of their products in one single cart with a single checkout button.
Weeks later, when I was officially hired, the real work began. Discussions focused on what we called the “happiness page”, the screen where the user has their final satisfaction: a multi-retailer order completed.
I also initiated thorough research into the wide world of online checkout experiences. The (possibly) obvious results are that a good cart has:
Clear brand and product title prominently displayed
Large highlighted product photo
Key product attributes displayed
Pricing breakdown showing discounts, taxes, shipping, sub and grand totals
Clearly displayed shipping and billing information
In this application it was incumbent upon us to go several steps further by clearly displaying:
Each retailer as its own “basket”
Per-retailer summaries and totals
Order submission status information
The next iteration included all of this and more, you’ll even see the new logo in place and the beginnings of the design language.
Let’s Get To Work
Over the next few months we ran frequent user tests by offering paid sessions through online crowd source platforms to explore our interface on InVision. We also solicited research of the e-commerce market to better understand the challenges we were up against.
What did we learn?
Our target user was older (40+) due to this initial interface being on desktop, not mobile
Our interface should closely resemble Amazon due to its ubiquity in the space
Users expected second by second feedback on the progress of the separate checkout processes
There should be virtually no functionality lost by choosing to check out on our platform
The direct impact of the feedback was validation that we were headed in the right direction. Targeting an older demographic reinforced our desire not to not reinvent the online shopping cart, but to represent it in it’s purest form. User confidence can be earned when something feels familiar in the midst of a rather scary proposition: giving your credit card to a third party company and counting on them to do your shopping for you. The response we received was overwhelmingly positive with 90% of volunteer testers signing up for our launch beta. Our impending release would be open to over 4,500 users on day one.
The Make-over
After launch the feedback was loud: the interface worked great but lacked depth. Over the next 6 months+ we would pursue:
Order error handling
Live calculation of final costs
Scraping available shipping options and making them available in the UI
Automatic coupon application (powered by Honey)
We also engaged in a brand design overhaul to simplify the navigation menu and match with our marketing designs.
The Home Stretch
Development continued over the next few months with many feature additions. The most important UX challenge was that of making the universal cart properly responsive - not just for low resolutions but all the way down to mobile. This change involved many prototypes to ensure consistency across all screen sizes while maintaining full functionality and visibility of checkout options.
The next release came with significant fanfare and positive user feedback, most notably for the fully redesigned browser extension. The universal cart had finally reached a level of quality and completeness that made it truly a superior shopping experience.
Finale
In the end the Shop.co universal cart nearly reached 20,000 active users with growth on the horizon. The feature set had grown significantly and and many more amazing features were on the way when the core investment team chose not to continue on the long road to monetization. The company and technology were sold to the European online payments giant, Klarna.
Working with Shop.co was my first formal experience as a user experience designer, and it was a wild ride. I learned much about how to research, test, design, and articulate a software interface. I wished greater things for this incredible application, but I am still extremely proud of where I was able to help the company take their vision.
