TikTok Shop Checkout Page Revamp

TikTok Shop Checkout Page Revamp

TikTok Shop Checkout Page Revamp

The new face of TikTok Shop Checkout, clean layouts, structured flow, consistent cues. Every section guides you in four simple steps, no clutter, no guessing, helping you check out faster and with confidence.

The new face of TikTok Shop Checkout, clean layouts, structured flow, consistent cues. Every section guides you in four simple steps, no clutter, no guessing, helping you check out faster and with confidence.

The new face of TikTok Shop Checkout, clean layouts, structured flow, consistent cues. Every section guides you in four simple steps, no clutter, no guessing, helping you check out faster and with confidence.

Context

Context

Context

In Q2 2025, I was assigned to handle TikTok Checkout revamp. In Q2 2025, Checkout revamp was becoming the highest prioritization of design initiative. As a person in charge to do this revamp, I led the team to do end-to-end process starting from finding core problems until proposing design and next action to product team.

The process

  • Identify core issues using the latest quantitative performance data

  • Conduct competitive benchmarking across SEA marketplaces

  • Define new objectives and goals for checkout page

  • Propose and validate checkout concepts through user research

  • Present refined designs and actionable next steps to the product team

Challenges

  • Tight timelines, we only have 2 months.

  • We don’t have strong qualitative feedback to starting this project.

  • We need to strengthen our based reason why we don’t to do this checkout revamp.

Result

  • We validated the design through user research with 20 participants in Indonesia and Thailand.

  • From our user research, they said our new design proposal was clear and consistent.

  • 3 project initiated from this project to drive users to checkout and increase their level of confident to buy

Background

Background

Quantitative data shows a CVR decline in Indonesia, followed by Malaysia and Vietnam, while Thailand leads conversion rates across SEA. We examined key touchpoints, PDP-to-cart, cart-to-payment, payment initiation, and order confirmation—to gain a comprehensive view. These insights highlight specific areas for targeted optimization.

Quantitative data shows a CVR decline in Indonesia, followed by Malaysia and Vietnam, while Thailand leads conversion rates across SEA. We examined key touchpoints, PDP-to-cart, cart-to-payment, payment initiation, and order confirmation, to gain a comprehensive view. These insights highlight specific areas for targeted optimization.

“Our quantitative data shows that user conversion rates on TTS are lower than expected.”

“Our quantitative data shows that user conversion rates on TTS are lower than expected.”

“Our quantitative data shows that user conversion rates on TTS are lower than expected.”

Design process

Design process

We only have 2 months, means we need a strict timeline.

We only have 2 months, means we need a strict timeline.

We only have 2 months, means we need a strict timeline.

To ensure the smooth deliverable process, I led to define the scope of the projects, set a clear objectives, and planning a good timeline for all revamp entire process.

1

1

Problem discovery

Problem discovery

2

2

Benchmarking

Benchmarking

3

3

Ideation and concept

Ideation and concept

4

4

Usability testing

Usability testing

Problem discovery

Problem discovery

To uncover problems, I proactively consult with product teams to understand business expectations. At the same time, I’m doing a comprehensive analysis of the latest quantitative checkout performance data and review recent user research related to the checkout experience.

Product POV

Product want to see the gap between our platforms and other marketplace across SEA and increasing number of user conversion in Checkout.

Product want to see the gap between our platforms and other marketplace across SEA and increasing number of user conversion in Checkout.

Product want to see the gap between our platforms and other marketplace across SEA and increasing number of user conversion in Checkout.

User POV

Users are not confident about what they paying for and users just want to check it and buy it later.

Users are not confident about what they paying for and users just want to check it and buy it later.

Users are not confident about what they paying for and users just want to check it and buy it later.

Based on these insights, we’ve identified two core problems to address:

Based on these insights, we’ve identified two core problems to address:

Based on these insights, we’ve identified two core problems to address:

Improving CVR in all across SEA

We see from data, the ID is only 10.66% and there’s a gap 6% data if we compare with other regions.

UI optimization

Improving current informations architecture, layout, size, and spacing

Competitive benchmarking

Competitive benchmarking

We run the competitive benchmarking, to see how other competitor works. We set a focus on this benchmarking is that we want to see about the design pattern, how they show the informations, and the style of each platforms including text, font size, and spacing.

After conducting the competitive benchmarking, we got some insight after we compare our products with them, and also a gap opportunity.

Summary competitive result

  • There’s a clear design pattern shared across Shopee, Lazada, Temu, and Tokopedia.

  • One of the key patterns we identified is section-based layouting.

  • We also found that each platform follows a consistent design guideline, which helps their interfaces appear cleaner, more harmonious, and visually consistent.

  • We also found a different structure between us, they put payment method first then order summary.

Opportunity summary

  • Comparing with us, some of our design don’t have a pattern for example of using icon and text size.

  • Inconsistency between section in our page. We can see there’s a multiple different icon size, colors, and how we show the informations.

  • Hard for users to understanding section by section in our page because current information is like racing to get more highlight.

  • From benchmarking, order summary was the last part user see as user last validations.

Setting our new goals

Setting our new goals

In the previous design, we do not have a goals. We just focused on how help user convert and directly buy a products. But right now, we need a goals to help us more easy to define what is our end goals for our products. From alignment with product, after conducting a user research, and discuss with product design stakeholders, our new goals for Checkout is

The new design aims to help users easily recognize each section on the checkout page, clearly distinguish between store-level and platform-level information, and quickly understand the total amount they need to pay. It also ensures that all information is presented clearly, making it easier for users to review and validate before completing their purchase.

The new design aims to help users easily recognize each section on the checkout page, clearly distinguish between store-level and platform-level information, and quickly understand the total amount they need to pay. It also ensures that all information is presented clearly, making it easier for users to review and validate before completing their purchase.

The new design aims to help users easily recognize each section on the checkout page, clearly distinguish between store-level and platform-level information, and quickly understand the total amount they need to pay. It also ensures that all information is presented clearly, making it easier for users to review and validate before completing their purchase.

Concepting

Concepting

To answer our goals and provide a better solution, we trying to figure out the new concept of Checkout page design, we come up with a new design principles to help us more easy to define.

Clear Sectioning

By applying a section grouping here and aligning spacing, icons, and layout elements, the design achieves a balanced, professional appearance that improves scan ability and reduces visual noise.

Information Clarity

Sections are organized into clear, focused cards, such as address, shipping, and payment, helping users easily scan and understand content without being overwhelmed.

Improved Readability

A standardized typographic system with consistent font styles and sizes improves the overall reading experience, reduces confusion, and gives the page a more cohesive feel.

Proposing a new strategy to enhance the checkout user interface.

Proposing a new strategy to enhance the checkout user interface.

4 column grid

We introduced a 4-column grid to create a solid layout structure. This grid ensures all elements are aligned consistently, helping us maintain visual balance across the page. The result? A layout that’s cleaner, easier to scan, and feels more professional, especially on mobile.

Card base style

Each section is grouped into clear, focused cards, like address, shipping, and payment , making it easier for users to scan and understand information quickly.

Opportunity summary

In the old design, too many font sizes made the page look cluttered and confusing. Now, we’ve standardized font styles and sizes, a consistent typographic system improves readability and gives the page a more cohesive feel.

Standardize spacing

From icon sizing to spacing and padding, everything is aligned to create a familiar and intuitive structure. helps users quickly recognize patterns and navigate the page with confidence.

Design solution

Design solution

Based on latest experience and the problems that we have, I have a proposal solution to address them using the newest strategy

4 Column Grid

We’re introducing a four-column grid to bring structure and visual harmony to our checkout interface. By anchoring every element to a consistent grid, we’ll achieve a same spacing and clear alignment. This foundation not only reinforces brand consistency but also guides users smoothly through each step of their purchase journey.

Cards make scanning easy

We transform to a card-based layout instead of a basic list. This approach helps users to spot each section faster and scan the key information they need.

Font consistency boost clarity

Our design currently uses too many font sizes, which makes the page look messy. We’ve defined clear rules, one size for headers, one for body text, and one for small details. This standardization makes text uniform, helps users read faster, and gives the page a cleaner look.

Consitent is a key

Standardized icons, spacing, and padding for a harmonious layout that’s easy to scan. Consitent in every section is a key.

Usabilty testing

Usabilty testing

We conducted usability tests in Indonesia and Thailand to compare the new and old checkout pages across multiple research objectives. Our background is we want aim to test the perception of the new checkout design against the current design. With these improvements, we seek to gain deeper qualitative insight into the user journey with several objectives.

“From the usability testing that we conduct in Indonesia and Thailand, we learned that our new design concept got a higher score than the current online design.”

“From the usability testing that we conduct in Indonesia and Thailand, we learned that our new design concept got a higher score than the current online design.”

“From the usability testing that we conduct in Indonesia and Thailand, we learned that our new design concept got a higher score than the current online design.”

What they say about new design

Easy to navigate

Overall navigation feels more obvious, e.g. "View All Options >" in the shipping or coupons are clearer to indicate that it has other options.

More consistent

Icons style and layout on the seller discount, shipping, and platform discount feel more tidy and consistent.

Help them easy to scan

Consistent design within each section allows users to scan faster and signals a fresh platform experience. Users also find navigation easier in the new design.

Design insight

Design insight

Product tiles

Our design currently uses too many font sizes, which makes the page look messy. We’ve defined clear rules, one size for headers, one for body text, and one for small details. This standardization makes text uniform, helps users read faster, and gives the page a cleaner look.

Vouchers and bonus

Nearly all users in both Indonesia and Thailand know that coupons are automatically applied in both old and new designs. The new design has cleaner UI and more intuitive navigations. Which can make users know there's another voucher easier.

Order summary

Preference for simplicity: Users want a concise, single-page summary with key items (total, shipping, discounts) grouped. Overly detailed breakdowns (e.g., separate product vs. platform discounts) can make users confused.

Bottom navigation

Many users miss the savings info in the old design; it’s much easier to spot in the new design. While the “Congratulations” banner feels lively, most users prefer the new design’s because of clear, direct savings display. Especially in Indonesia, where the old banner often gets cut off and ignored.

Design iterations

Design iterations

We used the feedback from our user tests on the new design proposal to guide further iterations. By analyzing comments and spotting pain points, we made targeted adjustments, like refining labels, improving spacing, and enhancing visual consistency, to boost clarity and overall usability.

Product tiles - Shipping options

Some users show interest in using instant shipping, especially when buying expensive items and it's free shipping, as it is perceived to be the safer method. However, many of them didn't notice it during the demo.

Product tiles - Subtotal price

Some users said the subtotal price provides better clarity on the price that they actually get in the store level purchase. They can better determine if the final price in each store has already included the seller coupon, and also helps if the shipping fee is not totally free.

Order summary

Preference for simplicity: Users want a concise, single-page summary with key items (total, shipping, discounts) grouped. Overly detailed breakdowns (e.g., separate product vs. platform discounts) can make users confused.

Bottom navigation

Many users miss the savings info in the old design; it’s much easier to spot in the new design. While the “Congratulations” banner feels lively, most users prefer the new design’s because of clear, direct savings display. Especially in Indonesia, where the old banner often gets cut off and ignored.

Final design

Final design

General output

This project is currently in Q3 development. From day one, we held a kickoff meeting and worked closely with the Product team to align our goals. It has supported the Product team in shaping a Q3 initiative focused on improving user conversion and reducing cognitive load on the checkout page.

Support product team

Through this project, we’ve already helped the Product team launch three initiatives aimed at supporting user decision-making highlighting instant shipping, enlarging key buttons, and placing saved information close to those buttons for easier access.

Research report

We now have a comprehensive checkout research report that reveals the key factors influencing online shopping and our product’s position in users’ minds. This insight comes from our study in Indonesia and Thailand, involving a total of 20 participants.

Reflection

This project had a very tight and demanding timeline, requiring strong collaboration and careful time management to keep everything on track. I worked closely with the design team, holding regular weekly meetings to ensure smooth progress, and partnered with the product team to set priorities for upcoming initiatives. This experience sharpened my ability to manage timelines effectively and prioritize design initiatives based on importance, impact, and the availability of technical resources.

Create a free website with Framer, the website builder loved by startups, designers and agencies.