Client Access
Time Frame: 3 months
Role: in-house UX UI Designer
Tools: Figma, Jira, Webex
Deliverables: Hi-fidelity wireframes
Client Access is a comprehensive, client-facing website designed to provide users with real-time information about their investment accounts, including Account Holdings, Top and Bottom Movers, asset growth, and advanced reporting features. Despite its valuable functionality, the site had become outdated, with a user interface that was no longer intuitive or visually appealing. To address these issues, a complete redesign was undertaken to modernize the platform, enhance user experience, and ensure clients could navigate the site effortlessly, thereby improving their ability to make informed financial decisions.
01. Background
As the in-house UI Designer for our organization, I collaborated with an outsourced agency, StagePath, to redesign the Client Access website. The primary motivation behind the project was to address the site's outdated interface, which had become cumbersome and less intuitive for users. Our users, who are the bank's clients, rely on this platform to manage their investment accounts, making it crucial for the site to be both functional and user-friendly. Drawing on client feedback collected by our IT support team, we aimed to create a more streamlined and visually appealing platform. This initiative was backed by major stakeholders, including the CEO, CIO, COO, and the President of the IT department. Working within an agile framework, we ensured that the project was iterative and adaptive, allowing us to continuously refine and improve the design based on ongoing feedback and testing.
02. Content Inventory
In my role as the in-house UI Designer, I collaborated closely with StagePath, an outsourced agency contracted to work specifically on the welcome screen for Client Access. This partnership was part of Oppenheimer's contractual obligation to engage an external agency at least once per year. StagePath's responsibilities included developing the brand's style guide, guided by research conducted by my project manager. This research included client testimonials, recorded client calls discussing desired site enhancements, and feedback from support emails. Additionally, StagePath incorporated requirements and feedback from key stakeholders. Once StagePath completed the welcome screen and established the style guide, I took over to design the remaining tabs and screens within the Client Access site, ensuring they adhered to the newly defined style guide. My efforts culminated in the creation of a fully functional prototype.
03. Visual Style Guide
Fonts
The combination of the traditional features of the Palatino and the contemporary style of Helvetica Neue, gives a modern yet sophisticated look to Oppenheimer's website. Oppenheimer is a confident and approachable brand, and so is their messaging. We use big and clean words that stands out and keeps our audience engaged in our communities
Colors
The color palette helps maintain a sharp and focused look, with predominantly white backgrounds and small color accents through the design
04. Wireframes
Old vs. New Accounts Tab
The Accounts screen had a major update. Typeface and style were changed to follow the new style guide. Graphs remain the same style because they are provided by an outsourced company called Markit Data.
Old vs. New Forms Tab
Much has changed in the new design: cards were all set to the same size, regardless of the text inside of it (359x185 px), the design of the cards, navigation, and CTA buttons were changed to follow the style guide.
New Research Tab
For the Main Data grid, the font size was changed to 20px and the font type to Palatino to match the style guide. Cards and links were also modified to match the rest of the site.