Background

Community was an early-stage startup with a bold vision: to make SMS the most personal and effective communication channel between public figures and their audiences. Celebrities, creators, and brands used Community’s platform to text directly with their fans.

When I joined, the company was small but ambitious, and our Cofounder had been leading design efforts up to that point, but with a growing product roadmap and two distinct platforms: iOS and web, it was clear that Community needed scalable, cohesive design foundations. I was hired as the first product designer to make that happen.

Problem(s)

We hit the ground running, shipping things quickly, but the design system hadn’t kept pace. Our interfaces lacked visual consistency, the visual styles felt outdated, and our Figma design files were fragmented and unorganized. Legacy components were scattered across Sketch and InVision, and the absence of any design system made collaboration with engineers inefficient and error-prone.

The experience we had at that time also lacked some basic frameworks for displaying feedback to our user; such as: loading states, empty states, adequate error states in forms, and consistent interaction treatments when things are hovered, pressed, focused, disabled, etc.

Both platforms posed their own challenges:

• iOS needed to feel native, similar to Apple Messages as many customers screen recorded their use of the app to prove authenticity to those they’re texting with.

• Web looked like a completely different app. It was buggy and it wasn’t mobile responsive.

I needed to scale my work across multiple teams in our growing product organization, and I needed a modern, flexible system to support upcoming features.

Discover

To get up to speed, I conducted a full audit of our interfaces—examined each screen, modal, alert, and banner across all platforms. I studied screen recordings of customer sessions, met with stakeholders from customer support and engineering teams, and reviewed downstream roadmap projects to get a glimpse of what our design foundations would need to accommodate.

My goal was to gain an understanding of the current state of design at Community, and how it was being used (or not used).

Define

From the audit and stakeholder interviews, I crafted a set of design goals:

• Modernize our interface to match best-in-class messaging platforms.

• Establish cohesive styles (e.g. typography, colors, and icons) across both platforms.

• Create component libraries for iOS, Web, and also a shared library for global elements.

• Make designs more accessible, with clear feedback states for users’ actions.

I aligned these goals with product and engineering leadership, and began the foundational work in Figma.

Design

Using Apple’s Human Interface Guidelines, I redesigned our mobile app with Apple’s SF font family and matching iconography. These decisions were optimal for pairing our experience with our user’s familiar messaging app. For our web app, I used the Inter font family. I’d proposed several different options for our typography to our product leadership, but ultimately we fell in love with Inter for its legibility and modern, streamlined visual qualities.

Design debt was addressed head-on. I eliminated many redundant components and variations. Table cells and inputs like form fields were optimized for legibility and spacing inconsistencies were cleaned up. Having these shared details across web and mobile platforms gave our app a cohesive look and feel that was much more refined than before.

Color styles were simplified for easy tokenization across light and dark modes:

• Background color options (primary, secondary, and interactive)

• Borders are all the same color (except for interactive elements or destructive)

• Text colors became: heading, paragraph, caption, disabled, interactive, destructive.

• Interactive feedback (i.e. atop our various backgrounds, what if users were to hover, press, activate, focus, etc.)

• Distinct message bubble colors (e.g. sent, received, etc.)

Deliver

For design decisions shared across both platforms mobile (iOS) and web, I organized a library of color values and tokens in a Figma file, called ‘Foundations’.

Then we needed separate Figma component libraries for mobile and Web. Web requires specific attention to responsive breakpoints (how things look on big to small screens). I documented spacing rules, color usage, and interaction patterns, ensuring that handoff to engineering was smooth and scalable.

During implementation, I partnered closely with front-end teams to QA the new builds, identifying discrepancies before our release. This tight feedback loop helped us ship quickly and consistently across both platforms.

Impact

The new design system delivered immediate and lasting impact:

• Faster design velocity: New features could be designed and shipped quickly thanks to reusable components.

• Improved engineering handoff: Shared documentation and Figma libraries reduced design-implementation gaps.

• Better UX: Visual polish, platform responsiveness, and improved feedback patterns made the app feel faster and more reliable.

• Expanded usage: Fixing the mobile responsiveness of the web app opened the door to non-iPhone users and supported our move toward international markets.

• Design team scalability: As the team grew, new designers could onboard quickly and contribute with confidence.

Ultimately, the design foundations I built at Community enabled our small team to deliver high-quality product experiences with speed, confidence, and cohesion.