Principles
The guiding principles of our design system reflect our client-first focus (including mobile, touch, accessibility, and performance needs) and ensure our collective efforts are driving to one unified goal. Our principles include functionality, coherency, experience, data-based evolution, and efficiency.
Functionality
Design patterns are focused on both design and functionality to ensure they function consistently in every channel, platform, and user interface. Proactively designing for mobile is important from a functionality perspective, since many users primarily view content on their phones and mobile devices (using a laptop or desktop computer as a secondary screen). Good functionality provides a user experience that’s responsive, with content designed to render similarly, regardless of which screen or platform the user is on.
Coherency
Our designs should be clear, organized, and sophisticated. Patterns should reflect the brand and work together to create a seamless, cohesive user experience, regardless of component combinations. Designing from brand guidelines and reusable building blocks reduces one-off designs and creates a familiarity that helps users connect with our brand.
Experience
Schwab’s design patterns must respond fluidly to the user’s exploration and journey and clearly prioritize the user’s needs. Perceived website performance is the top priority from an experience perspective. We consider factors such as page load time, critical rendering path, and time to first interaction when designing components. We ensure that the benefits of the design outweigh the costs for users. Ask: “Is this really needed?
What are the benefits of adding it? Will it affect how the content renders? Will it be part of the initial experience of the page?” Usability is greatly improved when an experience acts and feels the same throughout the user journey.
Design is considered over time—from request to render, to interactions on the page over the range of possibilities. The amount of time and what happens during each range should be designed and optimized for.
Data-based evolution
The design system will be updated with new, or updated, design content as we grow. Design patterns are always evolving and never finished, as they are adopted and refined based on new data. This means the asset library (elements, components, and patterns) will change as new items are added while others will be removed if not utilized or performing as intended. We invite contributions from designers and developers to the design system so we can stay agile and modern in our design execution. Follow the process outlined on our contribute page.
Efficiency
By leveraging reusable components and built-in Sketch files, designers can jump right in to creating websites and launching them faster. Since designers no longer need to start designs from scratch, they can use their time and effort more efficiently. Design once, then reuse components for every new design scenario.
For developers, using a design system saves time by reducing the need to manually recode components for every new project and easing the process of updating code in the Content Management System (CMS). Additionally, code in the design system is prevalidated for accessibility, tagging, and performance requirements.
