The BestInvest proposition dashboard project, where financial goals are set, had already begun when I joined this project. My task was to work on everything else, which included the UX and Visual/UI design of the trading flows, payments and summary screens. Using elements from the influx design system, I created wireframes, flows and the final polished UI for handover to the development teams.
Snapshot from the final Miro board, containing the visual designs for desktop and mobile in their respective trading flows,.
'Your orders', desktop and mobile visual designs.
Different baskets for other products such as ISA are accessible via tabs. There is an indicator showing the number of product in each basket. This means the basket doesn't need to be cleared in the "browse investments" previous step.
'Share dealing (buy now)', desktop and mobile visual designs.
Buy now (Quote & deal) selected by default., the accordion is default closed and "Specific number of units/shares" selected by default.
'Switch funds', desktop and mobile visual designs.
The customer has added one fund to switch into. In the case where there is only one fund to purchase then the proportion allocation is auto set at 100% and can't be edited.
Snapshot of some of the payments flows
'Monthly Savings', desktop and mobile visual designs.
In this case the customer has one active monthly cash payment and three active monthly investments into their ISA.
In this case the customer did not have an active monthly cash saving, and has tapped 'Add monthly cash'.
'Summary', final desktop and mobile visual designs.
'Breakdown', final desktop and mobile visual designs.