Design systems · Cross-platform product design

Building parity across web and mobile through a shared design system

I led web product design for Index by Pinger, translating established mobile patterns into a reusable system that brought greater consistency to structure, interaction, and product behavior across platforms.

Role

Lead Product Designer, Web

Role

Lead Product Designer, Web

Role

Lead Product Designer, Web

Role

Lead Product Designer, Web

Team

Design Manager, Lead Mobile Designer, two Junior Designers

Team

Design Manager, Lead Mobile Designer, two Junior Designers

Team

Design Manager, Lead Mobile Designer, two Junior Designers

Team

Design Manager, Lead Mobile Designer, two Junior Designers

Timeline

Approximately four months

Timeline

Approximately four months

Timeline

Approximately four months

Timeline

Approximately four months

Status

Shipped

Status

Shipped

Status

Shipped

Status

Shipped

A shared design foundation connected the established mobile product with the expanding web experience.

The challenge

Web and mobile served many of the same customer needs, but related experiences did not always share the same hierarchy, components, states, or interaction expectations.

The approach

I compared equivalent experiences across platforms, identified the behaviors that should remain consistent, and translated recurring decisions into reusable design-system patterns.

My contribution

I led the web design effort, collaborated with the mobile design, product, and engineering teams, and mentored two junior designers as they contributed to the shared system.

My contribution

I led the web design effort, collaborated with the mobile design, product, and engineering teams, and mentored two junior designers as they contributed to the shared system.

Creating one product across multiple platforms

Index helps small businesses manage customer communication through a dedicated business number and tools for calling, messaging, scheduling, payments, and customer management.

The mobile product provided an established foundation, but bringing the experience to the web required more than reproducing mobile screens at a larger size. Navigation, information density, interaction states, and layout behavior needed to respond appropriately to a different platform.

The opportunity was to create a shared product language: consistent enough to feel like one product, flexible enough to work naturally across web and mobile, and reusable enough to support future work.

Design-system principles

One product, multiple platforms

The same product intent and terminology should carry across platforms, even when the interface adapts.

One product, multiple platforms

The same product intent and terminology should carry across platforms, even when the interface adapts.

One product, multiple platforms

The same product intent and terminology should carry across platforms, even when the interface adapts.

One product, multiple platforms

The same product intent and terminology should carry across platforms, even when the interface adapts.

Shared behavior, adapted expression

Parity should be based on how an experience works and what it communicates, rather than identical layouts.

Shared behavior, adapted expression

Parity should be based on how an experience works and what it communicates, rather than identical layouts.

Shared behavior, adapted expression

Parity should be based on how an experience works and what it communicates, rather than identical layouts.

Shared behavior, adapted expression

Parity should be based on how an experience works and what it communicates, rather than identical layouts.

Complete states

Patterns should account for feedback, errors, empty states, and other conditions beyond the ideal journey.

Complete states

Patterns should account for feedback, errors, empty states, and other conditions beyond the ideal journey.

Complete states

Patterns should account for feedback, errors, empty states, and other conditions beyond the ideal journey.

Complete states

Patterns should account for feedback, errors, empty states, and other conditions beyond the ideal journey.

Reuse before reinvention

Common product needs should begin from a shared foundation instead of being redesigned screen by screen.

Reuse before reinvention

Common product needs should begin from a shared foundation instead of being redesigned screen by screen.

Reuse before reinvention

Common product needs should begin from a shared foundation instead of being redesigned screen by screen.

Reuse before reinvention

Common product needs should begin from a shared foundation instead of being redesigned screen by screen.

Three decisions that shaped the experience

01 · Define parity at the behavioral level

Situation

Related experiences across web and mobile did not always express the same hierarchy, states, or interaction expectations.

Situation

Related experiences across web and mobile did not always express the same hierarchy, states, or interaction expectations.

Decision

I compared equivalent moments across platforms and separated shared product behavior from platform-specific presentation. This established what should remain consistent and where the web experience needed to adapt.

Why it mattered

The team gained a clearer definition of parity. The same task could feel familiar across platforms without forcing web and mobile into identical layouts.

Web and mobile expressions mapped to shared navigation, actions, and feedback behaviors.

02 · Turn recurring decisions into reusable patterns

Situation

When common interactions are solved one screen at a time, small differences accumulate and future work begins without a reliable starting point.

Situation

When common interactions are solved one screen at a time, small differences accumulate and future work begins without a reliable starting point.

Decision

I identified recurring structures, actions, feedback patterns, and interface states, then considered how they should respond to different content and platform constraints.

Why it mattered

Repeated design decisions became part of a shared foundation. New work could begin with established patterns rather than treating every experience as an isolated problem.

Design-system architecture connecting foundations, components, patterns, and platform experiences.

03 · Make consistency a team practice

Situation

A design system only creates value when people understand how to use, adapt, and extend it.

Situation

A design system only creates value when people understand how to use, adapt, and extend it.

Decision

I worked with mobile design, product, and engineering to clarify shared behavior and surface implementation constraints. I also mentored two junior designers as they applied the system and contributed to the broader product experience.

Why it mattered

Consistency extended beyond the interfaces I designed directly. The system became a shared reference point for design decisions, collaboration, and future product work.

Shared product decisions supporting design, product, engineering, and mentorship.

Outcome

Detailed product metrics and internal artifacts are omitted for confidentiality.

The work contributed to closer alignment between web and mobile, a more coherent foundation for recurring interactions, and clearer collaboration around shared product behavior.

More importantly, it strengthened my ability to design at two levels simultaneously: solving the immediate customer problem while considering how the decision should scale across platforms, use cases, and teams.

Closer web and mobile parity

Related experiences moved toward a more consistent hierarchy, interaction model, and product language.

Closer web and mobile parity

Related experiences moved toward a more consistent hierarchy, interaction model, and product language.

Closer web and mobile parity

Related experiences moved toward a more consistent hierarchy, interaction model, and product language.

Closer web and mobile parity

Related experiences moved toward a more consistent hierarchy, interaction model, and product language.

A reusable product foundation

Recurring interactions were translated into shared components, patterns, & states that supported future work.

A reusable product foundation

Recurring interactions were translated into shared components, patterns, & states that supported future work.

A reusable product foundation

Recurring interactions were translated into shared components, patterns, & states that supported future work.

A reusable product foundation

Recurring interactions were translated into shared components, patterns, & states that supported future work.

Consistency beyond ideal journeys

The system encouraged the team to consider feedback, errors, empty states, and other conditions as part of the complete experience.

Consistency beyond ideal journeys

The system encouraged the team to consider feedback, errors, empty states, and other conditions as part of the complete experience.

Consistency beyond ideal journeys

The system encouraged the team to consider feedback, errors, empty states, and other conditions as part of the complete experience.

Consistency beyond ideal journeys

The system encouraged the team to consider feedback, errors, empty states, and other conditions as part of the complete experience.

Systems thinking across the team

Collaboration and mentorship helped extend design-system thinking beyond individual screens and across the wider team.

Systems thinking across the team

Collaboration and mentorship helped extend design-system thinking beyond individual screens and across the wider team.

Systems thinking across the team

Collaboration and mentorship helped extend design-system thinking beyond individual screens and across the wider team.

Systems thinking across the team

Collaboration and mentorship helped extend design-system thinking beyond individual screens and across the wider team.

Transition from isolated design decisions to shared system foundations across web and mobile.

What I learned

This experience changed how I think about product quality.

In mature products, quality is not only found in a new feature or polished screen. It is also found in the connections between experiences: whether patterns behave predictably, whether teams share an understanding of the product, and whether each new decision strengthens or fragments the system.

I learned to treat consistency as a product capability, not merely a visual outcome.

What worked

Defining shared product intent before addressing visual differences gave the team a stronger foundation for cross-platform decisions.

What I would reconsider

I would establish clearer baseline measures for component coverage, consistency, and design-system adoption.

What I would explore next

I would introduce recurring parity reviews and track how shared patterns are adopted, adapted, and extended over time.

Next project

HappyPath

Designing and building a field-ready CRM that connects lead discovery, follow-ups, and route planning for vending operators.

View case study →

Next project

HappyPath

Designing and building a field-ready CRM that connects lead discovery, follow-ups, and route planning for vending operators.

View case study →

Next project

HappyPath

Designing and building a field-ready CRM that connects lead discovery, follow-ups, and route planning for vending operators.

View case study →

Next project

HappyPath

Designing and building a field-ready CRM that connects lead discovery, follow-ups, and route planning for vending operators.

View case study →