Stakeholder interview has clearly defined the business goal to create a design that will increase leads to the showroom as well as customer understanding of the finance options.The complexity of the different finance options must be presented in a simplified way, this page is also used by staff in the showroom to calculate repayments with the customer.
Understanding the business goals, I used Google Analytics data to analyze user behavior by tracking previous and next pages between the finance page. The data was presented in a user flow, which revealed that the Online Planner and Price Estimator were the most frequently visited pages. This information provided insight into user needs.
Hotjar heatmap and session recordings provided more detailed insights into usability problems on the page. The key issues have been described with an "action" section to address the problems in the UI. Additionally, comparing the heatmaps between devices highlighted that the page is better suited for desktop users rather than mobile users.
The research has provided guidance on organizing the content on the page in the expected order for users. To reduce the bounce rate and increase conversion, the financial calculator has the highest priority in the content order to provide a pre-cognitive understanding of its functions. Legal content requirements, such as the APR example table, have also been considered at this stage and were consulted with the legal team.
A gray box wireframe was created to outline the initial ideas for the layout. The UI wireframe was then developed with all the insights gathered from the research stage, and was consulted with the in-house legal team to ensure its compatibility with requirements.
Guerilla testing was performed among UX designers and non-technical users to quickly identify usability errors and implement changes in the next sprint.
Microinteractions have been animated using Adobe XD and aim to provide useful feedback to users. An example of this is the oversized button designed to improve touch target accuracy, especially on mobile devices. The plus button animation provides feedback for adding a price, while the minus button animation is reversed to indicate removal.
UI design is ready for the development team, complete with precise instructions and style guides. The interface design decisions have been prioritized for touch interactions and screen sizes, based on website traffic statistics. The design includes many elements that support the business goal and direct the user toward a conversion. For example, the "Most Popular" badge on selected finance options provides social acceptance and provokes trust. Please contact me if you would like to learn more about this design.
