Subnavigation @ Snapchat
My Role
Systems & Product Designer
Background
In Q2 of 2024, the Data Science Team at Snap Inc. asked the Design Systems Team to look at sub-navigation within the Snapchat app and test the following theory:
A lack of coherence, consistency, and definition in the app’s navigation patterns and visual signposts makes it difficult for users to orient themselves as they move from one experience to the next.
This project landed on my plate, and I started the process by doing a deep dive into two primary sub-navigation patterns within Snapchat - Trays & Subpages.
Snapchat Audit
To better understand and articulate the main problems with sub-navigation in the app, I audited 70+ Tray/Subpage interactions. I looked at directionality, motion, dismissibility, trigger & close actions, gesture, and height/width.
Identified problems included the following:
Motion | The way things move around is inconsistent and confusing.
Triggers and Close Actions imply a different direction than the actual transition.
Gestures don’t directionality align with the transition they initiate.
Dismissibility | It’s unclear how to exit experiences.
Close Action Icons are inconsistent and inconsistently placed.
Subpages with no associated gesture traps users on a screen.
Directionality | Lack of definition on the meaning of horizontal and vertical motion.
Subpages transition from the bottom and from the right with no reasoning or logic.
Competitor Audit
To explore solutions to identified problems above, I audited sub-navigation on Instagram, Tik Tok, and Discord. I looked at how these apps handle each aspect of the tray and subpage experience, and what strategies work best to create a consistent and intuitive experience.
See the full Competitor Audit Insights deck
Primary Insights from the Competitor Audit included the following:
Motion
Trigger and Close Action Icons always align with the direction of transition.
Gestures and direction of movement are always consistent with one another.
Dismissibility
Close action icons are always the same across Trays and Subpages. They are always consistently placed.
Subpages and Trays always have a dismiss gesture (swipe).
Directionality
Vertical motion is contextual.
Horizontal motion is navigational.
Tray & Subpage Guidelines
With our learnings from the Snapchat and competitor audits, I wrote the design guidelines for how Trays and Subpage work in the Snapchat app. Key principles and highlights from our finished guidelines include the following:
