Enhancing Product Bundling Clarity, Promotions, and Value on the Telkomsel Orbit Website
Experience Design, Visual Design

Overview

Helping users make better purchase decisions through clear product bundles and balanced upselling.

Telkomsel Orbit offers various device and data plan bundles, but users often struggled to compare them and understand what each bundle included. I worked on redesigning the Orbit product detail and bundling flow to improve clarity, highlight value, and guide users toward the right purchase without overwhelming them. This included clarifying copy, optimizing layout, and structuring promotional content more thoughtfully. The improvements led to better communication of Orbit's bundled offerings and a smoother buying experience.

Duration: September–October 2023 | Company: Aleph Labs Indonesia | Client: Telkomsel Orbit, a portable internet and WiFi provider by Telkomsel, one of the biggest telecommunication companies in Indonesia.

Background

Telkomsel Orbit, a leading portable internet and WiFi provider, offers a range of products on its website, including modems and data packages. In addition to individual product offerings, Telkomsel Orbit also provides modem and smart device bundling options to cater to diverse user needs. The current system follows a hard bundling approach, restricting users to predefined bundles available in the product bundling section.

Screenshot of the current Telkomsel Orbit product catalog and product detail page, showcasing the rigid hard bundling system where users are limited to predefined modem and smart device combinations.
Existing hard bundling section. Product catalogue to product details page

Recognizing the need for greater flexibility and customization, Telkomsel Orbit has initiated a project to transition from the rigid hard bundling system to a more dynamic add-on system. The goal is to empower users, allowing them to combine modems with a variety of smart devices according to their preferences. This new approach also enables users to set the quantity of smart devices they want, providing a personalized and tailored shopping experience.

Challenges

The transition to an add-on system presents unique challenges due to several constraints within Telkomsel Orbit's business model. Notably, the company sources modems from various distributors, each with distinct capabilities and offerings. A key challenge arises as not all modem distributors provide smart device bundling, and even when they do, the pairing of modems and smart devices can vary.

This complexity results in a scenario where not all modems are eligible for smart device add-ons, and similarly, not all smart devices are compatible with every modem. Complicating matters, smart devices can only be purchased in conjunction with a modem, precluding standalone purchases.

Diagram illustrating the bundling scheme between modems and smart devices, highlighting the compatibility constraints and the necessity for certain modems to be paired with specific smart devices.
Example of modem and smart device bundling scheme

The points that should be addressed in the design, to ensure a seamless and non-confusing user experience, based on those constraints are:

Final Solution

Addressing both the identified challenges and user feedback from the testing, here is the final design solution:

Mockup of redesign result: Clearly conveys modem compatibility  By utilizing the "Bundling Hemat Label" to indicate which modems support smart device add-ons and which do not.
Mockup of edesign result: Mitigating confusion during modem switches  By encapsulating the options within 'Frequently Bought With,' presenting users with choices optimized for the selected modem to eliminate unexpected changes.
Mockup of redesign result: Explicitly conveying smart devices' exclusive availability as add-ons to modems by strategically showcasing mart devices option below modems.
Mockup of redesign result: Explicitly conveying smart devices' exclusive availability as add-ons to modems by guiding users to select a modem before proceeding to purchase the smart device.
Mockup of redesign result: Balancing promotion of combined purchases by strategically showcasing smart devices below modems. without overshadowing hem as main selling points.
Mockup of redesign result: Effectively communicates the bundling value  By providing smart device specifications that are complemented by the support and operation facilitated by Orbit Modem.
Mockup of redesign result: Enabling cost comparison by featuring copy that emphasizes added value Clearly highlighting the incremental cost to acquire both the modem and smart device together.

Throughout the user journey, from the homepage to the product detail page, the focus remains on selecting the modem and optional smart device add-on. Users can adjust the quantity of smart devices in the cart or during checkout, prevents overwhelming users with too many choices upfront and simplifies the initial decision-making process.

For a visual walkthrough of the entire journey, including discovery and purchase of modem and smart device add-ons, please watch the video below.

Selecting Modem & Choosing Smart Device Add-on

Selecting Smart Device & Guide User to Choose Modem

We're moving ahead with the design, set to develop it in the upcoming sprint. The client is fully on board with the final design, and we've taken care to address all their concerns, making sure it's easy for users to navigate. While we're still waiting to see how users and business sales respond after the rollout, it's always good to celebrate the small wins, like having the client excited about the direction we're heading.

My Contribution During the Design Process

Landscape Analysis

In collaboration with a UX researcher, we conducted a thorough analysis to lay the groundwork for our design solution. Our benchmarking involved examining bundling sections across various websites and apps, revealing three pivotal elements:

Screenshot of product detail page benchmark in Amazon and Ugreen  hich consists of bundling value, price comparison, and bundling item specification

Designing the Solution

The design process is guided by key challenges identified through our understanding of the business and the landscape analysis, which are:

Clearly Communicating Modem Compatibility. The design must communicates which modems support smart device add-ons and which do not.
Avoiding Confusion During Modem Switch. The design must prevent user confusion when transitioning between modems, ensuring a seamless experience without unexpected changes in smart device add-on visibility.
Displaying a Smart Device List. The design must showcase a list of all available smart devices, explicitly conveying their exclusive availability as add-ons to modems.
Balancing Promotion of Combined Purchases. The design must balancing promoting the combined purchase of modems and smart devices while maintaining a primary focus on selling modems.
Communicating Bundling Value. The design must communicates the bundling value, highlighting functionalities that work in tandem between the modem and smart device.
Enabling Cost Comparison. The design must allow users to compare the cost-effectiveness of buying a modem with a smart device bundle versus purchasing a modem alone.
Providing Specifications. The design must convey specifications for both the main product (modem) and its add-ons (smart devices).

Beyond revealing crucial elements from other websites' bundling sections, the landscape analysis served as a foundation for the initial design concept. I translated these ideas into tangible form through paper sketches, facilitating a faster visualization process. I then brought these ideas to life, transforming them from paper sketches into polished digital designs using Figma.

Comparison of my design ideas in paper sketching and translated to digital design in Figma

User Testing

In the user testing phase, our aim is to assess how users respond to the designs, ensuring clarity and preventing any confusion in their experience. During user testing, my role is that of an observer. I closely observe users as they interact with the designs, learning from their feedback and understanding how they navigate through the end-to-end modem & smart device add-on purchasing prototype I've prepared. Based on the feedback received during user testing, we implemented several changes. These adjustments were instrumental in refining the design, resulting in the version you see in the final solution.

Design Documentation

Once the design is finalized, it's equally important to create a detailed and high-fidelity flow. This serves as a comprehensive guide for all stakeholders, providing a clear understanding of the end-to-end process using the Figma file structure I have crafted for the project. I utilize this detailed flow during stakeholder discussions, guiding them through the intricacies of the design. It acts as a visual roadmap, facilitating collaborative discussions and ensuring a shared understanding among all involved parties.

What I learned throughout the process

🕸️ Decomposing complexity

Breaking down complex challenges into manageable components proved crucial. It helped in addressing each aspect systematically, leading to more effective problem-solving and solution development.

⚙️ Adapting to unique constraints

The project emphasized the significance of adaptability when faced with unique constraints. Adjusting and learning from similar, though different, examples in the industry allowed for innovative solutions within specific business limitations.