Smart Checkout

Reinventing the e‑commerce checkout experience through user‑centered design

The e-commerce market in Brazil today is quite different than what it was in 2010. A smaller market, with less players and mobile adoption in it's infancy, the e-commerce solutions available were unsophisticated and unfriendly to users.

Back then, our platform was no exception, unfortunately. Looking at this scenario, we decided to remake our checkout from scratch, to improve user experience and increase conversion for the stores in the platform.

At the same time, VTEX was also studying a change in its business model. With a growing market and more customers joining the platform every day, our recurring revenue was increasing and we took a major decision: stop charging setup fees and start taking in only a percentage from each store's revenue.

Our customers were becoming our partners.

By attaching our revenue to the conversion of each store in the platform, improving our checkout stopped being just a priority to become critical.

After a long design process, between mistakes and lessons learned, we released Smart Checkout, our online checkout without password, that increased conversion for our stores up to 40%.

Smart Checkout — Highly customizable single-page checkout with no password

No Password?!

The concept of buying online without the need for a password was the main driver behind the product. It seemed absurd trying to change something everyone seemed as a necessary evil. Even inside the company there was conflict: while some people were excited with the change, others insisted in staying within their comfort zone.

We were very sure in this belief, however — that the password is the biggest roadblock in a good online shopping experience and a conversion killer. So we went all in on the change.

In the article Como matamos a senha na compra online (in portuguese), Rodrigo Muniz explains how we aligned critical security expectations with good usability and transformed this idea, once absurd, in a must-have.

Starting off on the wrong foot

The idea for the password-less checkout came upon in late 2010 and was developed in two versions of the checkout until being released to the market in 2013.

The starting premise was to make the checkout in a single page — a single-page application using Knockout JS, the best front-end technology available at the time.

The first version went into testing in 2010, but went kinda wrong. Even though it considerably improved conversion for the stores that migrated to it, this checkout used the old back-end from platform and mantaining and evolving its code became untenable. Even though we ditched it, this first version showed there was still plenty of room to evolve and deliver value to our customers.

It was time to really start from scratch.

The empirical phase

The initial conceptual, prototyping and development phase was quite empirical. The resources to describe the problem came mainly from observation and analysis of what the market offered at the time, even stuck to old models. The vision from our co-CEO was also essential to define the premises that are today at the heart of Smart Checkout.

Some problems were quite evident and started to be solved right away:

  • The classic choice between “I’m a new customer” and “I already have an account” was removed. In a simple way, we asked for the customer’s e-mail and let them follow the purchase filling in information only when necessary.
  • We aggressively reduced the number of fields needed to finish the purchase. No “date of birth” or “gender”, common fields in other checkouts at the time. We took the same minimalistic approach to overall information on the screen.
  • The checkout process was condensed to the maximum: the whole purchase was finished in a single page.

The first UI solutions took shape in prototypes build in HTML/CSS, Javascript and PHP. We arrived in a version that we decided to be good enough and then decided to evolve the prototypes with the developers, collaborating closely and directly in the code.

Testing with a store in Beta [2011]

In a few months we had a working version of the new checkout. Our expectations were to gradually, but swiftly, migrate all 300 stores in our platform. The risks were sky high: their businesses were at stake, as well as their customers’ satisfaction.

With a single designer and a few developers in the team, everything we had built was based on our background and market references (almost inexistent). We hadn’t presented, evaluated, tested or measured anything, which means we had no idea if the proposed solution would actually work and would be adopted. We needed to change this or VTEX credibility and customers would be on the line.

Doing it right

VTEX received VC investment in 2013, which increased the available resources and allowed the design team to grow really quickly. This took us to the second step in the process — bigger, better and more complete.

With this team in place, we structured a methodology to rapidly evaluate and improve the solution, seeing the whole company was expecting the launch. At this point, we had two clear objectives: figure out if users were able to buy using the new checkout and identify the main flaws in the process.

The need to do usability testing was obvious, but before that we had to kill most of the low-hanging fruit usability issues — the ones we were already aware of. We decided to follow a methodology with the following steps:

  1. Evaluate the UI following Baymard guideline criteria;
  2. Run a heuristic evaluation with 4 designers and 1 conductor;
  3. Define user profiles;
  4. Apply usability tests;
  5. Apply a user satisfaction survey.

Baymard Guideline

Baymard is an e-commerce research institute. They offer an extensive material, with dozens of reports, result of an evaluation with over 100 online stores in the world.

For our project, we selected their report with 63 usability recommendations for checkout. They were gathered through a study that tried to answer the following question: “Why do 67% of users abandon the checkout?” To that end, they did tests with 15 online stores that presented over 520 usability issues.

Baymard Report

Some of the recommendations didn’t really apply to our product, such as defining with clarity the name for each shiping method, something that’s the responsibility of store owners in our platform.

Some of them we disagreed with, like “requesting filling e-mail address confirmation” and “not allowing copy and paste on the email confirmation field”. We thought more productive to request filling the email only once and let customer support solve any issues that arose.

Of the full checklist, followed 57 recommendations, some actually relevant such as “asking for each piece of information only once” and “not using generic labels on buttons”.

An obvious issue: fields had no labels, only placeholders

Others showed we were ahead of the study in some aspects, like when they recommended “making ‘Anonymous Checkout’ the most prominent option” — a concept that no longer made sense in our checkout.

Our checklist from the Baymard guideline

Heuristic Evaluation

The next step was assembling the knowledge from the 5 designers of the team to propose improvements in a more structured way — through a heuristic evaluation.

To identify problems, we adopted the Bastien & Scapin’s 8 ergonomy criteria (in portuguese), that include Conduction, Consistency, Adaptability, among others.

With the problems in hand, we followed the Nielsen scale to define how critical each of them were, following three factors: frequency, impact and persistency.

The evaluation was made in just a week and the results were surprising, showing lots of problems:

  • Catastrophic (urgent correction): 9
  • Grave (high priority): 30
  • Simple (low priority): 17
  • Aesthetic (optional): 5
In the final list, problems were color-coded according to their status

We also found 17 bugs — disappearing information, incorrect data validation and system errors.

The evaluation showed the communication used in the UI needed to improve a lot: there were few instructions, validation errors were not well informed and similar functions were described in different ways.

This process was vital to question design premises created and implemented in the first prototypes made. The criticism effort we made was enough to guarantee even the most “obvious” parts of the product were challenged, with overwhelming positive results.

All the problems were attacked with the development team and 85% were solved, including all the catastrophic ones.

Usability Testing and QUIS

When we reached this point, most of the checkout issues were already solved, but we still had doubts if the product indeed met user needs, as the techniques used so far had no direct contact with users.

The usability testing was the team’s biggest challenge, seeing none of us had applied a formal test before. It was a great learning experience 😄

We did the tests in one of the office’s meeting rooms and used software to record the screen and user faces. Renting a usability lab with one-way mirror would be too expensive and we figured it wouldn’t be worth the cost (we later found out this was the right call).

We started defining user profiles using the Technographics methodology (in portuguese). None of the profiles had a significant impact in the test results, but slicing the audience in different profiles was useful at least to show the Smart Checkout could be successful with every audience.

Profiles defined to make the test more accurate

Recruiting was done in-house: we asked VTEX employees to invite their relatives to fill a basic online survey to take part in the test. As a reward, we gave a pair of movie tickets, including popcorn and soda. For some reason, the number of applicants ended up much larger than we expected…

The materials for the test we prepared tried to sistematize whatever was possible to reduce margin for errors in the test and make participants confortable (a small script to break the ice, etc).

Test scenarios and documentation

At the end over 20 tests were applied, and they allowed us to solve fundamental problems that remained in the checkout flow.

The second purchase did not work

We wanted to deliver a single checkout experience, regardless if it was the first purchase or not. No matter how noble our intentions were, they led us to ignore important differences from each moment. It was needed to highlight returning customers that they wouldn’t have to input their data again, but they would be retrieved safely informing just the e-mail.

The solution was simple, but the decision, hard: we had to drop the single-page checkout due to the e-mail field, that needed to be in a separate screen. We swallowed our pride and moved on.

It was impossible to deal with login

In the second purchase, to see or change any customer information, a confirmation code must be sent to the user’s email. For that to happen, the user was sent to another page that showed instructions and asked them to log in. This page was necessary, but it harmed more than it helped, as it made users lose context and get lost in the checkout flow.

Test with login screen without context

The ideal solution was to separate the login in a modal overlay on top of the checkout — a solution that brought some technical challenges due to the way our authentication was done at the time, but it was a highly critical problem that was worth the effort.

Problem solved: the hardest part was outside of the checkout

Launched!

The first few days were tough, with constant instabilities, but the new checkout quickly showed itself much superior than the previous — we tracked the Google Analytics conversion funnel to see key problems and improve the purchase flow, as well as add new functionalities over time.

Our objectives were met: we improved the buying experience for thousands of people and increased store conversions on an average of 20%.

As clients became confident and migrated to the new Smart Checkout, we saw the market changing and developing solutions “inspired” in our format (well, sometimes too inspired). We became market reference.

Lessons

You have to question your solutions, always. Working as a team, we saw many of our individual beliefs go down the drain when questioned or confronted by the collective. Different opinions, when pointed at a common objective, add to each other and reveal new possibilities.

This process was essential to build the product, with the evolution obvious at each step. We realized it’s necessary to have a clear vision of where we’re headed to decide how we want to arrive there.

Today we invest tons of energy in these two pillars: team and process. Making great digital products has less to do with designing UI or shipping code and more with growing the team that will build and mantain the product in a consistent way. Constantly questioning and reinventing our processes is an essential part of this.

We believe that’s the way to go always above and beyond our objective of building digital products.

Wanna know the people behind all of this?

get to know the team

Site making-of