Passage

A platform connecting users to 3D virtual experiences. The interface makes it easy to discover worlds, manage assets, and engage with communities.

Project type: End-to-end web application

Role: UX designer (reported to Mike Cianni, CTO, Passage)

Industry: Metaverse, Gaming, Social Networking, Web3 & NFTs

Tools: Figma, Slack

Duration: Q3 2022 - Q2 2023

Problem Statement

Users entering the Passage platform need a simple and intuitive 2D interface that helps them discover new experiences, manage digital assets, and connect with others—without feeling lost in an overly technical or complex virtual ecosystem.

Empathize

Understanding the Users and Context

Objective: Create a familiar, easy-to-use 2D interface for users to discover games, manage assets, explore NFTs, and engage socially.

Activities Done:

Stakeholder interviews to understand business vision and key goals
Competitive analysis (Spatial, Roblox Studio)

Observations:

First-time users feel overwhelmed by “metaverse” complexity
Navigation between features (games, chat, NFTs) was unclear
Users need clear entry points to access and manage virtual experience

Define

Identifying the Core Problem

Objective: Clearly articulate the problem based on user needs and insights.

User Needs:

A familiar, intuitive 2D interface to begin their Passage journey
Easy access to discover new worlds, communities, and trending events
Ability to interact with friends, communities, and messages without leaving the dashboard
Integrate favorites, notifications, and friend activity into the interface

Design Goals:

Create a clean, modern dashboard UI that reduces cognitive load
Provide quick access to key sections: Discover, Explore, Social Feed, and Chat
Implement real-time social elements like friend lists, notifications, and direct messages
Enable smooth navigation and scalability across devices and browsers

Ideate

Arriving at Solutions

Objective: Explore a wide range of ideas to solve the defined problem.

Design Opportunities:

Create a card-based dashboard that is visually rich but clear
Build sections for Discover, Social Feed, and Explore
Enable real-time chat and social features without switching context
Integrate favorites, notifications, and friend activity into the interface

UI Elements Considered:

Tabs for quick content filtering
Responsive cards for assets, games, and events
A side drawer for chat (accessible from any screen)
Right sidebar for friends list and presence
Hover states for quick actions (e.g. Buy Now, Add to Favorites

Prototype

Designing Flows to Refine Usability

Objective: Create interactive versions of the application to test key functionalities and user interactions.

High-fidelity Mockups

Tools Used:

Figma for wireframes and high-fidelity mockups
FigJam for information architecture
Slack for communication

Key Screens Designed:

Home Page with Hero section displaying Featured Games, News section showing Updates and announcements, Discover section, Social Feed, and Latest Market Drops
Discover Page with Tabs for Trending, Suggested Games, Newest Experiences, Upcoming Events
Explore Page with Marketplace view of NFTs and in-game assets
Social Page with scrollable activity feed

Test

Refining Based on User Feedback

Objective: Validate assumptions, discover usability issues, and iterate based on feedback.

Testing Activities:

Internal walkthroughs with creators and early users
Interactive prototype demo via Figma
Stakeholder feedback sessions
Design QA with dev team for implementation readiness

Key Feedback:

Card hover states improved engagement
Suggested adding sort options in Explore (e.g., "Price: High to Low")
Friend sidebar helped boost user sense of community
Simplified navigation made onboarding smoother for users

Impact & Takeaways

Final Outcome:

Streamlined 2D entry point into a rich 3D ecosystem
User friendly discovery click-throughs to worlds
Improved asset purchase flow and friend engagement
Scalable design system now used across other Passage modules

What I Learned:

Designing for familiar entry points helps users transition smoothly into complex or immersive ecosystems
Card-based UI and structured filters improve discoverability of diverse content like games, assets, and events.
Designing for scalability ensures the interface can evolve as the platform and user base grow.

Final Thoughts

Designing a 2D interface for a metaverse platform taught me the importance of clarity and comfort in unfamiliar digital environments. The challenge was balancing familiar Web2 behaviors with the power and openness of Web3/immersive tech.