•March 06, 2024
At RoleModel Software, we focus on serving our customers with Expertise Amplification by delivering sustainable software systems. With that in mind, we constantly look to improve our internal practices and tools to deliver the highest value to our customers.
Optics was born to support these efforts and to continue the growth of our User Interface (UI) and User Experience (UX) design and delivery practice at RoleModel. We have built this design system, learning from real project work and with deep collaboration between our designers and developers within our delivery team. This journey included many careful and thoughtful revisions to get us to where we are today, and we are sure to continue to mature and shape this design system with each new project we take on. With Optics v1 we’ve set a strong foundation, one that will further enhance our software delivery process while helping us to up-skill and further leverage the unique skills and abilities found throughout our amazing team.
Optics is a fully conceptualized design system, a collection of user interface components in Figma (our design tool of choice), and development implementations of common design challenges that can be shared among our projects and easily customized, while also being flexible enough to fit into and leveraged by our development tools.
We needed a system to propel our projects forward, with a foundation for continuous improvement through active collaboration with our developers and designers. Optics was born from the insight that a unified design and development framework propels our projects to greater heights while providing excellent and consistent outcomes for our clients.
We sought to harmonize our design and development efforts, and with Optics, we have bridged the gap between design and code through a shared language, allowing us to collaborate in crafting satisfying experiences.
We wanted to elevate our design deliveries while maintaining the flexibility that our clients require. Optics integrates a versatile design system with a collection of adaptable components and enhances our ability to tackle unique project challenges. It offers customizable solutions that uphold our commitment to precision and flexibility in every project.
We need to craft the user experience to be accessible and usable by all. At the heart of Optics lies our dedication to accessibility and delivering cohesive user experiences. Our comprehensive Figma component library, along with HTML/CSS components, ensures that every design meets the highest standards of accessibility, allowing us to create designs that are not just visually appealing but also accessible and aligned with our clients' brands.
Optics is built on three core pillars: our Figma component design library, HTML/CSS components, and thorough documentation.
In Optics, the design component library is crafted to give our team precise specifications for each component, fostering consistency across projects. This comprehensive library streamlines our development process, enhancing efficiency while maintaining a high standard of consistency in our work. Every design component has parity with its development counterpart, ensuring a consistent and repeatable design to development experience.
Our HTML/CSS components provide the foundation for our user interface development. Each component adheres to our best practices for development and accessibility. These components are highly configurable and designed to work hand in hand with our Figma component library to ensure what we design is what we deliver every time.
We have documented each of our HTML/CSS components to demonstrate how and when to use each component while providing a playground for our development team to experiment with the various capabilities and configurations of each. In addition to this, our documentation has a growing list of code best practices, training materials, and code recipes.
At the core of Optics is a suite of elements that anchor our design system. It's a collection of guidelines ensuring our designs are accessible, visually coherent, and meticulously structured. Each principle is a building block for creating designs that are both beautiful and functional.
Today, Optics consists of these guiding principles: Accessibility for all, Color that engages the customer and promotes strong branding, Typography that allows for multi-language support and elegant typesetting, Icons that are clear and that ensure a familiar and intuitive user experience, and Design Tokens that follow clear patterns and are shared between design and development efforts within our team.
Out of these foundations, Optics gets its name from our color system, where we modify color akin to photographic f-stops throughout a luminosity range. As part of meeting our accessibility standards, we’ve designed this robust color system to ensure contrast standards for accessibility are met while having the needed flexibility to provide visually exciting designs with rich color palettes.
Optics isn’t just a static design system; it was designed to mature and grow over time and speaks to the core design principles that guide our team. These principles are the foundation of our approach to creating digital products that are both functional and compelling. With Optics, we achieve our design goals early in the delivery process, setting a great foundation for the future of every project.
Our fundamental design principles are that design should be driven by business value with the ability to adapt and refine designs to meet the unique requirements of various projects, keeping our focus on business process first. There should be consistency and standardization of our designs to establish a design foundation across projects, with standardized approaches in design and implementation to enhance overall impact. We design as a team through Cross-functional Collaboration and need solutions that help leverage and scale those efforts by facilitating tight feedback loops of Incremental validation between designers, developers, and product owners to build upon the design foundation. And finally, our designs must be accessible and usable by all, prioritizing accessibility in designs and ensuring that solutions are user-friendly for all potential users.
We’re excited to publicly launch Optics, in truth, we’ve been building Optics and using it on projects for several years now. Today, we launch Optics v1, but we’re already planning and working towards enhancements and will be providing those updates on an ongoing basis as we build, measure, and learn with each project.
Optics is a great example of applying RoleModel’s focus on Expertise Amplification and Iterative Value to our software delivery process. We now have a shared set of components and documentation that allow us to address the common user experience needs within our projects while delivering a polished design from the start of a project with less effort. We look forward to building upon this design system to serve and delight our valued customers for years to come.
