Context

The digital experience of an investing platform has lots to explain. The concept of a stepper – a visual representing a multi-step process – got introduced as one of the key UI components to help navigate through complex processes. It appears during the on-boarding flow and regulatory check-ups. Now was the time to formalise it as a standard element for a modal dialog. This worked hand-in-hand with the re-design of the document upload experience.

Approach

Our initial preference was to use the same visual across all experiences, employing a sequence of defined steps. However, we recognized various downsides, particularly for the mobile view. To address this, we decided to introduce a variation of the stepper pattern for mobile that aligns better with mobile UX principles. This design focuses on showing only the current step, providing essential navigation information and allowing more space for important content.