Product Designer
Snapchat
instant messaging camera app
October .22 — February .23
Duration: 5 months
San Francisco, CA
Tools: Figma, UserTesting, Adobe Illustrator
Team: Product Manager, Lead Product Designer, Enterprise Engineers, UXR
Ads manager overview
Ads Manager is Snapchat’s monetization tool that lets advertisers create and manage their Snapchat ads. It is also a platform where users can create, update, and view performance for all of their campaigns, ad sets, and ads. Additionally, Ads Manager is a secure way to manage settings. This includes ad accounts, members and their roles, and billing & payments.
We want to provide a mobile-optimized experience that simplifies the mobile UI, while keep the most frequent post-creation features to Manage Ads.
Opportunity
Mobile traffic and usage on Ads Manager has been consistently growing over the years, across all types of advertisers. Unfortunately, Snap Ads Manager’s current post-creation experience is not friendly on mobile devices — it’s cropped, hard to navigate, and overwhelming. Our “mobile-friendly” experience is limited to a small portion of Ads Manager (Instant Create) and isn’t optimized to promote and deliver on our core value proposition and emerging use cases.
Objectives
● Increase activation & retention rates of our mobile-only users
● Improve feature set for our mobile-only & cross-device users
● Support emerging monetization use cases where mobile is the first touchpoint
● Reduce the competitive gap in our mobile experience
Mobile is often the first touchpoint
61% of new organizations were created on mobile (March 2022). Mobile is often the way users first experience Ads Manager, as seen in session data and new org creation data. This doesn’t include provisional orgs - only organizations with ad accounts. Nordic countries, which have very low mobile sessions, still have elevated first user sessions on mobile (20-30%).
Majority of organizations are
mobile-only.
In Feb, 112K organizations out of 186K (60%) had at least one member who used mobile. 96K (52%) of all organizations used only mobile.
Background
To kick-start mobile MVP, we gathered key features that advertisers will most likely utilize in mobile view. We did this by asking general questions while curating user stories for all necessary features.
General usage questions
1. What actions are important for advertisers to do on mobile when they are managing their ads?
2. When and under which circumstances would advertisers prefer to use their mobile device to manage their ads?
3. What are the most important metrics / data / status for advertisers to see about their campaigns?
4. Any additional tasks (manage account, edit business address, change billing, etc.) they would find very useful to be able to do on mobile? (we can show some visual mocks here)
5. Do advertisers even use competitor mobile platforms?
a. If they do, what would they do on these platforms?
b. If they don’t why don’t they? Is creating and managing ads on mobile generally too technical?
Approach
As the lead product designer, I scoped a list of features I needed to create screens for.
● Navigation
● Manage Ads
● Alerts and Notifications
● Business Information and Payments
Questions
Navigation
As an advertiser, I want to be able to easily find the things I’m looking for and take actions when I’m on a mobile device without confusion
Manage Ads
As an advertiser, I want to be able to monitor the basic status of my campaigns on the go to make sure they’re running correctly and I am getting the expected performance.
View Alerts & Notifications
As an advertiser, I want to be able to receive notifications and alerts on my phone, being notified what’s wrong about my campaigns on time, and then I can sign onto my desktop Ads Manager to address it.
Finalized User Stories
Navigation
As an advertiser, I want to be able to easily find the things I’m looking for and take actions when I’m on a mobile device without confusion.
1. [MVP] A consistent top nav bar with a hamburger menu that opens a side nav to navigate between features & tools
a. By default, land users on mobile optimized mode if they’re using a mobile device
b. In Mobile optimized mode, hide menu items in side nav that we don’t support
c. Offer a way to switch between Mobile optimized mode / Desktop mode. Desktop mode would give users full access to all features, including pages that are not mobile friendly. A dialogue to nudge users to use desktop device if they want to switch to desktop mode)
2. [MVP] Select and switch between ad accounts
Manage Ads
As an advertiser, I want to be able to monitor the basic status of my campaigns on the go-to make sure they’re running correctly, and I’m getting expected performance.
1. [MVP] View my active ad campaigns to make sure they’re running correctly
2. [MVP] View the performance of my active ad campaigns and how much money i’ve spent on each campaign (Core Metrics: swipe-ups, ePSU, spend, etc)
3. [MVP] Change date picker to a different date range
4. [MVP] View delivery (ad set) settings of a campaign by each ad set
a. Change bid / budget of an existing campaign
b. Pause / Stop / resume a campaign
5. [MVP] View a preview of the ad creatives of a campaign by each ad creative
View Alerts & Notifications
As an advertiser, I want to be able to receive notifications and alerts on my phone, being notified what’s wrong about my campaigns in time, and then I’ll sign on to my desktop AM to address it.
1. [MVP] View the alerts in the notification center today
2. [MVP] View in-page alerts
3. [MVP] Allow users to take basic actions (e.g. Edit Payments, what else??) and show a notice to direct them to address other alerts on a desktop device
4. [MVP] Manage Accounts: View / update my business name, address etc.
5. [MVP] Billings & Payments: View / update my payment method
Journey Map
Snapchat's advertisers’ are broken into two primary personas: small business users (SMB) and enterprise users. Using pre-existing personas, I mapped out paths they will frequently visit in mobile. The goal is to create a drill-down navigation in contrast to the tap-tab navigation between campaigns, ad sets, and ads.
Once an advertiser opens the “Manage Ads” tab, they are presented with a set of campaigns, aggregated key metrics of campaign sets, date picker, and “search campaign feature”.
Desktop Manage Ads: UX Audit
In addition to creating a journey map, we conducted UX audits on non-mobile-friendly areas in Manage Ads desktop view. There are four areas: date picker, metric chart, and the data table.
1. Date Picker
Date picker performs well on desktop. However, it is super broken on mobile. Something to think about, when translating towards mobile layout, is to consider a full-screen modal takeover, while keeping some native controls.
2. Dropdown
I originally thought this was a simple tabular layout. This action took me a second to figure out thatIt is a tab / dropdown / tooltip. I only accidentally discovered that there was a drop-down that gets activated once you click on the tab. The interaction seems like double click to get to the filters?
3. Data Table
The bigger question would be, is this the best way to show campaigns/ad sets/ads on mobile? On desktop, an advertiser can switch between tabs: Campaign, Ad sets, and Ads. You can select certain elements on the table, which is shown by a tag with a number selection. This can then also be deselected using the “X” on the tag. You can view your selection by clicking on “view selected”
Competitor Analysis
We went through the of identifying competitors in Monetization, researching their different marketing strategies. We looked at TikTok, Twitter, Google, and Facebook. Meta’s mobile platform is the closest to our direct competitor. This helped us to analyzes Snapchat’s current weaknesses in their Manage Ads tab.
Sketches for Low-Fidelity Explorations
After creating a user journey map & analyzing Facebook’s Ads Manager, I came up with some solutions. These solutions include improvements for: global navigation, modal treatments, clear data metrics, statuses, business details; as well as screens for campaigns, ad sets, and ads.
SDS Style Guide & Component Library
The concept of Snap Ads Manager’s brand identity represents simplicity and clarity. Using the 60:30:10 formula, we limit Snapchat’s yellow brand color. However, the color is sprinkled over the interface for brand association.
Medium-Fidelity Prototype for Usability Testing
Click here to view the SMB (small business owners) prototype
Click here to view the Enterprise prototype
After creating wireframes for the following touchpoints and expanding Snapchat’s web design system, I created UI screens for Manage Ads’ navigation, modals, data metrics, business settings, and campaign/ad set/ad levels. In addition, I had to prepare two different prototypes for two types of users: SMB users and Enterprise users.
Navigation
Manage Ads contain a global menu, select organization tab, and breadcrumbs.
Modals & Data Metrics
Business Settings
Campaign Level
Ad Set Level
Ad Level
Ting Chang ©️ 2023 | Last updated: March 2023