HOW MIGHT WE MAKE INTERACTIONS WITH ADVERTISEMENTS ON TIKTOK FEEL MORE
AND ?
For Northwestern's Bay Area Immersion Program, we partnered with TikTok to redesign advertising interactions between users, influencers, client brands, and TikTok's own brand. Private user data from our TikTok project manager, paired with initial user research, highlighted two key friction points: users struggle to distinguish the difference between paid content and native content within their feed, and they generally feel distrustful of advertised content on the app. However, users are not invested enough in advertisements to open a new window to search their product questions.
OUR SOLUTION: AdAssistant
The AI-powered ad assistant that makes ads, make sense.
AdAssistant is a TikTok extension that enhances ad transparency and content clarity. Users can access it without ever leaving their feed by tapping a button. Within the AdAssistant interface, users ask questions, and the AI assistant provides real-time, honest, and clear answers by sourcing information from the company's webpage and the internet.
AdAssistant Prototype.
EVERY FEATURE IN OUR PROCESS REFLECTS OUR DEDICATION TO
VOICE SEARCH
Users can speak their questions out-loud.
SUGGESTED QUESTIONS
Shows users possible interactions with AdAssistant.
TYPE SEARCH
Users can type their questions in the search bar.
POP-UP SCREEN
Our testing revealed that users want to be able to search questions about the advertisements they receive without leaving their feed.
A translucent color allows the users to see the ad in the background.
DISPLAY OF INFORMATION
AdAssistant delivers information to the user through voice and text simultaneously.
​
User testing and feedback revealed 3 key insights: Users valued privacy ("I don't want people to hear my questions/answers"), accessibility, and mobility ("I want a hands-free interface so I can move or multitask").
RESEARCH
-
Write interview questions for initial research.
​
-
Approve research participants.
​
-
Oversee initial research.
​
-
Lead insight brainstorm.
​
-
Facilitate user testing for AdAssistant prototype one.
​
-
Facilitate user interface research and testing for AdAssistant prototype two
LEAD
-
Project leader.
-
Point of contact with Project Manager.
-
Facilitate communication between design and research teams.
-
Pitch presentation with group.
DESIGN
-
Development of 1 of 4 low fidelity initial prototypes.
​
-
Create second prototype of AdAssistant.
​
-
Use Figma to create wireframes along side one teammate.
​
-
Iterate designs.
​
-
Create design style guide based on TikTok guidelines.
​
-
Use Figma to create final high fidelity prototype along side one teammate.
​
-
Approve final design with style guide.
PROCESS
INITIAL USER RESEARCH
Initial user research was conducted with a group of 18-22 year old participants.
​
Research was two stages:
​
1. Observing how users interact with ads on TikTok without interfering.
​
2. After, asking participants questions about their experience and media consumption habits.
INITIAL DESIGN CONCEPTS
Based on our initial research, we created four rough prototypes. Then we had the original user testing group select which prototype they thought was best​.
Endorse advertisements and share directly into friends feeds.
"Critic Mode," where users rate advertisements in exchange for ad-free viewing.
AdAssistant!
Paid content has different colored buttons than native content.
50% of respondents chose the AdAssistant, so we moved forward with it. Because 30% liked the idea of changing the interaction colors for paid content we chose to incorporate that concept as well.
PROTOTYPE ONE TEST
We created a low fidelity prototype by drawing a screen on a window and placing our "assistant" behind it. We showed participants advertisements on a phone, and had them interact organically with our "assistant" afterwards. We also encouraged participants to draw buttons and interactions on the glass.
INSIGHTS
-
Transparent with video behind so extension didn't feel like navigating away.
-
Preferred voice interactions.
-
Needed time for the device to introduce itself then listen to them with voice.
PROTOTYPE TWO TEST
We created a low-fidelity prototype of AdAssistant and overlaid it on a recorded TikTok ad. We observed 10 users interacting with the prototype, encouraging them to "think out loud." Afterward, we asked follow-up questions based on our observations.
INSIGHTS
-
People want a pop up!
-
Tap outside of frame to navigate away.
-
Some unique motion to enter interface .... no more buttons!
ENTERING AdAssistant
Since TikTok already uses taps, swipes, and users felt there were "too many buttons," we designed a unique entry motion for the AdAssistant pop-up: a pinch gesture, similar to zooming in on a photo. Just like how users "zoom in" on a photo to clarify its content... users "zoom in" on an ad to clarify the content.
FINAL PROTOTYPE
I worked alongside one teammate to create the wireframes and final interactive prototype of AdAssistant.
PROTOTYPE 3 TESTING
We created a final high-fidelity prototype of AdAssistant on Figma. We observed 20 users interacting with the prototype, encouraging them to "think out loud." Afterward, we asked follow-up questions based on our observations.
Allows the users to see the ad in the background.
"I don't like that it's a separate window. Like an overlay would be easier to click out of." - User Testing Round 3 Participant
Shows the user possible interactions with the AdAssistant.
"I like the suggested questions because I’m usually too lazy to type when I’m scrolling. I’m used to scrolling with one hand so this eliminates friction." - User Testing Round 3 Participant
