Enhancing Product Bundling Clarity, Balancing Promotions, and Delivering Value on the Telkomsel Orbit Website
Experience Design, Visual Design
šļø Project Overview
Role: UI/UX Designer
Duration: Sept - Oct 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.
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.
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:
The design must effectively communicate which modems support smart device add-ons and which do not.
The design should avoid confusion during modem switch, prevent user confusion when they examine a specific modem, observe its smart device add-on option, and then switch to a different modem where this option is not visible.
The design must display a list of all available smart devices on the website. This list should explicitly convey that these devices are exclusively purchasable as add-ons to modems.
The design must strike a balance between promoting the combined purchase of modems and smart devices while maintaining the primary focus on selling modems and data package.
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:
Bundling Value: Typically, bundled products are grouped by functionalities that work in tandem and they are chosen for their complementary features.
Price Comparison: Comparing the cost of bundled products with standalone items, we observed that bundling is generally more cost-effective. Unlike our benchmark products, where prices are clearly visible for both bundled and individual items, Telkomsel Orbit's model restricts this visibility as smart devices can only be purchased together with modems.
Bundling Item Specification: It is important to provide users with detailed specifications for both the main product and its add-ons.
The pivotal elements on product bundling; Bundling value, Price comparison, Bundling item specification
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.
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.
Final Solution
Addressing both the identified challenges and user feedback from the testing, here is the final design solution:
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.
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.
.png)
.gif)
