Today marks one year for Ripple! Ripple is the design system used for our design-led products and modules at Watermark. You can see Ripple’s impact across Planning & Self-Study, Placement Management, System Administration, and the recent changes to Outcomes Assessment Projects (formerly Aqua), our first retroactive design system application.
Since Watermark formed in 2018, one of our goals was to create higher quality experiences for our end users. We quickly learned that one of the keys to a positive perception is consistency, and that's where our design system comes in.
What is a Design System?
A design system incorporates tried, tested, accessible, efficient, and, most importantly, consistent patterns into the solutions we create. These patterns can be specific interactive elements: think buttons, toggles, multi-selects, form fields, or larger containers such as panels or immersive views… just to name a few. Design patterns also include user patterns, such as how someone saves a form, when they use help text, or how they navigate from one view to another.
In addition to establishing standards, Ripple includes reusable components, or the actual code used to make the pattern. Front-end components are prioritized for popular interaction patterns based on usage. This helps front-end engineers build their interfaces more efficiently while ensuring much-needed consistency.
Beyond guidelines and components, Watermark’s design system encourages systems thinking. Each decision made while designing a product becomes a part of that product’s design language. In essence, Ripple’s goal is to articulate one shared design language for Watermark’s suite of products.
We asked team members to share their experiences with Ripple over the last year. Here's what they had to say:
"Using Ripple components makes the front-end design easier, but more consistent throughout various pages of the application. One thing that I find absolutely useful is that the Ripple components are developed keeping accessibility in mind. As these components are reusable and applied in different parts of the application, rather than front end devs coming up with their own approach on implementation concerning accessibility, it provides a solution to possible inconsistencies that may have occurred." – Lakshay Saini, Front-End Developer
"Prior to having a design system, our designers had to make judgments on solutions based on their past experiences and by looking across a multi-product portfolio which included many competing approaches. Our solutions would vary slightly from one application to the next, and even when a better approach was achieved, we were left with all these inconsistencies. The design system seeks to solve all of that." – Evan Werdal, Product Designer
Who’s Behind Watermark’s Design System?
We have a dedicated design system team responsible for creating and maintaining Ripple. Seema Nisar leads the design side of Ripple. Seema championed consistency through her previous role of managing the visual design of new product offerings at Watermark. “Building a design system involves identifying and eliminating ‘reinvented wheels,’” Seema said. “We collaborate with product designers and engineers to ensure all Ripple design patterns and components are reusable and meaningful. It’s not enough to achieve consistency for consistency’s sake; we strive to achieve consistency for cohesion’s sake.”
Watermark's Front End Architect André Mattis leads engineering for Ripple, and his primary responsibilities include ensuring the creation and maintenance of component development. “In just one year, Ripple has grown in so many ways and it has been a pleasure growing alongside it. We have added a number of foundations and guidelines, as well as new components and many iterations to old ones,” André said. “When we started, our biggest problem was getting the idea of a design system across to others. Now we have regular input from users asking for guidance on a particular pattern or new candidates for components; a testament to the impact it has had.” André works alongside two rockstar component developers, Martin Maugeais and Indiana Kuffer.
All Watermark designers and most front-end engineers contribute to and help grow our design system. With each new problem comes an opportunity to think systematically, and we thank everyone for their willingness to adapt design and development processes to incorporate this.
Looking Ahead
Watermark’s design system is in its sustenance and growth phase, and our goal is to expand documentation of design patterns for the product design team and continue to grow components that increase efficiency and reduce errors for our development teams. We are also working towards greater Ripple adoption for more of our products so that all of our customers get the best-in-class experiences Watermark has to offer!
See Watermark’s solutions for yourself – schedule a demo today!
