Investment Page (CIPS)
Summary
This project was about adding a drill-down page where clients can access account information, mutual funds, investment holdings, and all their investment-related details on both online banking and mobile banking. As this was a new page that did not previously exist, we also implemented an updated design style in line with the latest company design guidelines to ensure consistency and a modern client experience.
Goal
My goal was to create a page where clients could easily navigate the information and access their data, regardless of which platform they are using.
Old design
Challenges
This project was structured for phased development, with future phases planned to provide additional information about investment products. The initial phase focused on presenting a comprehensive overview of all investment products within a client’s account.
The resulting page is data-intensive and fully responsive. One of the main design challenges was organizing and presenting large volumes of data clearly across various screen sizes, ensuring usability and readability. The design was also developed with scalability in mind, allowing for seamless expansion of features and information in future phases.
Design iteration
Design iteration - Tombstone
CIBC is in the process of introducing a new design system for the Account Details page, and this project demonstrates how the updated design was applied to the investment account experience.
My primary focus was to align with the new visual style while enhancing the information presented to clients. In my initial iteration, I moved the current value to the top of the page to establish a clearer hierarchy and maintain consistency with the new design language. Unlike debit or savings accounts, investment accounts contain significantly more data. For this reason, I prioritized displaying detailed information over including illustrations, ensuring that the available space was used to deliver greater informational value to clients.
Draft design
Design iteration - Table
I followed the new typography and style guidelines to develop the draft above. While I could continue refining the design, my primary concern at this stage is the responsiveness of the table design across different devices.
My initial idea was to add a side button for smaller screen sizes. However, the side button did not clearly indicate that more information was available. According to user research conducted by Apple, users’ eyes typically focus on the centre of the screen. If a call-to-action button is placed at the extreme edge of the screen, there is a high chance that clients will miss it — which defeats my goal of making the data easier to navigate.
So instead, I decided to take a new approach by breaking down each row into individual containers. This design ensures that all data is responsive and much easier to read on smaller screens. It also allows for easy expansion — adding or removing data will not affect the overall structure. The only drawback to this container approach is that it may not be as intuitive as a traditional table for some clients.
To address this challenge, we chose to use both layout styles instead of committing to just one. On wider screens, we use the table style to provide an easy-to-scan summary view. On narrower screens, we switch to the box style for improved responsiveness and clarity. This approach ensures that clients can easily access and understand their investment information across all devices.
Final design
Takeaways
Designing data-heavy pages can be challenging, especially for smaller screens. I was initially hesitant to create a longer page, as several studies show that more than 50% of time is spent in the top 40% of the page. However, if clients are interested in the data presented, they are unlikely to mind scrolling. Reducing page length at the expense of user-friendliness does not improve the experience — in fact, it can be detrimental. Working with large amounts of data on smaller screens was a valuable learning experience for me.