Vivian Chen

May 8, 2021

5 min read

TikTok Concept: Let’s Go Shopping!

Like many other Gen Z and Millennials, who were skeptical of TikTok pre-pandemic, I found myself downloading TikTok out of lockdown boredom. Months after that, I lived and breathed TikTok. Not only was I spending a frightening amount of time scrolling, but I was also learning the renegade, making Dalgona Coffee, and baking banana bread.

TikTok is known for its insanely accurate algorithm, and it sure lived up to its glory. As the algorithm quickly figured out that I was a shopaholic, my For You page started to pervade with “5 Amazon Must Haves” and “Best Lululemon Legging Dupes,” and other product recommendation videos. After several TikTok-influenced purchases, I became frustrated with TikTok. When a Tik Tok creator recommends a product for me in the video, I want to know the details for the product, so I can purchase it. But I can’t do that well because:

  1. It’s confusing to figure out if and where the links are
  2. I often have to leave TikTok and visit the actual product page

After conducting user research, I realized that my problem is a people problem. Many of my interviewees shared they often give up purchasing from TikTok because it requires a lot of effort to find the actual product. Instagram, a competitor of TikTok, has already introduced an in-app shopping feature to take advantage of the growing e-commerce market, and YouTube is already looking into ways to add YouTube Shopping. It would be beneficial for TikTok to engineer a shopping feature to remain competitive in the concentrated social media industry.

Brainstorming

I recruited two of my friends, Amir and Andrea, to help me brainstorm possible solutions for the people problem.

No trees were harmed :)))

Many digital sticky notes later, we were able to identify three possible solutions:

  1. A “shop now” button that directs users to the product site
  2. A “shopping” icon that pulls up the details about the featured products
  3. A “shopping page” that allows users to discover other recommended product from their favorite creators

Low Fidelity Sketches

After receiving some feedback during critique, I realized that the features are not substantial enough to stand alone; however, if I combine them into one feature, it would be impactful. I kept the shopping page feature on the creator’s profile, from feature one, but am combining features two and three to provide a better in-video shopping experience.

Visual Design Explorations

Once the features were decided, I experimented with various UI designs for the content requirements.

Exploration for the “Shop now” button

For the shop now button, I considered three different designs. In the end, I chose to move forward with design B because it is the most obvious and convenient for users who want quick access.

Exploration for the in-video listing

For the in-video listings, I had multiple iterations of the four designs as I was indecisive. However, after speaking with a few users, I decided to go with design A because designs two and three required the users to swipe for more items, which is more work for them. Compared to design D, the first design is still more favorable as it allows for a larger preview image and a larger surface to interact for links.

Exploration for the shopping and product details page

As for the shopping section, I wanted to replicate the existing UI design as it would be integrated into the profile’s page, so I ended up going for design A. For the product’s details page, I added an “Also mentioned in” feature to highlight other TikTok videos that also recommend the same product. I was initially indifferent between the carousel and the scrolling design, but I ended up going with the carousel design as it prevents scrolling fatigue.

User Testing

After the UI designs were decided, I put together a high-fidelity flow and recruited three avid TikTok users and online shopping enthusiasts for user testings. All three participants voiced their excitement for this feature but also pointed out areas for improvement. One of the major findings was that users are used to TikTok’s existing UX/UI designs. This includes the ability to swipe to exit or enter a flow, profile navigation being on the top, and having multiple entries and interactions for features. Further, I learned that there is other information, such as sizes, availability, and colors, that users would like to see on the product detail page. Lastly, one of the participants suggested a sharing feature to allow the users to share or export items.

Final Interaction

Final User-Flow

From the feedback, I went back and iterated on my design solution. I included more information on the product details page and added the ability for users to share and export. Additionally, I went on TikTok to find all the different interactions a user could have with the app and added the animation for my final interaction. Here is my final product:

Video Demonstration

Conclusion

Although this final product was designed for a specific user group—shoppers on TikTok—other user groups could also benefit. For instance, the creators would have the opportunity to share affiliated links conveniently, which could generate more clicks and profits. If this profit is significant, TikTok could monetize this service to extract some of the earnings from the creators. As e-commerce is overtaking the traditional brick-and-mortar stores, an in-app shopping feature could be a lucrative revenue opportunity for TikTok.

This is a case study for a project in Intro to Digital Product Design. I am in no way affiliated with TikTok.