Double top-app bar

Question

I created a webapp-based learning management system, and I'm debating whether a decision I took regarding the top app bar(s) is sound or could cause issues when it comes to user experience and branding of the product.

My app currently has some views where a sidebar is shown on the left in order to navigate, and a top app bar is displayed as well. The top app bar is sticky and always displayed. Here's an example (please disregard the missing UI strings):

On some other views, like the one a student sees while taking an exam, I want to remove the sidebar as I feel that could be distracting and not fit in well with the context of taking an exam.

I still want the user to be able to navigate and have a clue where they are in the app, so I thought of using breadcrumbs. However, putting everything in the top app bar didn't feel right. I decided to have one app bar below with the view title and breadcrumbs. The top app bar isn't sticky on those views, whereas the one below is.

Here's what it look like:

Is it common for apps to use two top bars like in my case? Can you think of any drawbacks on the UX side?

One thing I'm concerned with is that the very top bar disappearing like that can leave the app looking too anonymous, without any hints of branding. I would like something that looks good and is still functional and easy for the user to understand, but I can't come up with anything better.

Answer 1

On the other hand, not having a consistent top bar may cause confusion, surely increase cognitive load for the user each time the bar changes. Putting the breadcrumb in it's own space only when it's needed adds to the consistency, and therefore memorability, of the interface.

Regarding maintaining brand identification, fix the logo in place.

Top bar fully exposed:

 

Top bar scrolled off page:

Answer 2

I don't think there are corporate identification problems for not displaying the top bar logo, in fact almost all the apps that don't have a sticky top bar hide the logo, and those with a double top bar in many cases do so as well. Example muji.eu

The problem I see in your application is that by hiding the top bar and the side bar, you eliminate all corporate references, making the application a simple form with no relation to its visual identity beyond color.

I don't know what the application's use premises are, but I would try to give a visibility option to one of the two elements you hide, such as an expandable sidebar, or some other element that refers to the visual identity of the application. In other words, avoid this simple form with a title: