Define phase
Once we had a solid understanding of the fundamental concepts and requirements of the new functionality, we created updated user flows to explore the most suitable experience for purchasing vouchers. To support this, we used comparison tables to outline the differences between various scenarios.
For example, depending on who was making the purchase, the system would show different levels of availability: the account holder could see all vouchers acquired, while other users—such as family members—could only view their own and not those of other members within the group.
ITERATION
The voucher purchase process involved more than just selecting who the voucher was for—it also required choosing the quantity and type of vouchers to be purchased. Initially, the interface was designed around preselected voucher types, but after several meetings and gathering more insights, we learned that users frequently purchased more than one type of voucher at a time. As a result, we redesigned the purchase interface to support multi-selection, allowing users to choose multiple types and quantities of vouchers within the same screen. In this context, it was also important to include clear indicators such as the price per voucher type and a subtotal to show the total cost of the upcoming purchase.
Once development began, we carried out a feedback loop between design and engineering, which allowed us to adjust the designs to better align with the technologies in use. It’s worth noting that due to technical constraints, some elements had to diverge from the original design. However, the key was to ensure that core functionalities were preserved—at least in this first stage.
After development and implementation, the new functionality was integrated into the application and is now fully operational.
Below is promotional material shared by the client to encourage the use of this new feature.