Progress stepper


71
views
0
11 months ago by

Link to the audit of existing stepper patterns:
https://digital.westpacgroup.com.au/confluence/display/CPL/Progress+stepper

1. Upload examples of what you've used for your project (and what worked/didn't work)
2. Comment on the patterns that are posted below (and why you think it works, doesn't work)

 

 

10 Answers


1
11 months ago by

And heres another unfinished concept page. Where i was exploring 'progress' in general everywhere.

 

0
11 months ago by

Wonder used this at the top.

 

Thanks for sharing. How did the stepper work in smaller views? ie is it responsive?

written 11 months ago by Amritah Pathak  

This was the XS size version. Though the quick access dropdown part never got built.
Oh I cant add an image to a reply.... I will add below.

written 11 months ago by Bradley Cho-Smith  
0
11 months ago by

Wonder also had a progress steps bar inside the tiles too.

 

0
11 months ago by

That works well for almost a page level progress stepper, but does anyone have any examples of one that steps through a 'status of application' progress which may sit on the same one page?  We used the Wonder one as an IA navigation pattern also, allowing you to navigate back through completed steps..

0
11 months ago by

ACCORDIAN OPTION

In XS view, it becomes a single page form with the steps/pages placed in the accordions:

 

 

 

 

0
11 months ago by

ANOTHER OPTION:

Similar to the accordion option, however, in XS view it stays a multi-page form and instead of an interactive stepper, there are headings that say what step you're on. 

 

 

 

0
11 months ago by

Similar to the above option but it it tells you how many steps there are in total in XS view eg. step 1 out of 5:

 

 

 

0
11 months ago by

An example seen in the audit:

 

0
11 months ago by

This is the XS size design for Wonder as mentioned above.

 

 

 

0
11 months ago by

I also played with unfinished concepts for mobile using a side strip. Totes off brand :) But some ideas there.

 

 

Please login to add an answer/comment or follow this question.

Similar posts:
Search »
  • Search pattern
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Mobile Wallet (AKA Tap n' Pay)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Validation - errors
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Electronic verification
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Off-canvas menu (AKA navigation drawer, hamburger, kebab, shelf menu)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Date input
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Expense splitter
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Next Best Action (NBAs)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Placeholder text
    Link to the audit of placeholder text patterns: https://digital.westpacgroup.com.au/confluence/di...
  • Personal details
    Link to the audit of existing personal details patterns: https://digital.westpacgroup.com.au/conf...