Streamlining Ad Campaign Creation for Yahoo Japan Advertisers

Summary

Yahoo Japan advertisers reported low motivation to launch new campaigns due to usability challenges and inefficiencies when recreating existing ads on Yahoo Japan’s legacy ads platform. 

Observing competitors, specifically Microsoft Ads’ campaign-import functionality, guided our design strategy. We created a more streamlined campaign sync feature, significantly reducing setup effort. This user-centric approach boosted advertiser engagement and delivered clear business value—one client saw an 800% ad revenue increase after the initial launch.

Role: Product Designer

Team: Director of Product Marketing, Junior Product Manager, Director of Engineering, 7 Engineers

Duration: 8 months

Platform: Web App

Sync Feature Preview

  1. Design Process

2.Hypothesis

How might we allow Japanese Advertisers to easily expand and optimize their advertising campaigns to Yahoo Japan Ads?

By using their advertising campaigns from other platforms? Below are solutions I and the team agreed on.

Solutions:

  • Seamlessly transfer the most used DSP data (Google Adwords) to Yahoo Japan ads. Ideally, as easy as transferring data from one Operating System to another when changing phones.

  • Allow users to be able to configure their campaigns for added flexibility and to adhere to Yahoo Japan ads requirements.

  • Create a way for 3rd party users to manage advertiser’s campaign ads because it is common for advertisers to hire agencies to manage their accounts.

3. Considerations

Before jumping in and wireframing, it was important for me to know the challenges and resources at my expense. This is critical to save us time and prevent me and the team from coming up with solutions that we couldn’t build.

Challenges

  • Yahoo Inc. (Apollo) is a separate entity from Yahoo Japan (Softbank). This meant I had to work with different teams that have slightly different agendas which can present communication/alignment issues.

  • The Front-end engineer came in later in the process which required me to reach out to other teams for technical UI feedback.

  • Transitional time from Sketch to Figma. I had to recreate components in Figma and work with the Design Systems team, which I had to consider when I was coming up with the roadmap.

  • Designing for Japan presents localization/cultural norms in operating computer systems that I had to take into account when designing the interface.

Notable Advantages

  • Direct client involvement meant easier and faster feedback loops when ideating solutions.

  • Having Japanese colleagues was a great resource for me when I was thinking about localization issues. They also came in handy when I had to communicate with engineers who had varying English fluency.

Neutral Considerations

  • Using a log-in API preferred by Yahoo Japan, which can be branded.

  • Data configurations back-end is already in the works by the Engineering team.

  • Using a backend architecture already decided on by Engineering and Product. I just needed to understand the limitations and flexibility of this framework and how it would affect UX.

  • Need for an agency-type product for 3rd party users.

4. Competetive Analysis

Another important aspect before thinking of solutions is understanding what’s out in the market already, identifying existing products, key differences between them, areas to improve, least important features for our customers, and our unique value.

I compared top Demand-Side Platforms such as Google AdWords, Microsoft, and Yahoo Gemini which have features that are relevant to our users.

To the right are standard features available in the market and AdDesk’s unique value is its ability to import Google Ad campaigns to Yahoo Japan ads.

5. Identifying Users

Understanding the users and their roles is foundational when creating workflows. There are four common types of advertiser users, and each has unique roles and access capabilities.

1Auditor

  • Someone who is assigned by the business owner to check advertising operations and budget.

View-Only Access Needs

  • Has view-only access everywhere else in the platform except for the user’s profile page which they can edit.

2.Trafficker/Operator

  • Someone responsible for executing and managing ads/projects.

  • Doesn’t have to be a marketing professional but usually is.

Operational Access Needs

  • Has edit and view access all over the platform except for subscriptions and creating new accounts.

3.Agency Operator

  • 3rd party operator, responsible for executing and managing ads/projects.

  • Typically a marketing professional

Operational Access Needs

  • Has edit and view access all over the platform except for subscriptions and creating new accounts.

4.Business owner/Admin

  • Owner of a small-medium sized business

  • May not be ad-tech savy

Full access Needs

  • This role has full control over the operations of the business including managing the operational expense of using this product. Usually a head of business operations or CEO of a small business.

6.Agencies or 3rd party operators

Advertisers often seek help from 3rd party agencies to help with their advertising needs. Although outsourcing has great benefits to advertisers, it also presents concerns such as agency-caused financial errors, operational errors, and data breaches. That said, separating agency and advertiser platforms would provide added security. The separation of platforms also makes sense from a business-structure standpoint because the agencies’ business model is about managing multiple advertisers. To further support this, we created a way for them to sign on to multiple advertiser accounts in one agency account. Below are the differences of the platforms worth calling out:

Architecture differences

Because the two platforms are structured differently. How information is accessed from each platform is also different. I worked closely with the engineering team to understand the differences and concessions we could make to make space for good and simple UX in a very robust system.

Advertiser IA

In an advertiser account, It is easier for users to access projects. It also has robust settings and account features because budget and billing workflows happen on this platform.

Agency Site Map

The agency account only manages advertiser projects by proxy so its IA is more structured to cater to managing other advertiser accounts. As seen in the IA below its main account is not as robust as the advertiser account because it doesn’t have advertiser data stored locally.

7. User-account interaction

As structures are different, user interaction is also different. This is crucial as this affects how users log in and manage accounts. Below are varying ways users access accounts and manage projects.

1. Advertiser users have direct access to the account and the projects it contains.

2. Agency account users have indirect access to advertiser accounts and their projects. As you can see in the visual, a user has to go through a manager account to manage sync projects by an advertiser.

3. Agency account users can manage and access multiple advertiser accounts through an agency account.

4. Users are independent from accounts. That said, multiple users can have access to multiple manager accounts and advertiser accounts as seen in the visual.

8. Interface Ideation

In the Interface Ideation Phase, showcasing different methods to communicate information visually is important to gather insights (design, technical, and feasibility) from the team effectively. Below are some of the methods I used when creating the interface.

  1. Journey Mapping

Below is a sample of an early exploration of the New-User Workflow. While I was identifying stages and interactions in each stage that new users would/might go through, I was also adding team insights to the map regarding interaction feedback, product feasibility, and technical constraints.

2. Feature Prioritization

On a macro and granular scale, Product Managers and I had to prioritize the “good to have” and “must-have” functions, as this affects the roadmap and the minimum viable product. The intent is to keep the product lean and for users to be able to do what they intended to do using our product - mainly to sync projects and launch to Yahoo Japan.

The images below showcase how we prioritized the configuration pages and got into granular details - defining which settings would be turned on/off by default.

Prioritization

Application

3. Component Creation

As I got into the granular details of each page and its features, I had to pick available components in the design system to achieve specific user goals on a task level. However, in some cases, unique components had to be made to achieve specific tasks in a product. Below is an example of a component I created, initially it was supposed to be a progress bar but expensive back-end work needed to be done for this feature, and a less expensive interaction, which is the stepper interaction can achieve a similar goal.

Below is the progression of the development of this component. Gathering feedback, creating variations, fine-tuning and applying, and testing on the screen and how it fits in the overall page.

Gathering feedback and exploring variations

Fine tuning

Testing and application

4. Wireframing

Another important process of product ideation is wireframing. The challenge with wireframes is knowing your audience — At what fidelity the wireframes need to be to get the idea across and get valuable feedback. Sometimes, wireframes are as simple as boxes and sometimes they are more detailed, including specific placements of elements. In this case (referring to examples below), because it’s a multilayered reports page whose content needed to be clear with multiple functions — I had to make it more detailed. The first image is the wireframe and the second is the final output.

9. Key workflows

The Advertiser and Agency Platforms I designed are robust —with 32+ workflows. For portfolio purposes, I’m showcasing 3 key workflows available on the onboarding workflow for Advertisers.

1.Account Creation

Upon set up, users are required to create a user profile and a business account. The reason is mentioned in prior sections of the page under “User-account interaction”. In simplest terms, users are independent of accounts, meaning they can use multiple business accounts using one user profile.

This is a common practice in Enterprise Tools. We are also following a process from a Login API that Yahoo is using, that said we had to follow the API’s workflow but enhance the UX and stylize it.

User Goal: As an advertiser, I need to set up a user profile and a business account in an advertising platform such as AdDesk to be able to launch ad campaigns into Yahoo Japan Ads.

2. Auto-configure

Auto configure is a 4-step process workflow that is designed for Non-Ad-Tech-Savy customers who want the option of having complex tasks such as setting up advertising campaigns done for them quickly or for it to be automated.

User Goal: As a small business owner, I need to start launching my advertising campaigns fast, so that I can get traction in my business this season.

3. Manual Configure

On the other hand, the Manual configuration workflow is a customizable workflow for Advertisers who aren’t in a hurry, want to have more control over their ad strategy, and want to be very specific about what they are launching.

User Goal: As a Marketing professional, I need to sync my campaign ads in a way that is tailored to my specific goals, to keep my advertising strategy lean and as how I intended it to be.

10. Metrics and Testing

I worked closely with PM and Engineering directors to develop the most appropriate KPIs to test the product’s profitability and effectiveness. This is defined at the beginning stages of the process, the reason is to prepare and understand how we can measure and test the performance of solutions we came up with.

In this phase of the product, the majority of our focus is qualitative, the goal is to test out campaign importing features and if users can launch campaigns successfully. Quantitative testing will be our next priority right after the beta launch because the features aren’t fully flushed out yet pre-beta.

Phase 1 (Beta launch with client)

Outcome Metric

  • Client Sales Revenue/Ad Revenue (Pre, During, and Post Advertising) - Observing sales data from the client before, during, and after launching ads through AdDesk to understand the impact on the Client’s business. This should also inform us of the marketability and effectiveness of the product.

  • The goal is to reach at least a 60% increase in Ad Revenue in 3 months after using AdDesk.

Output Metric

  • Sync 50 campaigns/day with 0-5 failed syncs

Phase 2 (Going public 12 mos after Beta)

  • Total sign-ups - Reflects good marketing efforts and demand from the market

  • Total syncs - Total syncs executed by customers MoM can tell us conversion rates and sales revenue.

  • ROI (Yahoo side) - Tells us the profitability of the new product.

11. Results

Saw an 800% increase in Ad revenue from a major client

Averaging 49.14 successful syncs per week

Successfully launched 2 working platforms in 8 mos

Previous
Previous

Headspace Design System