Yettel
2024
Yettel Netshop checkout redesign
Redesigning Yettel's online checkout to make buying and contracting faster, clearer, and easier to complete
Overview
Yettel Hungary asked us to fully redesign the checkout flow and the customer journeys of their Netshop. The old system caused significant conversion loss, so the goal was a shorter, faster and more customer friendly flow.
Around 80% of purchases happen on mobile, so the redesign was built with a mobile first approach. Checkout here is not only a purchase but also a contracting process, so the flow had to carry the legal requirements and the business terms without getting the user stuck.
My role
As product designer I worked on the project from research and concept creation all the way to the full UX/UI implementation. I worked together with two designer colleagues at Virgo, the Virgo development team, the client side designer, Yettel's long standing internal development team, legal experts and several departments of the client. We ran the user tests with Testbirds.
It helped that I had redesigned and optimized Yettel's web, mobile app and TV interfaces before, so the underlying logic, the brand appearance and the design system were already familiar to me. As preparation for this project I was also responsible for the redesign of the cart page.
Challenges
Looking at the whole customer journey
To optimize the flow we had to look at the entire customer journey starting from the product page, because many of the problems that surface in checkout are decided earlier. As preparation we also redesigned the cart page, which laid the ground for the new flow.
Handling many customer journeys and product types
The same flow had to serve prepaid users and monthly subscribers alike, across a wide range of services, tariffs and SIM types. On top of that came identification, new and existing customers move along different paths, so registration and log in had to be handled as part of the flow.
Online flow vs offline experience
Since this is a contracting process, the online experience had to be in line with what customers get in Yettel stores, while legal compliance could not be compromised.
The down payment as a conversion risk
In the old system users only learned about the down payment at the very end of the flow, which caused serious frustration and drop off. We had to communicate the amount transparently and as early as possible, while still meeting the business requirements.
Design solution
1. Research and discovery
UX/UI audit
We analyzed the strengths and weak points of the old checkout and identified the usability problems the new flow had to solve.
Interviews with Yettel sales colleagues
We interviewed sales colleagues to understand how contracting works in Yettel stores. This showed us what questions come up in person, what the salesperson explains, and where the same support is needed online.
Competitor analysis
We reviewed in detail how telecommunications companies and other players in similar industries handle online purchase and contracting flows.
2. Concept creation
We developed several concepts for the new checkout. One key principle was breaking the flow into shorter, clearly readable steps, so called step cards, so that the user can focus on one task at a time.
Another key principle was real time validation and error handling during the flow instead of at the end, as it worked in the old system. This approach significantly reduced user frustration, because errors became visible and correctable right away.
3. UX/UI design and prototyping
During the design phase we worked out the following key solutions:
Mobile first solutions
Automatic data loading, optimized input fields and error handling mechanisms support faster and more accurate form filling. We placed additional information and FAQs in bottom sheets so they do not interrupt the flow.
Customer identification and customer specific flows
We adapted the log in and identification steps to the different situations of new and existing customers, taking the specifics of the selected products into account. This meant designing a number of customer journeys and flow variations.
Down payment calculation
We examined the down payment from several angles. We created and validated multiple concepts with customers, for example whether the calculation should be a standalone flow or appear at the point where enough data is available to calculate it. In the final solution the user learns about the amount in time and in an understandable way, supported by content that explains what the amount means and how it fits into the purchase.
Number portability and SIM handling
We made number portability, choosing a new number and SIM handling simpler and more transparent. We clarified the difference between SIM and eSIM, and designed the flow so that this information appears exactly when the decision has to be made.
Billing
The flow handles the available billing types, including electronic and paper based invoices, as well as billing as a private individual or as a company.
Delivery
We designed several ways to receive the order, including home delivery, pickup points, pickup in a Yettel store, and an optimized map based pickup point selector with location detection.
Payment and order summary
We optimized the payment options and made the summary page easier to read.
Support features and content
We paid close attention to UX copywriting. We also integrated video chat into the flow so customers can get direct help if they get stuck.
Legal and marketing consents
We broke the handling of consents into steps to reduce the risk of drop off, and improved the wording of the declarations with UX copywriting.
4. Usability testing and iteration
We built a clickable prototype and tested it with users through Testbirds. Our hypotheses covered the clarity of the down payment calculation, entering document data, and how understandable the new flow is overall. We refined the flow further based on the feedback.
5. Development support
We worked with the development teams up to launch. Design handoff, regular meetings and prototypes supported the implementation so that the intended experience made it into the final product.
Results
The new checkout went live. In the redesigned flow customers reach the end of the purchase faster and more smoothly, which contributed directly to better conversion figures. The optimized forms and data entry steps reduced the number of possible errors and the drop off rate of the flow.
