Research and design of an appropriate wizard that helps the users navigate easier and have a clear overview of the process.
Naturally because the list of steps is more than the minimum amount for the horizontal, the list of steps is vertical and scrollable within its frame.
Option “A” for the list of steps has the previous step darkened and the current step is shown with an arrow pointing to the body of the wizard.
Second design for option “A” is to have the content of the wizard in a hierarchy. The subject of the task is separated from the rest of the elements.
IOption “B” has an indicator next to each step of the wizard with three different icons for finished, current and remaining. Also, to balance the colours on the screen as well as emphasizing on the subject of the wizard, the subject is the same colour as the navigation bar and the three buttons in the bottom of each wizard step.
Final design’s navigator has a navigator icon next to the steps as well as a progress cycle showing what percentage of the wizard has been completed so far.