Designing a conversation widget and design system.

Make online conversations more human.

Yappa aimed to reduce the toxicity of online conversations by encouraging people to speak through voice and video, show their faces, and take ownership of what they said. The intent was to move away from anonymous trolling and impersonal, bot exchanges.

The widget brought a social community into websites and other publishing platforms. People could browse Yaps, share opinions, follow replies, and record an audio or video Yap without leaving the host experience.

Restyle the core product and prepare for what comes next.

The client needed a complete restyling of its main product based on the brand’s visual language. The solution also needed to serve as a foundation for future products.

The proposed solution was to create a design system from scratch using an atomic approach.

Replace condensed type with a more open reading experience.

Roboto was the primary product typeface. The restyling updated its sizes and uses, replacing the condensed form with the regular, more expanded version to support readability.

The specimen shows 16 px Medium and 14 px Regular, with a 12 px size also listed.

A simple palette with contrast across light and dark themes.

The color approach kept the interface simple and legible, with light and dark themes that could be configured to suit the platform hosting the widget.

Audio recording and review.

The examples extend the recording pattern to audio: a recording screen and a preview with actions to record again or post.

Shared patterns across the community experience.

Discovery, following, notifications, profiles, playback, and settings use the same interaction and visual patterns across the widget.