TikCode Redesign

TikCode Redesign

TikCode Redesign

Feb 2021 - Jul 2021

Feb 2021 - Jul 2021

Feb 2021 - Jul 2021

Overview

A QR code for users to connect with their friends. Provide QR codes for users to access various pages such as Hashtags, Sounds, and Effects. Showcase the brand style and creativity, offering users a unique experience when interacting with the TikTok QR code.

Role

Lead Product Designer

Skills

UX design / Visual design

PLATFORM

Native App

Design Patent

QR code and Motion related

Mar 2021

BACKGROUND

Design for Creativity

With numerous other apps, TikTok has crafted a distinctive visualized Tikcode, representing a unique URL. Users can employ their camera for scanning or utilize the in-app scanning feature to navigate to the relevant page. Simply put, any code serves as a visual representation of a URL.

Current stage

Customized TikTok QR code

We propose transitioning from the Tikcode to a standard QR code. Using the conventional QR format, out-of-app users can access information without opening or having the TikTok app. This broadening of sharing touchpoints aims to attract new users (to download TT through WebApp) and re-engage existing users with the app.

Principle

How we guide user to download TikTok through QR code

  1. If the user has already installed TikTok, scanning the code with the native camera will redirect them to launch the app.

  1. If the user has already installed TikTok and scans the QR code through the camera embedded in a third-party application, whether the app launches depends on the block strategy. If the third party hasn't blocked:

    · Scan and recognize;

    · Launch the app, redirecting the user to the TikTok app.

  1. If the user hasn't installed TikTok, scanning the code will allow them to browse the WebApp (*with guidelines to download the app).

QR Visual

Redesigned TikCode

We redesigned the personal profile QR page, as well as the QR codes for sharing hashtag, sounds, and effects pages.

AB test

Improving share experience

Five groups were configured to test the impact of button layout and the share panel on share penetration.

The final data reveals that, while the V4 group, which exposes sharing channels by default, shows a positive impact on the sharing rate of personal page QR codes, the improvement is limited overall due to its low base (personal page QR code sharing penetration increased from 0.002% to 0.009%). The overall sharing rate of profile QR pages fluctuates."

Tikcode animation

To encourage user sharing, we experimented with adding animation design to the QR code, creating a more interactive, diverse, and personalized QR card. You can preview the animation mock below.

Click on the TikCode background, with the click point at 40x40 pixels as the center, expanding to the maximum radius of the screen as the mask.

Tony Xing

Product Designer

TONY

TONY

XING

XING