Telkomsel: Website E-Commerce Revamp & SUS 94.50 Leap^®

1. Project Overview: The E-Commerce Conversion Crisis

Telkomsel is Indonesia's largest mobile network operator, serving over 170 million subscribers nationwide. Despite attracting more than 4 million monthly visits, Telkomsel.com functioned primarily as a marketing billboard rather than a transactional platform. Users arriving with clear purchase intent (to buy a data package, order a new SIM card, or configure a device bundle) regularly abandoned the site before completing checkout. The engagement-to-conversion gap was stark: high traffic, negligible online sales. Three systemic breakdowns drove this failure.

• Fragmented Architecture: Core transaction paths (data packages, SIM ordering, device bundles) were buried across disconnected sub-domains with no unified purchase flow.
• Desktop-First Legacy: Despite 94% of visitors arriving on mobile browsers, the website was engineered and optimized for desktop interactions.
• Opaque Checkout: Hidden fees, ambiguous quota terminology, and multi-step redirects caused users to abandon at the point of highest intent.

Telkomsel.com Revamp: Re-engineering core transaction flows for data packages, SIM cards, and device bundles across Indonesia.

2. Design Thinking Process & Agile Sprint Framework

To systematically dismantle user friction and validate solutions with real behavioral data, we adopted an Agile Design Thinking approach across five iterative phases executed over 7 months in close collaboration with Telkomsel product stakeholders: Empathize, Define, Ideate, Prototype, and Test.

Agile Design Thinking Framework: 5 iterative phases across 2-week sprints with Telkomsel product stakeholders.

3. Google Analytics Audit: 94% Mobile & The Conversion Gap

Before conducting a single user interview, we ran a comprehensive quantitative audit of Telkomsel.com's Google Analytics data across millions of sessions. The numbers surfaced three design mandates that would anchor every subsequent decision.

✦ Traffic & Behavioral Findings

94% Mobile Traffic Dominance: An overwhelming 94% of visitors accessed Telkomsel.com via mobile web browsers. The legacy website had been structured and tested for desktop-first experiences, creating pervasive mobile friction at every interaction point. Sub-2% Conversion Rate: With over 4 million monthly visitors, fewer than 2% initiated a purchase workflow. The highest abandonment points occurred at package selection and SIM card address entry. Dual Audience Cohorts: Traffic clustered around two distinct demographic groups: Gen Z digital natives (18-24) seeking gaming and streaming quotas, and working professionals (25-54) managing postpaid billing, business data, and device upgrades.

Google Analytics Audit: 94% mobile share vs. 6% desktop. A data-driven mandate to redesign entirely for mobile-first ergonomics.

✦ User Cohort Demographics

Detailed demographic profiling informed persona construction and guided our prioritization of feature depth across the three primary transaction flows:

Demographic Analysis: Gen Z and professional cohorts driving distinct purchase patterns across data, SIM, and device categories.

4. Baseline Pre-Testing: SUS 66.25 & Diagnosing Friction

To establish a rigorous, objective benchmark, we conducted baseline usability testing on the live Telkomsel website before any design changes. Participants attempted three core transaction tasks independently, enabling us to measure task duration, error rate, and subjective satisfaction.

✦ Baseline SUS Score: 66.25 (Grade D)

The baseline results revealed systemic usability failure across all three transaction flows: SUS Score: 66.25 (Grade D: Below Average), a score that places Telkomsel.com in the bottom quartile of measured enterprise websites globally. Task Duration: Purchasing a data package required an average of 2 minutes and 48 seconds, nearly 3x longer than acceptable benchmarks for e-commerce. SIM card ordering was abandoned by 2 of 3 participants before completion. Root Causes Identified: Quota terminology ambiguity (local vs. national vs. streaming quotas), no persistent cart or checkout indicator, and critical call-to-actions hidden below excessive promotional content.

Pre-Test Task Duration: Average 2m 48s per core transaction.

Baseline SUS: 66.25 (Grade D: Marginal, Below Average).

✦ Usability Audit Results & Friction Map

Detailed task-level audit mapping error clusters, drop-off points, and severity ratings:

Usability Audit: Task completion rates, error clusters, and severity mapping across 3 core purchase flows.

✦ Pre-Testing Detailed Results

Participant-level breakdown of task effectiveness, satisfaction ratings, and observed error patterns:

Participant Results: Task success rates, time-on-task, and SUS item scores per evaluator.

5. Customer Interviews & Affinity Mapping

Following baseline testing, we conducted in-depth contextual interviews with Telkomsel users across four behavioral profiles, including active digital buyers and offline store purchasers. The goal: understand the emotional and cognitive drivers behind online purchase avoidance.

✦ Affinity Mapping: 6 Core Friction Clusters

Interview observations were synthesized into a 6-cluster affinity map, surfacing the dominant patterns driving online purchase avoidance: 1. Quota Opacity: Users could not determine actual usability of data packages ("Is this 2GB for all apps or only YouTube?"). 2. Trust Deficit: No visible price guarantee, hidden delivery fees, and unclear refund policies eroded checkout confidence. 3. Mobile Friction: Unresponsive dropdowns, forced desktop zoom, and broken stepper inputs on mobile screens. 4. Discovery Overload: Promotional banners outnumbered purchase entry points 8-to-1 on the homepage. 5. Flow Fragmentation: Users were redirected to 3+ different sub-domains before reaching the checkout confirmation screen. 6. Post-Purchase Blindness: No delivery tracking, SIM activation status, or purchase history available after completing an order.

Affinity Map: 6 friction clusters synthesized from in-depth customer interviews across purchase behaviors.

6. How Might We, Strategic Recommendations & User Flows

Affinity mapping findings were translated into open-ended 'How Might We' opportunity statements, then converged into a prioritized recommendation matrix. Re-engineered user flows followed, eliminating sub-domain routing and establishing a direct purchase path.

✦ How Might We Opportunity Framing

HMW empower users to find and purchase the right data package in 3 taps from the homepage? HMW make quota categories (local, national, streaming) immediately interpretable at a glance? HMW streamline SIM card ordering and identity verification into a single frictionless screen? HMW give users proactive assistance when they hesitate mid-checkout?

HMW Framing: Converting 6 affinity clusters into actionable design opportunities.

Prioritization Matrix: High-impact, high-feasibility features ranked against user need frequency.

✦ Information Architecture Restructure

We restructured Telkomsel.com's navigation taxonomy to clearly separate three functional zones: Marketing (brand and promotions), Transactional (purchase flows), and Support (billing, self-care). This eliminated the 8-to-1 promotional-to-purchase ratio on the homepage.

IA Restructure: Clean separation between marketing, transactional, and support zones.

✦ Re-engineered Purchase User Flows

Redesigned end-to-end user flows for the two highest-volume transaction paths, eliminating sub-domain redirects:

Data Package Flow: Direct homepage entry to 1-tap checkout with zero sub-domain redirects.

SIM Card Flow: Integrated number selection, e-KTP verification, and delivery address in one continuous screen.

7. Solution Sketching, Ideation & Responsive Wireframes

Translating strategic flows into tangible layouts, we moved through rapid solution sketching followed by structured low-fidelity wireframing. Each wireframe addressed a specific friction cluster identified in research, with mobile ergonomics as the non-negotiable constraint.

✦ Solution Sketches & Ideation

Initial sketching sessions generated divergent concepts for the homepage quick-access widget, package catalog filter architecture, and SIM card customization flow. Key ideation outcomes: Quick-Access Shelf: A persistent, thumb-accessible strip anchored below the hero banner with direct entry for 'Buy Data', 'Order SIM', and 'Device + Plan'. Faceted Filter System: Dynamic filter chips for quota size, validity period, and price bracket, returning filtered results instantly without page reload. Stepper Checkout: A numbered 3-step progress indicator to eliminate the 'lost in checkout' abandonment pattern.

Solution Sketch: Quick-access shelf and faceted package filtering concepts.

Solution Sketch: SIM card customization and streamlined checkout stepper.

✦ Wireframe Screens: Homepage, Catalog & SIM Ordering

Low-fidelity wireframes validated layout hierarchy, tap target accessibility, and scroll depth before visual design began:

Wireframe Suite: Homepage quick-access shelf, data package catalog, and SIM card ordering, all mobile-first.

✦ Wireframe Flow: Bundling & Device Checkout

Device bundling wireframes focused on transparent installment calculation and clear plan-to-device pairing:

Device Bundling Wireframe: Financing calculator, data plan pairing, and transparent installment breakdown.

8. Telkomsel Design System & High-Fidelity Production

With wireframes validated through internal critique and stakeholder review, we formalized the design token system and produced production-grade high-fidelity screens governed by WCAG 2.1 AA accessibility standards and Telkomsel's brand guidelines.

✦ Design System Token Library

Color Token System: Telkomsel Crimson (#ED0226) as the primary transactional action color, Deep Navy (#001A41) for high-contrast headings, and neutral slate (#F5F7FA) for card surfaces. Typography Scale: Geometric sans-serif with a clear 6-level hierarchy tuned for sub-400px viewport legibility. Component Library: 120+ modular, accessible components including interactive package cards, payment method selector sheets, number stepper inputs, delivery address forms, and SUS-validated checkout confirmation flows.

Design System: Brand tokens, typography scale, and 120+ reusable accessible components.

✦ High-Fidelity UI Showcase

The finalized interface delivers a consumer-grade e-commerce experience across mobile and desktop, placing purchase entry points above the fold and surfacing package details transparently:

High-Fidelity UI: Polished mobile and desktop screens across homepage, catalog, SIM ordering, and device bundling flows.

9. Interactive Prototype & End-to-End Flow Validation

We built a fully interactive Figma prototype simulating realistic micro-interactions: input masks, animated filter pill responses, dynamic checkout summary updates, and a simulated payment redirect. This prototype served as the direct testing artifact for Phase 2 usability validation.

✦ Prototype: Package Selection & Checkout

The complete data package purchase flow, from homepage quick-access entry through catalog filtering, package selection, cart summary, and payment confirmation, was prototyped without dead ends:

Flagship Prototype Flow: Homepage entry to package selection to 1-tap payment confirmation.

10. Phase 2 Usability Testing: SUS Leaps to 94.50 (Grade A+)

Phase 2 usability testing was conducted with participants evaluating the interactive prototype across the identical three tasks from baseline pre-testing. The results represented one of the most significant usability transformations measured in a telecom digital product.

✦ SUS Score: 66.25 → 94.50: A +28.25 Point Leap

System Usability Scale leaped from 66.25 (Grade D, Marginal) to 94.50 (Grade A+, Best Imaginable). This +28.25 point improvement places Telkomsel.com in the top 1% of all measured enterprise consumer platforms globally. Average task duration dropped from 2 minutes 48 seconds to 1 minute 14 seconds, achieving a 56% reduction. All participants completed every transaction without error or facilitator intervention.

SUS Leap: 66.25 (Grade D) → 94.50 (Grade A+ / Best Imaginable), placing in the top 1% globally.

Time-on-Task: Average 2m 48s → 1m 14s (-56% task duration reduction).

✦ Final Evaluation Matrix

Comprehensive task-level evaluation confirming 100% success rate across all three core purchase flows:

Phase 2 Evaluation Matrix: 100% task success rate, zero errors, and SUS 94.50 across all evaluators.

11. Commercial Outcomes & Senior Designer Retrospective

Following production deployment, the redesigned Telkomsel.com e-commerce platform delivered measurable commercial performance within the first 90 days, validating that rigorous user research and empirical testing translate directly into revenue.