Project Overview

When Desktop-Only Workflows Need to Travel

Yahoo!'s DSP lets advertisers create, manage, and track campaigns, but it was built entirely for desktop. The objective: translate those complex advertising functions into an intuitive mobile interface, built natively for iOS and Android.

7
UX Designers on team
2yr
Project duration
2
Platforms: iOS & Android
5
Design thinking phases
My Role: Senior UX Designer
Early-stage research & usability testing
Cross-platform, user-centric solutions
Human Interface & Material Design guidelines
Accessible, scalable visual patterns
Platform-specific interaction patterns
Data visualization & campaign management
iOS Design Android / Material Design User Research Personas & Journey Maps Wireframing Prototyping Usability Testing Data Visualization Accessibility

Lean UX Process

Think → Make → Check

Lean UX · Build–Measure–Learn
3 cycles · 3 test rounds · continuous
01
Think
Discover
+ Define
Phases 01–02
Assumption
"Desktop users abandon mobile campaign setup because nothing is designed for thumb-reach or a 6-inch screen."
What we ran
Contextual interviews, surveys, and observation sessions with active Yahoo! DSP users. Synthesized into two primary personas and a cross-platform journey map that exposed exactly where confidence collapsed.
Methods
Interviews Surveys Journey Map 2 Personas
↓ loop
02
Make
Ideate
+ Prototype
Phases 03–04
Experiment
"Two independent design tracks - not one shared UI - will feel native on each platform instead of like a compromise on both."
What we built
Cross-functional sprints generated 30+ concepts filtered by platform convention. iOS and Android prototyped separately - each honoring its own navigation model, typography, and interaction patterns. Paper → Figma wireframes → hi-fi.
Methods
30+ Concepts HIG · iOS Material · Android 2 Tracks
↓ loop
03
Check
Test
+ Measure
Phase 05
Evidence
"3 rounds of usability sessions on both platforms before thumb-reach felt effortless."
Outcome
Platform-specific approach validated at scale across iOS and Android. Each iteration tightened thumb-reach comfort, reduced error rates, and raised store ratings.
Results
+40%
Satisfaction
4.6★
App Store
–50%
Error reports
×3
Iterations
↺ Each cycle informed the next - the loop ran 3 times before ship
Phase 1: Empathize

Interviews · Surveys · Contextual Observation

Conducted interviews, surveys, and direct observations to understand advertiser workflows, pain points, and mobile expectations, all before designing a single screen.

Design thinking research

Research synthesis: advertiser workflows & pain points

Mobile wireframes

Early wireframe sketches from empathy sessions

  • Complex campaign setups with no mobile-adapted flow
  • Inconsistent UI appearance across mobile surfaces
  • Scalability struggles as features expanded without mobile guidance
  • Inadequate data visualization for on-the-go decision making
Phase 2: Define

Personas · Journey Maps · Problem Statement

Built personas and journey maps to sharpen the problem. They surfaced that complex campaign setups and inadequate data visualization were the core barriers to mobile adoption.

How might we transform complex advertising functions into an intuitive mobile interface, designed natively for both iOS and Android?
Phase 3: Ideate

Brainstorming · Cross-functional Collaboration · Platform Guidelines

Facilitated brainstorming sessions with designers, developers, and PMs, focusing on platform-specific guidelines (Human Interface for iOS, Material Design for Android) to shape genuinely native solutions.

Ideation mobile 1

Cross-functional ideation: iOS vs Android design principles

Ideation mobile 2

Platform-specific interaction patterns exploration

Phase 4: Prototype

Low-Fidelity → High-Fidelity · iOS + Android

Progressed from lo-fi wireframes to high-fidelity prototypes, tailored separately for iOS (Human Interface Guidelines) and Android (Material Design) to honor each platform's native conventions.

Lo-Fidelity Wireframes
iOS Lo-fi Wireframes
images/mobile-lofi-ios.jpg

iOS lo-fidelity wireframes: navigation & campaign flows

Android Lo-fi Wireframes
images/mobile-lofi-android.jpg

Android lo-fidelity wireframes: material design structure

Hi-Fidelity Prototypes
iOS Hi-fi Prototype
images/mobile-hifi-ios.jpg

iOS hi-fidelity prototype: final interaction design

Android Hi-fi Prototype
images/mobile-hifi-android.jpg

Android hi-fidelity prototype: material design system

iOS Human Interface Guidelines
NavigationBottom navigation bar
InteractionSwipe gestures
VisualsHIG-compliant, minimal design
BackNo hardware back button
NotificationsApple Push Notification service
PermissionsRequested contextually during use
OnboardingAnimations, minimal design
ErrorsSubtle animations, gentle prompts
TypographySF Pro (system font)
AnimationPhysics-based spring curves
App IconRounded square, no transparency
Status BarLight / dark via Info.plist
Android Material Design
NavigationNavigation drawer
InteractionLong-presses & overflow menus
VisualsMaterial Design 3 components
BackHardware back button
NotificationsFirebase Cloud Messaging
PermissionsRequested upfront at install
OnboardingPractical information delivery
ErrorsExplicit feedback & suggestions
TypographyRoboto (system font)
AnimationMaterial motion & shared transitions
App IconAdaptive icon with foreground/background layers
Status BarControlled via WindowInsetsController
Phase 5: Test

Usability Sessions · Both Platforms · Iterative Refinement

Ran structured usability sessions on both iOS and Android, iterating on navigation clarity, accessibility, and visual consistency until the experience felt effortless on each platform.

  • Navigation patterns refined for thumb-reach and one-handed use
  • Accessibility validated across both platforms for contrast and tap target size
  • Visual consistency confirmed without compromising platform-native feel
  • Campaign management flows simplified to reduce steps and cognitive load

iOS & Android

Similarities & Differences

What Both Platforms Share
iOS and Android similarities
Core FunctionalityBoth apps deliver identical DSP features (campaign creation, budget management, reporting, and optimization) with full feature parity across platforms.
Branding & AestheticConsistent Yahoo! color palette, typography scale, and iconography across both platforms. Users feel the same product, not two different apps.
User-Centric DesignResearch insights from both platforms were synthesized into a single UX strategy. Every feature prioritized the advertiser's real workflow context before any screen was designed.
Data VisualizationCampaign pacing, spend, and CTR visualized with identical chart types and health indicators. Complex DSP data made readable on a 6-inch screen, on both platforms.
AccessibilityWCAG 2.1 contrast ratios, minimum 44pt tap targets, and VoiceOver/TalkBack support implemented on both platforms. Accessibility was a design constraint, not an afterthought.
Feedback MechanismsInline validation, loading states, success confirmations, and error messaging share the same voice and visual language. Users always know what's happening at every step.
Security FeaturesOAuth 2.0 authentication, session timeouts, and secure token handling implemented consistently to meet Yahoo!'s enterprise-grade security requirements on both platforms.
Push NotificationsSame alert logic across platforms: budget pacing alerts, performance drops, and approval requests, all delivered through each platform's native notification channel.
Campaign DashboardSame information hierarchy on both: health score → pacing bar → key metrics. Advertisers monitor 10+ campaigns at a glance without drilling into a single detail view.
Filtering & SearchConsistent filter taxonomy and search behavior on iOS and Android. Advertisers never have to relearn how to find a campaign when switching between devices.
Real-time Data SyncCampaign data refreshed on a consistent interval with pull-to-refresh and visual sync indicators. Predictable behavior regardless of which platform you're on.
Dark Mode SupportFull dark mode respecting system-level preferences on both platforms, reducing eye strain for advertisers monitoring campaigns in low-light environments.
Where They Differ
iOS and Android differences
Navigation PatterniOS uses a bottom tab bar for persistent navigation. Android uses a navigation drawer, consistent with Material Design and deeply familiar to Android users.
Interaction ModeliOS is swipe-dominant: swipe to dismiss, swipe to reveal actions. Android relies on long-press and overflow (⋮) menus. Both feel native and expected on their respective platform.
Visual Design LanguageiOS follows HIG: flat surfaces, SF Symbols, system-native controls. Android uses Material Design 3: elevated cards, ripple effects, FABs. Each platform keeps its own visual grammar.
Back Button BehaviorAndroid's hardware back required designing every screen to handle back navigation explicitly. iOS has no hardware back, so navigation relies entirely on in-UI controls and edge-swipe gestures.
Push Notification ServiceiOS uses APNs with rich notification templates. Android uses Firebase Cloud Messaging with expandable styles and inline action buttons, each maximizing their platform's notification strengths.
Permission FlowiOS requests permissions contextually with a mandatory system dialog. Android permissions are requested at install, which required different onboarding copy and rationale strategy for each platform.
Onboarding StyleiOS onboarding uses animated transitions and minimal text. Android delivers practical, information-forward walkthroughs, consistent with Material Design's utility-first approach to new-user experience.
Error HandlingiOS surfaces errors through subtle animations and gentle language (Apple's calm design voice). Android uses snackbars and modal dialogs with direct action suggestions, more explicit and instructional.
Typography SystemiOS uses SF Pro at HIG-specified tracking and weight scales. Android uses Roboto with Material's type scale, with different metrics requiring platform-specific type ramp adjustments for optimal readability.
Animation SystemiOS uses physics-based spring curves, natural and momentum-driven. Android uses Material motion's shared element transitions and choreographed sequencing. Both are purposeful, but the motion philosophies are distinct.
App Icon FormatiOS requires a single rounded-square icon across multiple resolutions, no transparency. Android uses adaptive icons with separate foreground and background layers, enabling launcher-defined shapes and animations.
Status Bar ControliOS status bar is set declaratively via Info.plist or UIViewController. Android is controlled programmatically via WindowInsetsController. Different implementation approaches, same consistent light/dark behavior.

Results & Impact

Success Metrics & Measurement

+30%
Session duration increase
+25%
App usage frequency
+40%
User satisfaction improvement
4.6
App store rating (from 3.5)
–50%
Error & problem reports
"A user-centered design thinking approach and platform-specific standards led to a successful redesign, with measurable gains in engagement, satisfaction, and app store performance."

Want to see the full process? Wireframe progressions, usability findings, or platform-specific decisions: connect on LinkedIn.

Design Leadership

Calls I Made on This Project

Decision I owned
Separate iOS and Android interaction models

The team default was a single unified pattern designed once and adapted to both platforms. I argued against it. iOS and Android users have deeply ingrained platform conventions - navigation patterns, gesture models, feedback mechanics - and designing against those conventions creates subtle friction that users can't name but definitely feel. I designed platform-specific interaction models for the core flows, added 2 weeks to the schedule, and the post-launch satisfaction scores validated the tradeoff: iOS users reported significantly higher comfort with the app.

What I pushed back on
The "view-only" mobile scope

Product initially scoped mobile as a monitoring-only experience - see campaign performance, take no action. It was the safe scope. Session data from our analytics told a different story: advertisers were checking campaigns on mobile precisely when something needed adjusting - at events, during meetings, in transit. "View-only" in those moments meant they'd have to remember to act later, which often meant they didn't act at all. I brought the data to the product review and argued for a Quick Edit capability. It shipped. It became the most-used feature on mobile.

What got cut and why
Full budget reallocation flow

We prototyped a multi-step budget reallocation flow on mobile - moving spend from underperforming campaigns to stronger ones in a single interaction. In testing it was a UX disaster: the interaction required too many precision taps, the stakes were high enough that users second-guessed every step, and the mental model of "reallocating budget" didn't map cleanly to a small screen. We cut the full flow and replaced it with single-field Max Bid editing with a clear impact preview. Smaller scope, dramatically higher confidence, zero rollback requests post-launch.


User Feedback

What Advertisers Said

Collected after 90 days post-launch via structured advertiser surveys and in-app feedback panels.

5.0

"I used to wait until I was back at my desk to check campaigns. Now I check pacing every morning before my first meeting. It's completely changed how I manage budgets."

DM
Digital Media Buyer
Yahoo! DSP, Enterprise Advertiser
5.0

"The notifications are a game changer. I got an alert that a campaign was underpacing, approved a budget adjustment from my phone, and saved the flight. All in under 5 minutes."

CA
Campaign Manager
Yahoo! DSP, Agency Partner
4.5

"Finally a DSP that actually works on mobile. The Android version feels native. It doesn't feel like a desktop site crammed into a phone. My team uses it every day."

PD
Programmatic Director
Yahoo! DSP, Media Agency
5.0

"The dashboard health indicators are brilliant. I see at a glance which campaigns need attention without digging through tables. It's exactly what mobile should feel like."

SM
Senior Media Strategist
Yahoo! DSP, Brand Advertiser
5.0

"I approved three campaign changes from an airport lounge last week. That would have been impossible before. This app gave me back hours I used to spend waiting to get to a computer."

TR
Trading Desk Lead
Yahoo! DSP, Performance Team
4.5

"The filter experience on iOS is really well thought out. It's not just a port of the desktop. You can feel that someone actually designed it for a thumb, not a mouse."

AO
Ad Operations Manager
Yahoo! DSP, In-house Team
4.6
Average app store rating
+40%
User satisfaction improvement
–50%
Drop in error & problem reports
+25%
Daily active usage frequency
Previous
Specialized Work
Design System
Next
Specialized Work
Research