Multi-Role Ecosystem
Arcatar is a web platform that empowers creators, communities, and organizations to own their content, community, and commerce within fully branded, private-label spaces. As one of two designers on a fast-paced startup team, I partnered closely with product and engineering to define the user experience across four distinct roles: Owner, Creator, Subscriber, and Member.
Designing for multiple roles required bringing clarity to a complex system. My focus centered on establishing the information architecture that governed how each role navigated the platform and ensuring users always understood where they were, what they could access, and the level of control available to them.
WHAT I DID
Information Architecture / Interaction Design / Role-based system design, UX flows, prototyping, cross-functional collaboration
TOOLS
Figma / FigJam / Miro
YEAR
2024
CLIENT
Arcatar
The Challenge
Research & Insights
I conducted a competitive analysis of Discord, Patreon, Substack, and Twitch to understand how established systems communicate identity, access, and hierarchy.
Competitive analysis of established multi-role platforms
Recognized Patterns
A consistent global structure helps users understand their capabilities from anywhere in the platform.
Subtle cues—color, badges, titles—reinforce identity without forcing users to stop and think.
These principles shaped the foundation of Arcatar’s multi-role ecosystem.
Two Core Initiatives
1
IA Matrix
A role-by-feature map that defined what each user could view, create, and manage, creating a clear structure for both design and development.
2
Role Clarity System
A visual framework that made roles easy to recognize through consistent color, hierarchy, and navigation cues.
As features expanded, overlaps and inconsistencies appeared. I created an IA Matrix that defined what each role could view, create, and manage. It became a shared source of truth for design, product, and engineering.
Simplified Role Features - IA Matrix
Key Insights
In early prototypes, Creators and Owners shared many of the same tools, but their goals were very different. Mapping each feature by role clarified where shared components needed tailored experiences or distinct visual hierarchy.
Distinct responsibilities required distinct navigation structures, while still maintaining consistent patterns across the product.
The IA matrix became a cheat sheet that product managers, developers, and designers all referenced. It eliminated ambiguity about who could access what and helped prevent scope creep when new features were introduced.
Prototyping to Clarify Direction
Early in the process, I built lightweight prototypes to test navigation clarity, switching flows, and role recognition. These prototypes surfaced friction points faster than static mocks and helped the team align on critical decisions, such as simplifying the role-switch interaction and increasing the visibility of role indicators.
Role Clarity System
Testing revealed that users with multiple roles often lost track of which context they were in. To solve this, I designed a Role Clarity System that reinforced orientation throughout the experience.
Role clarity system overview
How the System Works
Chips displayed consistently across surfaces labeled the active role.
Each role paired with a distinct color created subtle reinforcement that didn’t interrupt workflow.
Navigation updates based on the active role, showing only relevant features and actions.
A deliberate switching interaction in the sidebar let users change context without confusion.
Flow showing how users can switch roles from the side drawer navigation.
Through color, hierarchy, and consistent language, the Role Clarity System made orientation effortless. What began as a source of confusion evolved into a defining aspect of Arcatar’s usability, creating a quiet but powerful framework that allowed users to move between roles with confidence and context.
Collaboration, Validation, and Iteration
This project required close partnership across disciplines. I worked daily with engineers to align on role logic, technical constraints, and interaction behavior, sharing work early to avoid big reveals and ensure feasibility. Through internal walkthroughs, we identified moments of hesitation—especially during role switching—and iterated by refining navigation labels, role indicators, and visual cues. These adjustments improved clarity, confidence, and cross-team alignment while keeping the system grounded in real user needs and real system behavior.
Key Outcomes
User Understanding
Users could identify their active role within seconds, reducing errors across contexts.
Team Alignment
Shared frameworks aligned designers, engineers, and product managers around a unified structure.
Faster Onboarding
Consistent visuals and simplified navigation helped new users understand roles sooner and navigate confidently.
Visual Consistency
A flexible role model and neutral Owner interface created consistency across branded spaces.
Retrospective
Designing for four user roles highlighted the importance of structure in simplifying complexity. It reinforced how thoughtful architecture and visual language can create user confidence and unify teams. This project deepened my belief that clarity is a form of empathy—and that designing from this principle creates products that feel intuitive, flexible, and trustworthy.