I'm working on a mobile responsive web-app whose users can potentially have one, two, or three workspaces (we call them "zones") depending on their user privileges, i.e. Admins get all three zones whereas regular users get one or two. Not all workspaces have the same priority, and users don't often do a lot of switching between them if they're all available, however they can and there are good uses for it depending on their context.
I'm trying to find an elegant way for users to be able to switch between the zones. Currently, both on desktop and mobile devices we have them tucked behind our hamburger menu in the app's primary navigation which we're looking to turn into a bottom nav (on mobile) where we can highlight the most used areas of the platform. Are there any good design patterns that allow for this type of switching between workspaces?
The only example I've come across is Slack's ability to switch between workspaces from their hamburger menu. I feel like this works for them because their workspaces are mutually exclusive from each other, whereas in our app the zones are inter-related so I don't want to bury zone switching too deeply. Though, as I said before, while the zones are contextually related, a user doesn't often need to do much switching once they're in a particular zone.
Hope that makes sense! Would love to hear your thoughts.
EDIT: Just in an attempt to add more clarity, here is an example of how the zones breakdown:
Zone 1: Central zone Zone 2: Community zone Zone 3: Admin zone
Basic Users have access to: Zone 1 Basic Admins have access to: Zone 1 and 3 Premium Users have access to: Zone 1 and 2 Premium Admins have access to: Zone 1, 2, and 3
Each of these zones have their own unique menus, with between 5 - 10 top level menu items, and no more than 2 levels deep. The challenge is in coming up with a way to elegantly show (and NOT show) to the user what zones they have and to be able to switch between them.
