Skylight
Design System
Skylight is a custom design system for Pennymac, a top national mortgage lender, that has been breaking into the software development space by opting to create their own loan management and servicing software, and moving away from 3rd party vendors for their custom needs.
Project
Design System
Client
PennyMac Financial Services
Role
UX/UI Design
Challenge
Pennymac's initiative is to create their our own software for their internal and external users, allowing for more custom configurability and more intuitive user experience across the various service platforms. These various software products need branding and user interface components that establish a digital product identity for Pennymac, and can scale in the future with the addition of new services.
Results
This meant creating a fundamental design language that could be the foundation of user experience, as well as a UI component library that any dev team could access and use to have a unified visual design language. Using the Atomic Design approach, we started by breaking down products into their most fundamental parts, and over time and iteration, noticed the patterns and commonalities that they shared to build more complex components. Skylight continues to grow and evolve as we make more products with unique and specific use-cases.
Atoms
Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button. Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations. Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.
Molecules
Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.
Organisms
Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again. Building up from molecules to organisms encourages creating standalone, portable, reusable components.
Project
Design System
Client
PennyMac Financial Services
Role
UX/UI Design
Challenge
Pennymac's initiative is to create their our own software for their internal and external users, allowing for more custom configurability and more intuitive user experience across the various service platforms. These various software products need branding and user interface components that establish a digital product identity for Pennymac, and can scale in the future with the addition of new services.
Results
This meant creating a fundamental design language that could be the foundation of user experience, as well as a UI component library that any dev team could access and use to have a unified visual design language. Using the Atomic Design approach, we started by breaking down products into their most fundamental parts, and over time and iteration, noticed the patterns and commonalities that they shared to build more complex components. Skylight continues to grow and evolve as we make more products with unique and specific use-cases.
Atoms
Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button. Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations. Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.
Molecules
Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.
Organisms
Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again. Building up from molecules to organisms encourages creating standalone, portable, reusable components.
Project
Design System
Client
PennyMac Financial Services
Role
UX/UI Design
Challenge
Pennymac's initiative is to create their our own software for their internal and external users, allowing for more custom configurability and more intuitive user experience across the various service platforms. These various software products need branding and user interface components that establish a digital product identity for Pennymac, and can scale in the future with the addition of new services.
Results
This meant creating a fundamental design language that could be the foundation of user experience, as well as a UI component library that any dev team could access and use to have a unified visual design language. Using the Atomic Design approach, we started by breaking down products into their most fundamental parts, and over time and iteration, noticed the patterns and commonalities that they shared to build more complex components. Skylight continues to grow and evolve as we make more products with unique and specific use-cases.
Atoms
Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button. Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations. Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.
Molecules
Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.
Organisms
Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again. Building up from molecules to organisms encourages creating standalone, portable, reusable components.