Hi everyone,
here is my issue, and i wonder how you guys proceed in this case.
Sorry if that’s long but didnt think of a shorter way to explain.
I’m designing a desktop web app, with a lot of different menus, drop down lists, modals, collapsible elements, accordions, and all.
Let’s take the example of a modal window, triggered by the same CTA on different screens.
(example : “Create new unit”, which can be found on page A, but also page B which has different content).
The content in the modal is multi steps form.
If i’m thinking “Prototype”, i will :
- make a Create button component
- make a modal window component, with different variants corresponding to form steps, with interactions to switch between steps (previous/next/cancel/finish).
- add a “Open Overlay” interaction on the button to open the Modal component.
- Place the button on the page A (and B)
So I have :
Home (Prototype starting point) > [click on link] > Page A (or B) > click on button > the modal opens.
→ That works fine, i can use the prototype link for user testing.
Now we’re in Agile development, and we’re creating User Stories.
We have a User Story to develop the inside of that modal window.
What link do i give so they can directly see the opened modal ?
- Devs need to explore the contents of all different steps of the modal.
- PO need to see the real modal in situation, opened on the page, with interactions.
Only solution i see is to manually create a copy of page A, manually simulate the overlay by adding a background, then adding the modal window with variant 1.
And maybe also duplicate all that with the modal in other variants state.
And do the same for page B.
That seems really overkill, and a nightmare to maintain.
Other example : a collapsible panel, closed by default.
For prototyping, i’d have a Panel component, with 2 variants : opened and closed.
And place that in my page, in closed stated.
Now what link do i give to Devs ?
Do i have to, again, duplicate the page with the component in opened state ?
Than why bother using the prototyping process, as we would just use Navigate to static screens, as we did when Figma didn’t have components variants.
Now imagine 2 collapsible panels on the same page. I have now 4 possible states combinations.
And now imagine 3 panels… (yeah that’s 8 possibilities)
How do you guys proceed, having both working prototypes and direct detailed views for devs?