Home

Projects

About

Resume

Chinese
Chinese
Chinese

Oppenheimer Capital Canvas Design System

Develop a design system that improves Oppenheimer's user engagement, supports collaboration, and ensures accessibility.

Develop a design system that improves Oppenheimer's user engagement, supports collaboration, and ensures accessibility.

Develop a design system that improves Oppenheimer's user engagement, supports collaboration, and ensures accessibility.

My Contributions

As a UX Designer, Created UI inventory; standardized typography, Cards, Table, Form Field and Accordion; assisting with building site in ZeroHeight，wrote the Support& Help section of the documentation.

As a UX Designer, Created UI inventory; standardized typography, Cards, Table, Form Field and Accordion; assisting with building site in ZeroHeight，wrote the Support& Help section of the documentation.

Duration

Duration

4 months, 2023.09

Tools

Tools

Figma /Zeroheight/ Google Workspace

Team:

Team:

Xinru, Scott, Jiafeng

About

Oppenheimer Capital Canvas is a proposed design system that has been created by a team of three Pratt Institute Graduate Students for Oppenheimeer& Co.Inc. The primary aim of this system is to increase accessibility and encourage consistency among the design team. We hope to improve scalability and enhance brand experience. Moreover, the system has been designed to provide a user-friendly experience for design teams, which adheres to the principles of logic design, minimalism, scalability, and consistency.

Oppenheimer Capital Canvas

Figma UI Kit

Why does Oppeheimer need a design system?

Oppenheimer, a global brokerage and investment bank with 140+ years of history, is renowned for delivering innovative and tailored financial solutions. In the dynamic financial landscape, clarity and consistency are crucial. Hence, the need for a robust design system at Oppenheimer is evident. This system serves as a foundational framework, ensuring cohesive visual identity, interfaces, and experiences. By empowering our team with a design system, we enhance usability, reinforce brand identity, and prioritize accessibility. This approach ensures that our platforms are not only visually excellent but also universally inclusive for all stakeholders, from individual investors to corporate executives and institutions

UI Inventory

Explore

UI Inventory

Explore

UI Inventory

Explore

UI Kit

Explore pages

UI Kit

Explore pages

UI Kit

Explore pages

Documentation

Explore pages

Documentation

Explore pages

Documentation

Explore pages

UI Inventory

Deconstruction

In the initial phase of developing the Oppenheimer Design System, a thorough examination of the existing web interfaces was conducted to identify areas for improvement. By dissecting diverse elements, styles, and components across the platforms, we uncovered several challenges. Notably, issues such as insufficient font spacing, the absence of distinct boundaries for cards, and inconsistent image specifications were apparent. These shortcomings contribute to a potential for user confusion and reduced visual clarity on the current website. The Oppenheimer Design System aims to rectify these concerns, introducing standardized font spacing, clear boundaries for cards, and uniform image specifications to enhance overall visual consistency and user experience.

In the initial phase of developing the Oppenheimer Design System, a thorough examination of the existing web interfaces was conducted to identify areas for improvement. By dissecting diverse elements, styles, and components across the platforms, we uncovered several challenges. Notably, issues such as insufficient font spacing, the absence of distinct boundaries for cards, and inconsistent image specifications were apparent. These shortcomings contribute to a potential for user confusion and reduced visual clarity on the current website. The Oppenheimer Design System aims to rectify these concerns, introducing standardized font spacing, clear boundaries for cards, and uniform image specifications to enhance overall visual consistency and user experience.

  • In the initial phase of developing the Oppenheimer Design System, a thorough examination of the existing web interfaces was conducted to identify areas for improvement. By dissecting diverse elements, styles, and components across the platforms, we uncovered several challenges. Notably, issues such as insufficient font spacing, the absence of distinct boundaries for cards, and inconsistent image specifications were apparent. These shortcomings contribute to a potential for user confusion and reduced visual clarity on the current website. The Oppenheimer Design System aims to rectify these concerns, introducing standardized font spacing, clear boundaries for cards, and uniform image specifications to enhance overall visual consistency and user experience.

Deconstruction of current Oppenheimer site

Figure 1: Note screen with current buttons Figure 2: Plus feature pop-up that appears when“Download”was clicked

Figure 1: Note screen with current buttons

Figure 2: Plus feature pop-up that appears when“Download” was clicked

Retaining Brand Recognition

Retaining Brand Recognition

Retaining Brand Recognition

Having identified the core issues, our team collectively decided on the elements that should be preserved and repurposed. We maintain the distinctive brand tone of Oppenheimer, encompassing the brand color and logo.

Having identified the core issues, our team collectively decided on the elements that should be preserved and repurposed. We maintain the distinctive brand tone of Oppenheimer, encompassing the brand color and logo.

Having identified the core issues, our team collectively decided on the elements that should be preserved and repurposed. We maintain the distinctive brand tone of Oppenheimer, encompassing the brand color and logo.

Design Principle

Logical Design

Crafting intuitive pathways with a touch of magic. Every interaction feels naturally guided, ensuring seamless accessibility for all.

Logical Design

Crafting intuitive pathways with a touch of magic. Every interaction feels naturally guided, ensuring seamless accessibility for all.

Logical Design

Crafting intuitive pathways with a touch of magic. Every interaction feels naturally guided, ensuring seamless accessibility for all.

Minimalist Mastery

Simplicity redefined for every user. Stripping complexity to its elegant core, we create experiences that are clear, enjoyable, and accessible to all

Minimalist Mastery

Simplicity redefined for every user. Stripping complexity to its elegant core, we create experiences that are clear, enjoyable, and accessible to all

Minimalist Mastery

Simplicity redefined for every user. Stripping complexity to its elegant core, we create experiences that are clear, enjoyable, and accessible to all

Scalable Solutions

Adapting gracefully to tomorrow's needs. Our designs grow and flex, embracing diverse users and technologies with elegant consistency.

Scalable Solutions

Adapting gracefully to tomorrow's needs. Our designs grow and flex, embracing diverse users and technologies with elegant consistency.

Scalable Solutions

Adapting gracefully to tomorrow's needs. Our designs grow and flex, embracing diverse users and technologies with elegant consistency.

Consistency Across Touchpoints

This principle is about creating a consistent language for our design, with reusable patterns and predictable interactions across all platforms..

Consistency Across Touchpoints

This principle is about creating a consistent language for our design, with reusable patterns and predictable interactions across all platforms..

Consistency Across Touchpoints

This principle is about creating a consistent language for our design, with reusable patterns and predictable interactions across all platforms..

Atomic Design Methodology

We employed the Atomic Design approach to craft our design system, breaking down components into smaller, reusable elements. This methodology enabled us to create a system that is not only consistent but also scalable and adaptable.

  • We employed the Atomic Design approach to craft our design system, breaking down components into smaller, reusable elements. This methodology enabled us to create a system that is not only consistent but also scalable and adaptable.

  • We employed the Atomic Design approach to craft our design system, breaking down components into smaller, reusable elements. This methodology enabled us to create a system that is not only consistent but also scalable and adaptable.

Diagram of Atomic Design Methodology

Diagram of Atomic Design Methodology

Diagram of Atomic Design Methodology

UI Kit

Color Platte

Embracing Color with Purpose and Precision. Our design system's color styles and variables are meticulously chosen to meet the highest standards of accessibility. Every hue in our palette ensures readability and user comfort.

Accessible Color Contrast
AAA Compliance: All normal text meets a 7:1 contrast ratio.
Enhanced for Large Text: A 4.5:1 ratio for larger text sizes.

Embracing Color with Purpose and Precision. Our design system's color styles and variables are meticulously chosen to meet the highest standards of accessibility. Every hue in our palette ensures readability and user comfort.

Accessible Color Contrast
AAA Compliance: All normal text meets a 7:1 contrast ratio.
Enhanced for Large Text: A 4.5:1 ratio for larger text sizes.

Embracing Color with Purpose and Precision. Our design system's color styles and variables are meticulously chosen to meet the highest standards of accessibility. Every hue in our palette ensures readability and user comfort.

Accessible Color Contrast
AAA Compliance: All normal text meets a 7:1 contrast ratio.
Enhanced for Large Text: A 4.5:1 ratio for larger text sizes.

Typography

Bodoni: A Clear Choice for Accessible Headers


We've chosen Bodoni for our headers, prioritizing accessibility. With its distinct features, Bodoni enhances readability and elevates user experience, especially for visually impaired users.


Futura: Crafting Accessible Body Copy


In our commitment to accessibility, we've chosen Futura for our body copy. This font's design enhances readability and user comfort, making our content accessible to a broader audience.


  • Bodoni: A Clear Choice for Accessible Headers


    We've chosen Bodoni for our headers, prioritizing accessibility. With its distinct features, Bodoni enhances readability and elevates user experience, especially for visually impaired users.


    Futura: Crafting Accessible Body Copy


    In our commitment to accessibility, we've chosen Futura for our body copy. This font's design enhances readability and user comfort, making our content accessible to a broader audience.


  • Bodoni: A Clear Choice for Accessible Headers


    We've chosen Bodoni for our headers, prioritizing accessibility. With its distinct features, Bodoni enhances readability and elevates user experience, especially for visually impaired users.


    Futura: Crafting Accessible Body Copy


    In our commitment to accessibility, we've chosen Futura for our body copy. This font's design enhances readability and user comfort, making our content accessible to a broader audience.


Oppenheimer's typescale

Oppenheimer's typescale

Oppenheimer's typescale

Aspect Ratio

Harmonizing Content Across All Screens. Our design system embraces a variety of aspect ratios, ensuring our components adapt seamlessly to different devices. From smartphones to desktops, every element maintains its integrity and aesthetic appeal.

  • Harmonizing Content Across All Screens. Our design system embraces a variety of aspect ratios, ensuring our components adapt seamlessly to different devices. From smartphones to desktops, every element maintains its integrity and aesthetic appeal.

Aspect Ratio Mastery

Aspect Ratio Mastery

Aspect Ratio Mastery

Documentation

We utilized ZeroHeight , a collaborative platform integrated with Figma, to document our system for potential users and collaborators. This documentation encompasses all the essentials and specifics, guiding users from getting started to implementing Simula for their design purposes. Bringing a design system to life involves documenting the created elements, putting the design into words to create a central repository. Our team created comprehensive documentation covering design principles, accessibility standards, components, and best practices for designing.

Takeways

Prioritizing Accessibility from the Outset:

  • Incorporating accessibility from the beginning is essential, ensuring a streamlined workflow and eliminating the need for subsequent redesigns.

  • This proactive approach contributes to a more inclusive and user-friendly design system.

Iterative Improvement:

  • Recognizing the value of iterative improvement, especially in refining naming conventions for complex components within the system.

  • The project's retrospective suggests considerations for enhancing team collaboration and system understanding.

Advanced Features and Efficiency:

  • Emphasizing the significance of learning advanced features, particularly auto-layouts in Figma, to increase design speed and implementation efficiency.

  • The investment in creating variants and properties, while initially demanding, results in a flexible and easily updatable design system.

Back to Projects

Back to Projects

Next Project

Get in Touch

© 2024 Designed by Xinru Wen.

LinkedIn

Mail

Get in Touch

© 2024 Designed by Xinru Wen.

LinkedIn

Mail