Switch Dashboards along with menu

Question

I am working on a mobile application which will have two different areas in same app.

Suppose:

• Area 1 -> Learning Management System
• Area 2 -> School Management System

Both areas will have its own dashboard. I am trying to create a design where a user can switch the dashboard from one to another. However, when the dashboard changes the sidemenu changes too.

My Question is, What would be the best way to Switch the dashboard?

Here is the mockup i have created but i think there is a more better and easy way.

With Menu

Answer 1

Adding a bit to ntnlbd's answer:

---

You can either have the main, top-level nav in the navigation drawer (the hamburger menu) and the secondary stuff in a linear hierarchy

Or keep the tabs and use the linear hierarchy together with a preview of the dashboard (similar to what ntnlbd meant with cards)

Or anything else that clearly separates primary and secondary navigation.

---

Some explanation

The point is that the top level navigation has to be very clear to the user and he always has to know in which one he currently is. Notice how I used the app bar in the first example to always display the chosen category.
You'd have to be careful here with the linear navigation, as you need to visualize the path the user has taken to get here. Something like breadcrumbs:

There also has to be a clear distinction between primary and secondary navigation. As Google shows well in the following image, using too similar looking elements results in confusion.
Bad example:

You have 2 top categories and a handful secondary categories, visually that means that the secondary ones have to follow after the primary selection. The user expects the process to be like this:

In your case having the secondary navigation in the hamburger menu would be like the opposite in the user's mental model, choosing the primary on the second level and the secondary on the first level.

Further reading: Understanding Navigation by Google

---

Just make sure to follow these basic rules and I'm sure any design you come up with will be understandable for your users.

Answer 2

The hamburger menu is primary - Tabs are secondary

The solution you presented seems a bit counterintuitive. A menu hidden behind a hamburger icon is usually used as primary menu, while tabs usually play a secondary role for navigation. In your design, as far as I understand, those 2 are switched, which may result in users being confused why primary menu items have changed when a user navigates to the secondary (tab) menu.

---

Solution Ideas

One solution would be to put learning and school into the primary hamburger menu and place secondary navigation into scrollable horizontal tabs (I assume you have quite a few items there)

Here is an examples from the material guidelines.

- or -

If you only have 3-5 items in the secondary nav, use the bottom bar navigation pattern.

But don't use both as it will flood the screen with navigation options.

Alternatively, you can stick with the design you currently have. Instead of adding secondary navigation to the hamburger menu, reserve that for other functions, like user info and logout. Use cards to segment items for each dashboard in one long scrollable space.