Sub-steps within steps for long and complex wizards (Progress Step)

[dfcontreras10]

Background

We’re working on a self-service flow in the Console to make it easier for customers to request port-ins for their numbers. This process was previously handled manually by our support team, is highly complex and involved multiple steps on the client’s end. Just the request process alone (without any follow-ups) consists of 8 steps. While we could try to fit these into the 5-step structure that the current Progress Steps component supports, it would make the process more complicated and harder for users to follow.

Feedback

I heard there’s been some discussion about implementing sub-steps within steps for the Progress Step component. I’m curious to know if that’s something feasible for the future. Additionally, I’d love to get your feedback on my explorations. I’ve experimented with using an inner Progress Step within the main Progress Step of the full wizard pattern, and I like how it simplifies the mental model of the process. However, I have some concerns about how this approach might affect navigation.

Stage of design

Explorations - High Fidelity

Research

No response

Relevant links

Clickable of the first milestone we are going to release: Which is indeed the first big step (Epic) of the three main steps to request the portability of a number. (This is just a reference of context)

Clickable of the port-in request Inside Page Wizard exploration : We’ve decided to move away from this layout pattern because we need the customer to remain more focused in this area. The process is highly complex, and minimizing distractions is a priority. Additionally, we’re planning to extend this flow to different instances within the Console, including the Twilio Home Section for Org Level Admins—a project currently being developed by the Core Platform team. We want to ensure that this flow remains compatible with their architectural framework moving forward. (This is just a reference of context)

Explorations of the Full Page Wizzard Port-In request: These are the current explorations I’d like to discuss.

Are you looking for visual design support?

• Yes

Additional Information

No response

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Vertical Stepper. (updated: 04/14/2023, similarity score: 88%)
• Porting: Phone Number Validation Wireframes (updated: 06/21/2022, similarity score: 86%)
• Dynamic progress step use case (updated: 10/26/2023, similarity score: 86%)

[nkrantz]

Hey @dfcontreras10, thanks for coming to office hours! You can find the recording in the #help-design-system slack channel. Let us know which option you end up choosing and if you have any more questions.

[dfcontreras10]

Thank you @nkrantz !