top of page

AI ad manger

AI Ad Manager is an AI-driven advertising platform tailored for B2B use, designed to streamline the advertising process and maximize effectiveness for Momo advertisers.

I collaborated with other 2 UX designers in this project, delivered the defined user flows, hi-fi prototypes for vision through working closely with a cross-functional team.

Duration

8 months

​My Role

UX Designer

UX Researcher

Team

3 Product Designers

2 Product Managers

2 Product Ops

4 Developers

Awards

Group 2610881.png

Overview

The client is a social media platform with 200 million user base, they established an advertising platform for revenue generation and traffic monetization. However, the current advertising revenue is lower than expected and has hit a bottleneck.

The Problem

Advertisers need to invest a substantial amount of time and effort in the exiting ad system, adversely affecting both ad revenue growth and ad effectiveness.

Design Outcome

We designed an all-in-one ad platform powered by AI and machine learning, which streamlines the advertising process, saving time and costs while maximizing effectiveness.

Swipe me to check the before and after views

Understanding The Context

Group 2610678.webp
Group 2610677.png

User Research Process

To identify users' needs, we decided to dig deeper with some primary research, using surveys and interviews. 

Group 2610683.png

Research Insights

After conducting the primary research, we analyze the data to identify common themes and insights.

Frame 2610790.png

Design Challenge

“How might we optimize the system to boost revenue generation for Momo by enhancing efficiency?"

User Journey

We subsequently developed a user journey map to pinpoint crucial touchpoints where users engage with the system. This allowed us to identify areas for enhancement throughout the advertising process, ensuring a better alignment with user needs.

Final.png

Painpoints & Opportunities

Based on the pain points identified at each stage, we transformed them into design opportunities.

Group 2610888.png

Learn from competitors

After identifying the opportunity, we analyzed top ad platforms like Pinterest, LinkedIn...for inspiration. Their approaches to interaction, layout, and categorization informed our strategy for a cleaner, faster dashboard.

Frame 2609679.png

Brainstorming

We brought all our designers together for an internal brainstorming session. following the generation of numerous ideas, I facilitated a workshop to deliberate on the priority features to be included in our project. The participants encompassed the product manager, product operations team, and developers. Subsequently, we collectively prioritized the features based on considerations such as time frame, development difficulty, and feasibility. Finally, we arrived at a consensus and depicted the priority in the following figure.

Group 2608613.png

Create 2.0 IA

Following our previous design decisions, we have developed the information architecture (IA) for Ad Manager 2.0. This IA aims to ensure a clear and organized layout, as well as a well-defined hierarchy.

Low-Fi & Hifi Explorations

Below are examples of the low- and high-fidelity prototypes we developed. After multiple rounds of internal discussions, user testing, and iterative refinements, we finalized the design based on user feedback and team alignment.

Iteration examples based on feedback

We've fixed numerous UX issues uncovered during testing. Here are a few examples:

1. Revamping the AI Copy Feature
Based on user feedback, I redesigned the AI Copy feature, which is intended to assist advertisers when they struggle to write effective ad copy. The update streamlined the experience, helping users save time and receive contextual support when they need it most.

image 206.png
Group 2610936.png
Group 2610935.png

Before: A chatbot to generate ad copy options

Vector 150.png
Group 2610936.png
Group 2610935.png
image 207.png

After: an AI editing feature to enhance ad copy

2. Enhancing Ad Status Visibility

Through interviews, I found that most users pay close attention to ads in a pending status and often reach out to the PO to understand where things are stuck, ensuring they don’t miss the campaign deadline. With support from the PM, I implemented the following design improvements to address this issue:

1)Introduced color-coded labels (e.g., yellow for pending ads) to help advertisers quickly identify high-priority items.

2)Added pop-up progress notifications for pending ads to inform advertisers of their current status. This allows them to detect delays early and take action before the deadline.

image 211.png

Before: the ordinary campaign list

Vector 150.png
image 212.png

After: A campaign list with color-coded labels & ads progress 

Group 2610729.png
Group 2610731.png
Group 2610730.png
Anchor 1

Final Solution - Welcome to the 2.0 AI ad manager

Group 2610785.png

01. Quick Overview of Account Performance

A dashboard enables the advertisers to quickly get the trend and situation of the account and make the decision and strategy accordingly.

Group 2609495.png

02. Customized Report Experience

Users no longer need to search through heaps of data, customize report feature enables them to select specific metrics, generating tailored reports to meet their needs. This enhances efficiency, freeing up time for strategic analysis while ensuring accuracy and scalability

Group 2609495.png

03. AI support for Ad copy

The AI edit provide support users in modifying and polishing ad copy as needed, completing the enhancement process quickly. Not only does it improve the quality and appeal of the ad copy, but also saves users costs and resources

Group 2610926.png
Group 2610787.png

04. Smart AI guidance

AI Ad Manager provides real-time AI guidance to users during campaign creation, empowering informed decisions and optimizing performance efficiently

Group 2610931.png
Group 2610788.png

Performance & Impact

63%

Boost in Task Efficiency

98%

Increase in User Satisfaction

68%

Increase in Task Completion Rate

Final Design

Frame 2609935.png

Light & dark mode version

Slide 16_9 - 26.png

Cross-Platform Responsive Design

Relection

“Small Details are a Big Deal”

This phrase encapsulates one of the most profound realizations I've had throughout this project, and it echoes the wisdom imparted to me by my mentor. As I reflect on the journey of this project, I've come to understand the immense significance of even the smallest elements. Whether it's the precise font size, the subtle nuances of color contrast, or the seemingly trivial placement of buttons, each detail plays a pivotal role in shaping the user experience.

Through the course of this project, I've learned to approach design with a meticulous eye for detail, recognizing that every pixel matters. By prioritizing the refinement of these small yet critical elements, I've been able to elevate the overall quality of the user experience. Moving forward, I will continue to embrace this philosophy, understanding that it is often the small details that make the biggest difference.

Next Projects

image 394.webp
Frame 1171275831.png
9b8e66_f7e3cf33923344b3acb2e6611ffce9fb~mv2.webp
bottom of page