Responsive multi step form

Community feedback

• 

  Ali Mukhtar•60

  @alimukhtar53Posted about 1 year ago

  • Font size of Sidbar steps is bigger than designs.
  • Layout spacing differences b/w Title, description and content.
  • Button size is 4 pixels larger than designs.
  • On step 2 spacing issue, yours vs mine vs figma: Important UX: When I select between monthly and yearly toggle dances up and down which is bad user experience. Suggestion: Give parent(wrapper) fixed height, no need to use grid use flex instead, I made flex then flex-direction to column and justify-content: space-between; and lastly render last element(2 months free text) conditionally. This way your toggle won't jump because of fixed height of Plan card no matter if inner content grows or shrinks.
  • On step 3, gap b/w add-on card is more than what is in designs.
  • On step 3, your grid is way more nested which increases complexity.
  • On step 4, there shouldn't be hr when there's no selectedAddon, it was missing from figma designs but I thought we shouldn't display it in case of no add-ons.
  • You missed to change the color on hovering over the change text on summary page.

  0