TikTok Feature Update

The "Collections" feature on TikTok wasn't as intuitive and user-friendly as it could be. I wanted to make it easier to save videos into a Collection.

The Problem
The Problem
The "Collections" feature on TikTok wasn't as intuitive and user-friendly as it could be. I wanted to make it easier to save videos into an album, a.k.a. a "Collection".
Project Goal
Select a well-known app and add a small feature.
Mimic the screens, practice good habits in Design System building and strengthen UI Technical and Visual skills.

1. The Challenge

“ Collections existed, it just wasn’t as easy as it could be.”
I use TikTok on a daily basis. It’s a source for ideas on workouts, cooking, hair tips and more. I wanted to save those videos in albums so I can access them more easily. So, I would download videos onto my phone and create albums in my own phone gallery to sort them.

Later I found “Collections” in TikTok which is essentially albums - but I didn’t know how to even get videos on there. I had to Google this - and this definitely could have been more intuitive.

2. Research & Discovery

Competitive Analysis

I started to research what other common apps were doing. I observed that Airbnb had their version of saving places to a “Wishlist”. I saw this on Booking.com and Instagram as well. It was quick and painless, a feeling I wanted to portray with TikTok Collections.

Low-Fi Wireframes

3. Visual Design

I mimicked the UI of TikTok, following their layouts and iconography.

Hi-Fi Prototype

9 clicks down to 5
To save a video to a collection and view it.

I reduced the number of clicks by 55% making it more fluid to save a video to multiple collections and then view it.

Now - even if you simply want to save a video to Collections and continue scrolling, you're down to 3 clicks,
whereas currently Tiktok’s user flow forces you through all 9 clicks to save a video to collection.

Learnings & Findings

Brain

What's Next

Next Arrow
  • Conduct useability testing to really see how easy it is for users to save a video to a Collection.
  • More features to think about - users can hold down on videos on their mobile app to remove the video from the collection or rearrange the ordering.
  • Somehow make the Collections feature more noticeable.

Key Learnings

Key
  • Be more thorough with the design system from the get-go.
  • Having a more organized color library and text style library would improve efficiency throughout the project.
  • Sketch out more low-fi ideas to explore various solutions which would save time in the Hi-Fi prototype and changing and figuring out thing in that stage.
Loading