Vertical Stepper.

[lgalloherran]

Background

In Phone numbers, we are designing 4 provisioning flows where we are focusing on consistency and implementation eficiency by reusing as many components and patterns as we can.
Among these patterns, we are using a vertical stepper on the left side to indicate the progress and total number of steps of each flow.
Initially I used a stepper from a brainstorming session Figma file and this is the one we are implementing for Sender ID and we planned to use on Short codes. However, I noticed that there is a newer version of the brainstorming file that is slightly different.
I wanted to get your advice on which direction to take, given that half of the projects are under implementation, and the other half are still under specification, but the most important, we want all of them to use the same component and for engineering to be able to re-use.

Stage of design

The four project are on different phases:

• Sender ID provisioning form: Under implementation
• Short codes provisioning form: Under (early) implementation
• Hosted numbers request: Tested and preparing production specs
• Porting request: Early concept designs.

Research

No response

Relevant links

Braistorming file: https://www.figma.com/file/K1ftrUI2O7VYKZcKH2Ghdl/Stepper-component-brainstorming?node-id=1351%3A57670&t=kqfFkbIMBrdRM6Ch-1

Porting request (WIP): https://www.figma.com/file/j2vHe6v06anPL8duiut5AX/PN-Porting-(2023)?node-id=248%3A196361&t=tKwhhhbGQt68X10z-1

Sender ID provisioning flow: https://www.figma.com/proto/zKX4bWwAMbb6ReDSwym1cx/PN--Alphanumeric-Senders---Registration-Form-(2022)?page-id=1958%3A360424&node-id=2011-373663&viewport=44%2C814%2C0.04&scaling=min-zoom&starting-point-node-id=1958%3A381028&show-proto-sidebar=1

Short code provisioning form: https://www.figma.com/proto/bxFKKL4GY7xX87VNb68Jhw/(2022)-PN--Short-codes-REVAMP?page-id=189%3A217741&node-id=189-219191&viewport=-229%2C-565%2C0.21&scaling=min-zoom&starting-point-node-id=189%3A219191&show-proto-sidebar=1

Hosted numbers request (WIP): https://www.figma.com/proto/RxFSORf5Ulc115U5gnEQDv/PN-Hosted-number-(2022)?page-id=616%3A277054&node-id=616-277080&viewport=3460%2C-2276%2C0.43&scaling=min-zoom&starting-point-node-id=616%3A277226

Are you looking for visual design support?

• Yes

Additional Information

No response

[loreina]

Hi @lgalloherran,

Sorry you weren't able to make it to office hours today!

The Stepper you mentioned that @dreamealist worked on is now in production so you could sync with them to see if there's opportunity to reuse the engineering implementation.

Paste has a stepper component in our backlog. Please file a dependency request for the component so our team is aware of your timeline and can follow up on our progress. In the meantime, your team can implement your own stepper and when Paste releases a Stepper, swap to the Paste component then.

Are there specific questions you had that you were hoping would be addressed in office hours?

Thanks!

[serifluous]

Closing due to inactivity. Please let us know if we can help further!