Thoughtful design for products that matter.feel right.people love.drive impact.help others.matter.

Four steps, no manual input

Six modules, one plugin

The logic that makes the output trustworthy

Anyone can write a plugin that "kind of works." Making one designers will actually trust at handoff is the harder problem. The six modules above ship eight distinct features, and here's the logic running under each one.

Small touches that make it trustworthy

The work nobody notices is what stops a plugin from feeling broken. Hidden layers are skipped so they don't show up in the output. Missing fonts fall back gracefully instead of crashing. Backgrounds are pulled from the right parent, never from a grandparent that happens to have a fill. These are the details that take a plugin from "demo" to "the team uses it every day."

What success looked like

The plugin moved from prototype to daily-use tool quickly because it earned designers' trust on real handoffs. The numbers below are what success looked like for the rollout.

Designers should be sparking ideas, not auditing pixels

As a senior designer, I recognized a team-wide inefficiency that individual designers could easily overlook: repetitive handoff checks consuming 20–40 minutes per task, adding up to 3–5 hours per designer each week. These routines had become standard practice, but they were taking time away from strategic design work.

I built Design Deliverables to automate this operational burden, giving designers more time to improve user flows, explore new ideas, and challenge product decisions. For me, this reflects a core principle of design leadership: don’t just help the team do repetitive work faster—eliminate the need to do it at all. By automating what can be standardized, we free designers to focus on the work that drives better products and business outcomes.

Background and context

Why this is important

Five phases, from research to ship

Four HiLTI personas, four very different decision styles

Three key pattern of HiLTI decision-making

The opportunity

How HiLTI influenced other projects

What I learned

Background and context

What We Observed: The Need for a Shared Design Framework

Questions the principle needed to answer

Six phases, from gathering use cases to shipping the framework

From January to October 2021, Nest evolved through six deliberate phases: gathering use cases across teams, defining principles with tangible actions, piloting them on real projects, refining the concept with stakeholders, launching the framework company-wide, and continuously measuring and evolving it as a living system. Each phase had clear gate criteria, ensuring Nest was grounded in evidence rather than opinions presented as principles.

What Nest decides, guides, and aligns

Nest is the decision-maker for design and experience choices, the guide for Product Designers when they're designing and Product Managers when they're managing, and the aligner that keeps Tokopedia's look and feel consistent across teams. It doesn't replace local context. It gives every team a shared filter to test their context against.

Four principles, expressed as customer truths

Each principle is written as a sentence the customer would say — not as a designer's instruction. This wording forces the team to defend their work from the customer's seat, not from the org chart.

From Soul to Deliverables: one collaboration system

Nest acts as a master documentation linking the Soul (why we design things), the Experience Scope (general → specific), and the Deliverables (component behavior patterns, UI library, code storybook, copywriting, research, design ops, career framework). It's the connective tissue that ensures decisions stay anchored to principles all the way down to handoff.

Three questions to interrogate any design

Every colleague uses Nest the same way: pick a principle the work is supposed to embody, then run the design through three honest questions about context, motivation, and impact. If the design can't answer them clearly, it isn't ready to ship.

Four lenses for principle-driven quality

Each principle has its own measurability lens, so teams can defend decisions with evidence, not taste. Relevant measures how well data is reserved for the right user at the right moment. Reliable measures performance and predictability across the journey. Engaging measures the trigger-action-reward-investment loop and return rate. Empowering measures psychological capital lift: optimism, hope, self-efficacy, and resilience after using the product.

What I learned

Background and context

Six phases, from reading the page to shipping the system

I deliberately spent the first half of this project not designing. The page had been iterated on plenty of times; what it had never had was an agreed diagnosis. Each phase below had to produce something the next phase could actually build on.

Reading the current Shoptab, zone by zone

Before proposing anything, I mapped click-through and conversion onto every region of the page so the team could argue about evidence instead of taste. The headline numbers were healthy; the distribution underneath them was not.

What the rest of the SEA market had already learned

To distinguish Shoptab’s performance issues from broader e-commerce patterns, I benchmarked Tokopedia’s homepage, mapping each module by content type and strategy, with sessions, CTR, and CVR to compare performance. I also analyzed Shopee, Lazada, Blibli, and Qoo10 module by module to identify how competitors prioritize content, promotions, and product discovery.

User research: Deep dive why the numbers looked like that

Data showed where users dropped off, but not why. I conducted quick guerrilla interviews with PMs and colleagues, then interviewed real shoppers in the field to validate the findings.

Understanding summary

Three zones based on user intent

I restructured the homepage around natural shopping behavior, prioritizing users with clear intent, followed by promotion seekers and casual browsers. Each module was assigned to a zone based on its purpose and user intent, creating a scalable framework that replaced subjective placement decisions with clear principles.

Aligning the product team on how it should feel

We ran a workshop with the product team to agree the visual direction for SEA Shoptab: which layout best accommodates the business needs, and which treatment stays true to TikTok's brand identity. We benchmarked existing visuals, competitor screens, and festivity levels, then committed to four directions.

Space optimised, GMV up across the board

Every zone we restructured moved

Six modules, fifteen businesses, one page

The most durable outcome isn't in the GMV line. The six Shoptab modules now support a scalable design for up to 15 business features and can carry content beyond products, and they became the mechanism used to launch Buy X Get Y, Return More, Live Channel and Flash Sale, the core business focuses for the following two quarters. The page stopped being the constraint.

What I learned

Background and context

Four phases, from reading the game to shipping a campaign

Because the mechanic was already validated, the work was diagnosis before invention. Each phase had to hand the next one something it could build on, and the last one had a fixed launch date that nothing could move.

What the numbers already proved, and what they exposed

Strong performance meant the core mechanic needed to be preserved. The data revealed a deeper opportunity: participation was high, but completion lagged, and overall reach remained limited.

Asking users what they thought they were doing

Numbers show where users drop off, not why. We conducted three days of moderated sessions in Vietnam (the country with the highest user for TTS gameplay), comparing Crack the Egg with other Shoptab games. Participants understood the mechanics and knew how to play, with some even delaying purchases to claim rewards first. The challenge wasn’t appeal, but the experience itself.

How the rest of the market builds a campaign game

Two teardowns did most of the work. Neither was competing on novelty of mechanic; they were competing on how many small, repeatable tasks they could wrap around a single reward moment.

What we committed to fix

The goal was clear: improve conversion and simplify the user experience without changing the proven game mechanic. This focus helped the team prioritize ideas that directly addressed the biggest opportunities and reject those that didn’t. Our guiding question was: How might we unlock more value from a proven game by making it easier to understand and complete?

Success metrics, in three tiers

Making the main page earn its screen

The old key visual was atmosphere, not function: a static illustration that sat above the actual game while the crack, the reward and the next mission each cut to their own screen. Ranked honestly, the KV mattered less than the loop it was decorating, yet it was taking the most valuable screen real estate on the page.

A 32-day campaign with three clocks running

What the campaign returned

Against a target of a 1% to 3% GMV uplift across the cycle, the campaign delivered +1.46% TTS GMV and +3.72% TTS ROAS. The more durable result is structural. The engine underneath stayed generic while the campaign layer became swappable, and the same three-layer model carried two entirely different cultural mechanics across two markets without a rebuild. The next peak can be dressed rather than built.

What I learned

Background and context

How we executed

Each step handed the next one something concrete: a list of inefficiencies, a set of principles, a platform, and finally a real collaboration to test it all against.

We started with a workshop to explore how AI could improve each stage of the design process. Although designers were familiar with the workflow, breaking it down step by step revealed hidden inefficiencies across design tasks and collaboration touchpoints. We mapped these opportunities to identify where AI could make the biggest impact.

With inefficiencies identified, we spent a week independently exploring how AI could address each problem. These explorations laid the foundation for redefining our AI-assisted design process around four core principles.

I owned the third and fourth objectives: streamlining PM collaboration through quick, interactive design explorations, and improving design-to-engineering accuracy by generating implementation-ready code once a concept was finalized. I defined the end-to-end flows, from the designer’s initial prompt to the code handed off to engineering.

We validated our AI-assisted workflow through real-world collaboration with PMs, then partnered with the lead PM to explore AI-powered experiences for TikTok’s standalone e-commerce app using our vibe-coding platform.

The problems we set out to solve

The design principles

Three principles translate the strategy into actionable design guidelines, defining what to do and avoid so the team can evaluate every exploration consistently.

Exploring AI Opportunities in the Shopping Cart

We mapped AI opportunities across Home, Feeds, Search, Cart, and Order History, with my focus on the shopping cart. A space where purchase intent is clear but decisions still require effort. Beyond checkout, shoppers use the cart to save items for later, wait for promotions, plan restocks, compare products, and find the best deals. Understanding these behaviors revealed four key problems AI could help solve.

User scenarios to purchase

Each scenario defines the user’s context, the AI’s intervention, and the expected outcome. Together, they address three key jobs: organize the cart, prioritize what to buy, and streamline checkout.

AI scenarios

The exploration extends beyond purchase decisions to user understanding, conversational behavior, lifecycle recommendations, and cart cleanup, with flexibility for users to correct AI when needed.

I built the entire interactive demo using my AI-assisted design platform, turning concepts into a realistic prototype with live data, working states, and functional transitions—allowing PMs and designers to experience the journey firsthand.

Where this landed, and what's next

The working prototype helped PMs experience the concept firsthand, building confidence in the AI-assisted workflow. Collaborating through interactive prototypes instead of static decks improved cross-functional alignment and sped up decision-making. The next step is to scale this approach across the remaining core shopping journeys.

What I learned