Tiktok App — Improvement

5 min readNov 30, 2023

Hello everyone!

I’m Niken, welcome to my UI/UX Case Study, where i take you on a journey through the creative process of designing a user-centered and visually captivating experience. In this study, i will share the challenges i encountered, the innovative solutions i devised, and the design principles that guided my path while developing a seamless and delightfull user interface (UI) and user experience (UX) for Tiktok App.

I am excited to present my UI/UX case study, and i hope that it serves as both a source of inspiration and a valuable resource for fellow designers and enthusiasts.

About TikTok App

TikTok app has introduced the Live Shop feature which allows users to shop directly through live broadcasts. This feature allows sellers to expand their market reach and increase interaction with potential buyers. However, in providing an interactive shopping experience, challenges such as transaction effectiveness and better user experience can still be overcome. This research aims to improve user experience and transaction effectiveness in the Tik Tok Live Shop application.

Problem Statement

There are obstacles in finding the products that users want because too many products are listed during the Live Shop session. So it requires users to scroll through products to find the desired product. Apart from that, even though you have asked to be pinned to the live shop host, sometimes it is often missed and you have to ask again. So it requires waiting to be pinned or scrolling the product again.

Possible Solution

Added a feature to filter to product searches in live shop cart.
Added captcha verification feature when registering an account
added face id feature when logging in

Process

Using Design Thinking in a UI/UX case study offers a structured and user-centric approach to solving design challenges and achieving specific goals.

Empathize

This project uses In-depth interviews and surveys to serve as a means to validate assumptions made during the early stages of the design process. Gathering direct feedback from users can confirm or challenge initial hypotheses, ensuring that the design decisions are based on real user insights rather than assumptions.

Criteria Participants:

TikTok active user
Male/Female
18–35 years old

Interview Participants:

Define

At this stage, I collected insights from the empathize stage, then compiled all the insights and grouped them into an Affinity Diagram.

User Persona
A user persona is created to take into account users’ different perspectives on TikTok and ensure decisions are made in line with their needs and preferences.

Journey Map
The journey map is made to understand how the user travels/interacts when using TikTok.

After created categorization, user persona, and journey map, some insights from participants found which would be the priority of the main problems based on the significance, impact, or urgency of the issues raised to be resolved:

“Overall good, designnya simple cuma karena dia sederhana jadi tampilan produk itu buat bingung menurut saya”. Users are annoyed by the large number of products in the basket.
“Many shops are not clear about the quality and goods they sell.” Users complain that most shops still cannot guarantee security.

Ideation

After defining the problem. This stage is carried out by brainstorming through Idea Dumps. By recording or devoting all ideas to finding innovative solutions to problems.

User Flow
This is the user flow of Fullscreen Mode and Content Preferences Improvement on TikTok. This user flow helps the user to understand the journey from start to finish when using the application, including the actions the user will take and the interactions that occur between them.

Wireframe
Before the Mockup creation stage, a simple visual representation of the layout and basic structure of the TikTok user flow has been created. Its function is as an initial design that is used to describe the main elements of the user interface.

Mockup
It is a static visual representation of the wireframe stage, where the user interface elements are graphically designed and more closely resemble the final look of the actual TikTok app.

Prototype

Design System
Before the prototyping stage, create a Design System as a guideline when designing prototypes later, such as the use of color, typography, components, and others.

Colors
The colors used in designing this prototype match the brand colors of TikTok.