← Back to work

Yappa World Inc · 2020–2022

Giving Online
Communities
a Voice

Designing a conversational audio and video platform — and the design system to scale it — for bloggers, creators, and online communities.

Role
Senior Product Designer
Type
End-to-end UX
Year
2020–2022
Status
Shipped

Yappa is a conversational tool for online communities — it lets users post short voice or video "Yaps" directly on websites, turning static comment sections into living conversations. Designed for bloggers, podcasters, and web publishers, the challenge was building an experience that felt natural whether you were recording audio or watching someone else's reaction.

The product had no consistent design language. Components, color, and typography were fragmented across the platform. I was brought in to design the UX from the ground up and build a scalable atomic design system to unify it all.

Collaborated with Julia Pavlov, Head of Product · Engineering Team
Yappa platform interface
Yappa platform: audio and video commentary embedded directly into websites and community spaces.
S
Situation

A Product Growing Faster Than Its Design

Yappa was solving a real problem — making online communities more human through voice and video. But the product experience hadn't kept pace with the ambition. Inconsistency was everywhere, and it was slowing both the team and the users down.

No design language
Colors, typography, and components varied across the product with no shared foundation. Every new screen was built from scratch, creating visual debt that compounded with every release.
Dual format complexity
Supporting both audio and video "Yaps" in the same interface required careful UX thinking. Each format had different recording flows, playback states, and edge cases that hadn't been designed cohesively.
Cross-platform fragmentation
Yappa had to work embedded inside third-party websites — blogs, publisher pages, podcast sites — each with different visual contexts. The UI needed to feel at home anywhere.
Diverse creator audience
Bloggers, podcasters, and web publishers all had different mental models of what "community interaction" meant. A single UX had to serve all three without feeling generic to any of them.
Project challenges mapped
Challenge mapping: cross-platform constraints, format complexity, and persona-specific friction points surfaced before design began.
The core insight
"The interface needed to disappear. If users were thinking about how to record a Yap instead of what to say, the design had already failed."
T
Task

Design the Experience and the System Behind It

My scope was end-to-end: understand the users, map the flows, design the product, and deliver a design system the team could build from and scale with.

What I was responsible for
  • UX research across three creator personas
  • Feature analysis by user type and use case
  • Information architecture and user flows
  • Audio and video recording UX
  • Atomic design system: tokens, components, patterns
  • Prototyping and stakeholder presentation
The bar we set
  • Recording a Yap takes under 10 seconds of setup
  • The UI works seamlessly embedded on any website
  • One design system serves the entire product
  • Engineers can build new features without design for every component
A
Action

Research, Architecture, Design, System

Every decision started with what we knew about the users. Research shaped the architecture, architecture shaped the flows, and flows shaped the components.

01
User Research and Persona Definition
We researched three distinct creator types — bloggers, web publishers, and podcasters — to understand how each one thought about community interaction, what motivated them to respond, and where current tools were failing them. The differences were significant enough to warrant separate consideration in both the IA and the feature set.
User research documentation
User research: behavioral patterns, motivations, and friction points mapped across blogger, publisher, and podcaster personas.
02
Feature Analysis by Persona
We ran a feature analysis mapped directly to each persona — identifying which capabilities mattered most to each user type, where their needs overlapped, and where the product had to branch. This became the foundation for the information architecture and helped us prioritize what to design first.
Feature analysis by user personas
Feature analysis matrix: capabilities prioritized per persona, revealing shared flows and persona-specific divergence points.
Bloggers: quick reactions, text-to-audio
Publishers: moderation, embeddability
Podcasters: clip responses, fan interaction
Shared: playback, discovery, notifications
03
User Flows and Architecture
We mapped the full user journey for each persona — from discovery through recording, publishing, and playback. Audio and video flows were designed in parallel to ensure the IA could handle both without duplicating logic or creating dead ends. The embedded context added additional constraints that shaped every decision.
User flow diagram
Recording flow: audio and video paths designed as a unified experience with format-specific branching.
User flow diagram 2
Playback and discovery flow: surfacing Yaps contextually within embedded environments.
04
UI Design and Design System
We designed the full UI across recording, playback, discovery, and creator tools — then extracted every reusable pattern into an atomic design system. Tokens first, then components, then compositions. The system was built so engineering could implement new features independently and maintain visual consistency without constant design support.
Yappa UI design
Core UI: recording and playback interface designed for speed and minimal cognitive load.
Design system components
Design system: atomic components built to work across embedded contexts and creator workflows.
Yappa UI screens
Community view: Yap threads surfaced inline, making voice responses feel as natural as text comments.
Design system elements
Component library: tokens, states, and patterns documented as the single source of truth for the engineering team.
R
Result

A Cohesive Platform, Ready to Scale

The design system eliminated visual inconsistency across the product and gave the engineering team the tools to move faster. Users responded to the recording experience with significantly less friction than before.

0
Creator personas served
0
Core components built
0
Format flows unified
0
% uplift in engagement
Visual consistency restored
The atomic design system replaced ad-hoc component decisions with a shared language that worked across every surface of the product.
Faster shipping velocity
Engineering could build new features using existing tokens and components, cutting design-to-dev handoff time significantly.
Recording that felt natural
Users completed their first Yap without instruction. The flow was short enough that hesitation never had time to build.
Embedded-first design
The UI adapted cleanly to third-party contexts without visual clashes, making Yappa feel like a native part of every site it lived on.
"His deep expertise in design systems was instrumental in redefining our platform's user experience, ensuring it was both cohesive and scalable."
JP
Julia Pavlov
Head of Product, Yappa World Inc

Like what you see?

Let's build something extraordinary together.

Get in touch ↗ ← Back to work