Stacked modal dialogs (with Material Design)

Question

I'm designing a Material Design app where users can edit items via a lightbox-style modal dialog. This is a hard constraint, so avoiding the lightbox is not an option.

Within the dialog, there is an optional sub-workflow which needs a separate panel.

To illustrate (click to enlarge):

The Material Design guidelines are silent on UX behavior for stacked modals. They provide guidelines for scrolling content, but I'm dealing with a sub-workflow so appending content to the dialog isn't really a good option.

Some alternatives I'm considering:

1. Replace the content of the dialog with the sub-workflow content (cross-fade). This eliminates the awkward nested modal, but I'm not sure whether crossfades are compliant with Material Design physics, or whether they may disorient users.

2. Push the dialog left in a wizard-style animation where the dialog moves completely or partially off-canvas and the sub-workflow dialog slides in. This avoids the vertically stacked modals, but is more associated with wizard-style UX behavior than with sub-workflows.

3. Flip the dialog to reveal the subworkflow on the "back of the card". Something like this. I'm pretty sure this is not material design compliant as MD physics has a strong preference for XYZ translate motion rather than rotations.

4. Keep the stacked modal. This seems to provide the best affordance for the sub-workflow, but obviously nested modals are pretty crappy visually and can be disorienting.

---

Question

1. Is there Material Design guidance on how to work with multiple modals?
2. Alternatively, is there a general UX pattern that I can use which avoids the stacked modal but provides decent workflow -> subworkflow -> back to workflow affordance?

Answer 1

I would do a mixture of 1 and 4.

I would have your 2nd modal the same size of the add an optional photo box and hidden behind it.

Once you click the add an optional photo box, the 2nd modal would change its z-index, putting in front, and at the same time fade-in and animate to size of the entire modal. All very simple jQuery.

That way you don't lose the original modal and when users click Cancel or Add Photo, you could simply hide it and start over essentially.

It could look something like this:
( it would obviously be smooth with jQuery or whatever you use, but it gives an idea )

Answer 2

I think this is where a wizard or guided workflow will solve the problem, although I am generally not a fan of creating a workflow within a modal window. However, this was/is a standard pattern for installing of desktop software for a long time, and you can build in optional/conditional workflow into the steps by accepting additional input from the user. This is useful for workflows that involve at least three steps, so you might think it is an overkill if it is not something that occurs in a lot of places in your application.

You will find that in general it is better to redesign the process if you want to keep the design patterns consistent. It also has the added benefit of keeping the workflow and process simple, so a little bit more effort upfront will save you a lot of headaches with the design later on.