Behind the scenes
What mammoth hunting has to do with page speed
by Michael Rudin
Team Goldfinger – here to check you out
31.10.2019
Pictures: Thomas Kunz
Co-author: Rico Schüpbach
Checkout is an integral part of every online shop. It's the part that's not allowed to break. Today we'll take a look at the past, present, and future of the checkout page on digitec and Galaxus as well as the engineering team behind it: Goldfinger.
Our customers are surely familiar with the checkout page on digitec and Galaxus. The design of the page has remained almost unchanged for several years. And why would we change it; it works well. And it’s generally easy to use for our loyal customers who are used to it. However, customers who visit the shop for the first time might be put off by the dense design and the large amount of text on the page. In other words, we decided it was time for a facelift. And while we’re at it, let’s update the technology stack behind the page as well.
The team
Team Goldfinger is one of the longest-serving Scrum teams at Digitec Galaxus AG. However, its lineup has changed multiple times during its existence. The team is responsible for subdomains which are prominently visible to customers, namely the Ordering Process and the Order Display. In addition to the checkout page, this includes components such as upselling, shopping cart, registration of new customers as well as order overview and order detail pages – to name just a few. The team consists of backend and frontend developers, a team lead, a product owner, a user experience designer and a scrum master.
Goldfinger is a feature team: its job is to develop new features in its domain with the goal of improving the online shopping experience for customers – or as the team’s mission statement conveys: «We gild the act of shopping for our customers. Before, during and after.»
The challenge
The checkout page faces some unique challenges compared to the rest of the shop. The main challenge is availability. To put it bluntly: the checkout page is not allowed to break. Even a short period of unavailability can result in significant financial losses due to missed sales. To prevent this, changes in checkout are subject to thorough quality assurance. However, sometimes things go wrong. And when they do go wrong, it’s vital that the issue is resolved as quickly as possible. To enable fast reaction, team Goldfinger works with various logging, monitoring and alerting tools. When an issue in checkout appears, members of the team are made aware of it via alert messages by e-mail or chat. After an initial analysis by one of the team members, the issue is either solved with a hotfix or delegated internally to the responsible engineering team. Thanks to the modern deployment pipeline used at Digitec Galaxus AG, the team is able to deploy software changes very quickly to the production servers on which the online shop runs. Indeed, it might come as a surprise to our customers that our shops change multiple times every day, as new features, improvements and hotfixes are deployed.
Hand-in-hand with availability comes another central challenge: scalability. Checkout has to work – be it on a slow Tuesday evening or just after midnight on Black Friday. Large numbers of simultaneous page visits by customers, many of whom are after bargains with limited availability, present us with unique technical challenges. In preparation for this year’s Black Friday, the team is running load tests based on traffic predictions. This is necessary in order to recognise weak points and develop an understanding of the thresholds and the capability of the system. After the test results are in, improvements for the identified issues are discussed, designed and implemented.
The vision
Updating our checkout is an ambitious project with several objectives. We strive to make the experience more straightforward, more enjoyable and less confusing to our customers. At the same time, we want to reduce the load on our servers. By updating the technology stack behind the page, we will reap the benefits of modern client-side technologies. Oh, and did I mention the page needs a speed boost as well?
«So, what does this mean in practice?», you say. Well, we’re glad you asked. Let’s begin with the layout. The old checkout is one long page with lots of text and plenty of buttons. In the year 2019, this isn't good enough. The trend in modern web user interface design is pointing towards cleaner and larger elements with space around them and as little text as possible. Indeed, instead of a single large page, we strive to guide our customers through the checkout process one step at a time.
As a part of the «isomorphisation» process of our online shops, the checkout page moved to the era of React, Typescript and isomorphic rendering earlier this year. Amongst other things, this has allowed us to move certain non-critical parts of the code to the frontend, thereby benefiting us in two ways: reducing the need for communication between the client’s web browser and our backend as well as making the user interface faster for our customers. A further benefit for Goldfinger is that future code changes will be easier to implement.
Throughout the whole process, we should not forget that the checkout page involves certain trust factors. It is, after all, a page where the customer types in confidential information such as address, phone number and credit card details. If the page is changed too radically from one day to the other, customers might feel uneasy and think something fishy – or should I say phishy – is going on. To avoid this, the changes will be carried out in steps over an extended period of time.
User experience in focus
A lot has changed in the web during the last several years. Nowadays, mobile devices are front and center in everything that we do. Every UI change is tested on several browsers and screen sizes. The experience has to be excellent on anything from a 34-inch widescreen monitor down to the smallest smartphone screen. To ensure this, the team works in close collaboration with our in-house user experience specialists.
We sometimes go to great lengths to provide a good experience to the customer. Here’s one example: You might have noticed that when you mouse over an order on the order overview page – where all your old orders are listed – GraphQL queries are sent to our shop’s backend, which fetches delivery details and payment details for this order. The answer from our servers typically arrives in about 200 milliseconds. As soon as it does, it’s saved to the local cache of the customer’s web browser. Then, a blink of an eye later, as the customer clicks on the order, instead of having to query the database, we retrieve the information from the browser’s local cache and render the order detail page – with lightning speed. It’s the small things that matter.
Another example of user experience driven design is the «tunneled» version of the checkout that team Goldfinger tested earlier this year. In the tunneled design, the left and right columns of the checkout page as well as several elements at the top were not visible on the screen. The expectation was that the cleaner design would be more appealing to the customers, allowing them to concentrate on the task at hand: completing the checkout process and closing the order. The performance of the tunneled design was measured with a so-called A/B test, in which the tunneled design was displayed to 50% of the customers on both digitec and Galaxus. However, it did not perform as the team had hoped – indeed in the A/B test the traditional design won by a small margin. Even though this was a surprise and a disappointment to the team, we should take into account that, according to research conducted by Google, most A/B tests fail to show improvement. After the A/B test ended, the tunneled design was rolled back and taken back to the drawing board.
By the way, we are currently A/B testing the new design of the checkout. But don’t be surprised if you don’t notice a difference. It just means that you are in group A.
Petri Harju
Software Engineer
Petri.Harju@digitecgalaxus.chSoftware Engineer. Scrum Master. Skeptic.
2 comments
later