[Vouchers] UX and design improvements of page 'New voucher'

[drummer83]

What is the need / problem?

The design should be similar to the 'New payment method' or 'New shipping method' pages because they all have the same purpose. Unified design increases usability and improves the experienced overall quality of the software.

Which type of users does this problem affect (and how many, if known)?

• Hub Managers (MCFEs)
• Instance Managers

Potential solutions that will solve the problem

1. Use header design from Payment/Shipping methods: 'New Voucher' & button 'Back to voucher list'
2. Use footer design from Payment/Shipping methods: Include the 'Cancel' and 'Create' buttons in the footer of the page
3. Default value should be $ 0.00 (instead of $ 0.0 which is untypical for money amounts).
4. Use a single-line input instead of a multi-line text field (separate issue [Vouchers] Multi-line voucher code can be created but can't be applied #10868)

Here is a mockup:

Current design:

Connected wishlist and discovery discussions

Additional context

#10761 (comment)

[lin-d-hop]

Thanks for the detailed eye suggesting these @drummer83

The voucher phase 1 work is out of budget so we have to pause on this work for now.

From @rioug on slack
The design was done with the "new backoffice design" , which wasn't ready at the time when I started working on voucher. So I just used the current colours but try to stay as closed as possible to the given design ( at least in term of where the button and input field are ) . As far as I can see, the UX improvement would bring the voucher pages more in line with the existing backoffice pages. So I'd say we should wait for the Backoffice UI uplift before addressing these.

Out of interest, when the QA was happening on this work was there a process to check against the designs? Of course in this case it wouldn't have helped. But for future work I'm hoping that part of the QA for new features is checking them against designs. Maybe that already happens. If not maybe one for a testers meeting? :)

[lin-d-hop]

Closing this issue so that we can implement the actual designs with the BUU work.

[drummer83]

@lin-d-hop If I am aware of an existing design I check against them as well. So it's always good to add a link to design discussions/templates in the acceptance criteria of the issue.