Unitymedia - Rebrushing a checkout process
Unitymedia is a popular cable operator company based in Germany. They wanted to rebrush their e-commerce checkout oriented to Business clients and my role was to restructure their checkout process, making it more effective and quicker.
I made this rebrush in 2016 during my internship at Sinnerschrader. This project is very important to me as it was my first relevant UX task.
STARTING POINT
The checkout process was broken down into 3 different blocks to better accommodate
three distinct phases of the visitor journey: pre-checkout, checkout, and post-checkout.
The intention behind the changes that were promoted in the screens was to preserve the experience that customers have in traditional e-commerce, where they choose the products they want to buy before proceeding to the checkout screens, but also to reduce points of friction by reworking the visual hierarchy of the elements in all pages, increase the clarity of the information available to visitors, and also heighten the motivation to finish the process.
Checkout Restructure
Pre-checkout (Original version)
Main issues:
1. Progress bar with too many steps, forms with unnecessary questions throughout the process.
2. Extensive copy, hard to read due to line breaks.
Pre-checkout (Rebrushed version)
Solution:
Added Availability check-in a lightbox, before the checkout starts to act as a filter to improve clarity. If the visitor fills in an address where the service is not available, the checkout process does not start.
Pre-checkout – Shopping cart overview (Original version)
Main issues:
1. No option to edit or delete the selected product.
2. Removing a cross-selling product from the shopping cart is not easy. The visitor has to click the radio button of the wanted option and then click the “Mobilfunk-Auswahl aufheben” link.
3. It is hard to understand which product is inside the shopping cart and which product is part of the cross-selling section.
Pre-checkout – Shopping cart overview (Rebrushed version)
Solution:
1. Added edit and delete options to reduce friction. The buttons allow for faster customization of the selected product without removing the visitors from the current page.
2. Products are now easier to upgrade in the shopping cart.
3. Everything selling and upselling related was colored in light blue. Visitors can easily identify what elements on the page are promotional content and not part of the default package they chose.
4. Specific and consistent CTA color in the shopping cart for the entire visitor journey, removing friction and doubts when the visitors just want to keep moving forward.
Checkout – Step 2 of 6 (Original version)
Main issues:
1. The label “Adressangabe” does not describe the section content very well.
Checkout – Step 1 of 2 (Rebrushed version)
Solution:
1. Checkout progress bar reduced to 2 steps using numbers to offer orientation to the visitor. The motivation to fill the form tends to be higher with a reduced amount of steps when compared to the original version.
Checkout – Step 4 of 6 (Original version)
Checkout – Step 2 of 2 (Rebrushed version)
Post-checkout – (Original version)
Main issues:
1. No order confirmation after the end of the checkout.
Post-checkout – (Original version)
Solutions:
1. Reassurance of the accomplished tasks through the order confirmation message
2. Added Tip about the next steps.
3. Added video about the purchased product. As the customer will not receive his order immediately, this element serves the purpose of offering instant gratification in the form of a short, emotional film on the improvements that the product can promote in the users’ life.