Redesigning Tinder's Navigation

Templates was a 10-week initiative to introduce a foundational pillar in Compass: enabling developers to spin up production-ready components with speed and consistency. I led design for Templates end-to-end—while crafting a long-term vision to differentiate Compass from competitors.

Solution

Emerging with Consistent Patterns

I led a cross-team workshop with the Core, Platform, and Revenue teams to rethink our IA. We approached it from both sides — our users (female, male, and subscriber archetypes) and the product teams (their features and responsibilities). From there, we restructured the IA in a way that made sense for both perspectives, which gave us a set of consistent navigation patterns to work with across contexts.

Redesigning the Iconic Gamepad

One of the biggest outcomes was identifying Tinder’s Gamepad as a navigation pattern. It’s iconic, but long overdue for a refresh. I led the visual design exploration in collaboration with the Core team, running A/B tests on multiple variants. The result was a modernized design that felt fresh but still kept the Gamepad’s brand identity intact.

Codifying and Documenting in Obsidian, Tinder's Design System

From a systems perspective, we codified the new navigation patterns into Obsidian, Tinder’s design system. That meant clear documentation and guidelines, so these patterns weren’t just one-offs but part of a scalable, reusable system.

Scaling the Navigation System

We then began exploring how to scale these navigation patterns to larger breakpoints like iPadOS and Web. This was a chance to stress-test the IA and figure out how to surface both top-level and deeper hierarchies in ways that still felt seamless at different sizes.

Impact

4.6%

Increase in Matches from the Gamepad, a modest improvement as a result of the redesign.

2

Navigational patterns from the experience were removed, simplifying our navigation system, and reducing redundancy.

1.9K

Lines of code removed from the iOS code base as a result of simplifying, and codifying our navigation patterns.

2.4K 

Inserts of the navigation components in the first 3 months or release through Figma

Context

Role & Responsibilities

  • Lead design end-to-end for Templates.
  • Partnered with Product and Engineering to run workshops on simplifying our IA.
  • Collaborated closely with various teams that played a key role in Tinder's IA such as Core and Revenue.
  • Documented guidelines on how to effectively use navigation when creating new experiences in Tinder.

Timeline

8 Weeks

The Problem

Lack of a System

Designers were frequently introducing one-off variations of common patterns—like the iOS tab bar—without alignment or intent. This lack of a system created inconsistent user experiences and made it difficult for the team to establish a clear, opinionated navigation strategy.

Bloated IA

Tinder’s IA had become bloated, with no clear separation between top-level and secondary experiences. New features were often forced into the app without considering the broader user journeys, creating a cluttered and inconsistent navigation.

Redundant Patterns

Multiple navigation patterns existed that solved the same problems in different ways. This not only confused users but also added significant bloat to the codebase, making even small navigation changes costly for engineering teams.

A. Documentation that I produced during the 'Discovery' phase, showcasing Tinder's bloated IA, and how many features were being introduced into the 'Profile' section because our existing navigation patterns where inflexible in introducing new features.
‍
B. An example of the profile section in Tinder's iOS app.
‍
C. Tinder's primary navigation having 7 different tab-items, a mix of what we believed to be primary, and secondary experiences.

Archetypes

Teams

Internal teams needed clarity on how to apply navigation patterns when delivering new features. With multiple redundant options, it wasn’t always clear which pattern to use or where it belonged. Their expectation was simple: clear guidance and a consistent system so navigation wasn’t a guessing game.

Users (i.e Female/Male/Susbcribers)

For users, the priority was a seamless, cohesive experience across Tinder’s many features. They needed to easily distinguish between premium features they paid for and essential features like safety, without confusion or friction in the navigation.

The Process