Continente Online Checkout

Continente is the largest retailer in Portugal and Continente Online is the company’s e-commerce website.

Due to its multi-store nature and wide range of products, in 2014 the Continente Online checkout needed an upgrade to provide a more intuitive and efficient user experience, while delivering more functionalities required by customers and business.

Empathise

• E-commerce stores benchmark, with similar and different businesses.
• Customer support contacts, either suggestions or complaints, to identify and understand pain points.
• Web analytics data, to understand the user shopping behavior.
• Customer journey mapping with the full website flow, core metrics and pain points.

Define

Point of View Problem Statement

(dummy data)

Ideate

“How Might We” Questions

• How might we inform customers about different lead times before and after adding products to the cart?
• How might we improve the checkout to make it more efficient and quick?
• How might we turn the order sum parcels easier to comprehend?
• How might we highlight the advantages of the loyalty card?
• How might we improve the loyalty card coupons selection and benefits?
• How might we provide an easier way to select payment methods and use loyalty/gift card balance?
• How might we improve the order submitted page to give relevant information and options?

Brainstorming and Challenge Assumptions

The Brainstorming technique was used multiple times to gather new ideas and approaches to the challenges we had. Writing and discussing these ideas ended up revealing, over time, which way to go.

During brainstorm, we found some barriers that seemed impassable. Whenever possible we challenged assumptions by talking with team members or other departments that knew these topics better or from a different angle, and questioned them if we could follow another path. Most of the time we found that the initial assumptions didn’t exist or that the experience could be improved.

Sketches

I can’t show the dozens of sketches that were made on paper and whiteboard, but this was crucial to explore better solutions and approaches that wouldn’t work further ahead, before starting to prototype.

Prototype

Typography and color

User Flow

Although the main focus was the checkout, we wanted to test the prototype with real customers. This way, to put the user in context, we needed a product grid page, to allow adding products to the cart before moving on to the checkout. After submitting the order, the customers could also check the order confirmation email and/or the order detail page in the account.

Prototyping

Axure RP was the tool of choice because I needed to build a fully functional cart and checkout for desktop (the site was not responsive/adaptive). These were the requirements for the prototype:

• Add products to cart.
• A working cart and checkout that did all the calculations when products where added, removed, quantity changed, and coupons and loyalty/gift card balance was applied.
• Order summary during all the checkout.
• Checkout detail and delivery page with:
  • Single or multiple shipments.
  • Delivery method selection (address or pickup point).
  • Delivery address creation and selection.
  • Delivery slot selection.
  • Loyalty card association.
  • Direct promotions and loyalty card savings.
  • Products quantity management and picking notes insertion
• Checkout payment
  • Loyalty card association.
  • Loyalty card coupons selection.
  • Manual coupons insertion.
  • Loyalty card balance redeem.
  • Gift card association.
  • Gift card balance redeem.
  • Payment method selection.
  • Saving the credit cart to the account.
  • Billing address presentation and selection.
• Checkout confirmation
  • Summary of all the order, including products, delivery and payment
• Payment gateway page
• Order submited
  • Link to order confirmation page
  • Pickup point map presentation
  • Add delivery date to calendar
  • NPS rating
• Orders history
• Order history detail

Test

We tested the prototype during days with real customers, in a one way mirror lab, recording the screen and audio, and using eye-tracking technology to measure eye movement while interacting with the prototype.

I attended all the usability tests, during which I made real-time changes to the prototype to fix issues pointed by users and test them again with the following customers. Another advantage of watching the tests was that I was able to see first hand how they reacted and felt while using the prototype. It’s an exercise of humility to see users criticizing your work, but it’s the moment of truth and you have to accept that some things will work differently from expected.

This prototype was also used as a deliverable to development team, making a lot easier to understand the requirements and the specificity of some interactions. Despite the high complexity of this checkout process, the development went smoothly.

After development, I made extensive usability tests to guarantee that the final experience followed the defined requirements.

End result

In the end, customers had a better understanding of all the options and order values, and quicker access to the core options of the checkout, providing a more efficient, trustful, intuitive, and pleasing buying experience. Since the deployment, we saw a big improvement in customer satisfaction, a substantially higher conversion rate, and a reduction of the time spent on the checkout pages.

This project was very challenging but really satisfying:

• In the Empathise phase, I did the benchmarks, gathered all the web analytics data, contributed to the customer journey construction, and analyzed all the data to understand our customers and their needs/problems while using our website.
• In the Define stage, I worked with my area manager to identify the core problems and needs of the customers and business
• The Ideation was a work mainly done with my area manager. We had dozens of sessions to generate ideas and identify solutions and, whenever necessary, I drew paper/whiteboard sketches to help us realize the feasibility of these solutions.
• The prototyping was all done by me. Axure RP is very powerful, but this was a very complex prototype that needed to work with dynamic data and dozens of variants, across multiple pages.
• Before proceeding with the tests, I presented the prototype and rational behind our decisions to our board member.
• The test methodology with our customers was defined by our market research department. My role was to help in the definition of the test script, clarify any doubts during the tests, and implement fixes. At the same time, collected customer feedback has a learning process.
  After delivering the prototype to the development team, my role was to explain the experience and clarify any doubts to the tech team and do usability testing after development and go-live.