top of page

Oppenheimer Capital Canvas
UI Kits

Oppenheimer is a financial company focused on brokerage and investment banking.

Oppenheimer's Design system improves the financial property website's efficiency and professionalism. The team maintained the brand identity and developed a new, user-friendly product

Client:

Oppenheimer.com

Tools:

Figma, ZeroHeights

Team:

Xinru Wen, Scott Dunay and Jiafeng Lu

Date:

Oct 2023-Dec 2023

Screenshot 2023-12-01 at 2.31.15 PM.png

My role:

Making UI Kits Design Decisions and rules, creating styles of UI Kits, outlining structures, and writing for documentation and presentation.

image.jpg

Design:

Created UI inventory; Standardized Colors, Aspect Ratio and Layout; wrote the overview, style, and resources sections of the documentation

information-architecture-ux-design-768x492.png

Why Oppenheimer needs UI kits?

Consistency and Branding:  

A UI kit helps make sure that everything on the website looks like it belongs to Oppenheimer. It uniforms the design.

Efficiency and Scalability:

Using a UI kit makes it easier and faster to build and update the website. 

Improved User Experience: 

A UI kit makes the website easier to use. This is especially important for a financial website, where information can be complex. 

Our design team developed a coherent, straightforward, and recognizable design system aimed at supporting designers, product managers, and engineers in enhancing the user experience for Oppenheimer.com.

Improved Experience

Consistent and Intuitive Navigation:

A design system establishes consistent patterns for navigation and layout. This consistency makes it easier for users to find what they're looking for, as they quickly become familiar with how the website works.

 

Cohesive Visual Language:

It unifies the visual elements (like colors, typography, image sizes and icons) across the website. This cohesiveness not only reinforces the brand identity but also creates a more pleasant and less confusing browsing experience. Which benefits both designers and engineers as well.

 

Responsive and Accessible Design:

A good design system includes principles for responsive design, ensuring the website is easily navigable and visually appealing on any device. It also emphasizes accessibility, making sure the website is usable for people with disabilities, which broadens its usability and inclusivity. 

To create a unified and standardized system, we implemented the fllowing steps of creating a design system.

Inventory

UI Kits

Documentation

We Deconstruct the UI Inventory

Catalogue components

Oppenheimer.com, being a complex website with various page types, led me to focus on five pages: Homepage, Navigation Page, Wealth Management subpage, News and Media& Abou us.

 

We initially captured screenshots of unique components and encountered them to compile a comprehensive catalog. Simultaneously, in my Figma file, these screenshots are categorized as navigation, color, icons, typography, buttons, images, forms, blocks and interactive components. While further breaking into more components in later design. (cards, images, buttons, text fields, navigation, and icons, create a structured repository for these elements. )

Screenshot 2023-12-15 at 6.44.47 AM.png

Further exploration in distinct components

Further down the road, my team and I researched different pages to compare different patterns for in-depth component reconstruction. We noticed Oppenheimer has varied image sizes and there is no unified standard for it.

For example, the News& Media, Blocks and image cards are all horizontal images but with no exact aspect ratio for each, such inconsistencies will confuse users.

 

The UI inventory served as a reliable foundation for identifying the components we aimed to incorporate and revamp in our system.

Screenshot 2023-12-15 at 7.09.26 AM.png

What to be expected in UI Kits

  • Coherent Color, Typograph, Iconography and Layout

  • Standardized Accordion, Buttons, Cards, Check Boxes, Form Field, Navigation, Table and Text Link.

Building Consistent UI Kits

Methodology
We implemented atomic design principles to create components that are consistent, modular, and capable of scaling effectively.​

Screenshot 2023-12-15 at 9.04.10 AM.png

Styles(Rock Atoms)
Initiating our design process, we laid the groundwork by meticulously selecting foundational elements encompassing color schemes, typographic styles, and layout arrangements. These core stylistic choices were instrumental in crafting the fundamental atoms of our design structure.

Screenshot 2023-12-15 at 8.58.32 AM.png
Screenshot 2023-12-15 at 9.40.08 AM.png

For example,

Establishing a cohesive layout framework and choosing appropriate typefaces played a crucial role in unifying our design system, contributing to a consistently styled and visually coherent interface. Additionally, we meticulously crafted spacing and layout guidelines throughout our interface, focusing on achieving a harmonious balance and a clear hierarchy, which guides the placement and arrangement of elements for an optimal user experience and visual structure.

Furthermore, we created fundamental 2:1  and 1:1 Aspect Ratio Elements to ensure the freedom of resizing. As for accessibility considerations, our distinct sizing options allow for flexibility and adaptability in various layout configurations, facilitating an intuitive content hierarchy.

Aspect Ratio

Screenshot 2023-12-15 at 9.20.17 AM.png

Molecules (Image Sizes)
From there, atoms are combined and image sizes of components are created for complex usage, which serves as molecules. We defined rules and usages of different sizes of image molecules to create more complex Organisms.

Screenshot 2023-12-15 at 9.32.48 AM.png

Connect Molecules to Organisms

We crafted our most sophisticated components by organizing atoms and molecules together. From there, our pre-selected and defined color schemes, typography, and layout all combined and looks consistent.

Eg. Card Components, are complex and overwhelming at first glance.  Yet, employing atoms and molecules made our design process more efficient and at the same time, ensured consistency in design.

Screenshot 2023-12-15 at 9.45.58 AM.png

All elements combined together for further creating pages and templates 

Our UI Kit is available to download in Figma community.

Document a Design System

Trust in investing, design as planned

In the initial stages of our design system documentation, we engaged in brainstorming for suitable names and core principles. "Oppenheimer Capital Canvas" emerged as the ideal choice, aligning well with the professionalism and trustworthy vibe of a finance company.

Moreover, we envisioned the name being cohesive, identifiable, efficient, and practical. Our guiding principles center around the user experience, underscoring our objective to elevate the overall experience of conducting financial decisions.

Our design system documentation can be found in Zeroheights.

Screenshot 2023-12-15 at 10.34.33 AM.png

A thorough and simplified system catering to the needs of users and stakeholders

In our documentation, we acquaint stakeholders with our system, its underlying principles, and design values.

 

They are then able to investigate our fundamental styles and components, familiarizing themselves with standard usage practices and various options, including plenty of variants of certain components.

Moreover, there is a contribution and contact page that welcomes input from the wider community.

Screenshot 2023-12-15 at 10.44.21 AM.png
Screenshot 2023-12-15 at 10.44.47 AM.png

Why should Oppenheimer Company adpot Oppenheimer Capital Canvas?

Our pitch deck is attached

 

 

 

Its unified design simplifies user interactions on the website, while familiar interface elements enable quicker information retrieval.

 

Also, accessibility is a fundamental part of our design, enhancing the browsing and locating information experience for more users.

Moreover, the design system facilitates the rapid development of new solutions using existing principles, guidelines and components,  thereby shortening development cycles.

 

It saves designers, and developers tons of time to focus on new ideas instead of repetitive issues.

 

Screenshot 2023-12-15 at 10.59.55 AM.png

Final Thoughts

Key Takeaways

  • Learned considerable knowledge in developing components and variants, along with utilizing auto-layout in Figma. Since I have not used many of these features, it has been an excellent chance to enhance my design abilities.

  • Furthermore, I learned that effective communication is crucial for efficient work, and prioritizing emotional management is an important insight, especially when dealing with frequent differences in design ideas. I committed myself to handling my teammates' expectations and emotions, ensuring I remained responsive and proactive to maintain alignment throughout the project.

bottom of page