By Dr. Meg Pirrung, Principal Product Designer
We’re thrilled to unveil the brand new Hyperscience Design System (HSDS), a modern and visually appealing framework designed to elevate the user experience. With its consistent and accessible approach, HSDS not only enhances usability but also builds trust in our product and the team behind it.
But HSDS is more than just a User Interface (UI) kit or style guide; it encompasses a comprehensive set of product design principles and a well-defined design language. Our in-sync UI kit and component library ensure that every aspect of our design is cohesive and intuitive. We’ve built upon existing, tested design systems, incorporating industry trends while prioritizing accessibility.
Our latest product release of the Hyperscience Hypercell R40 marks the first major integration of HSDS, featuring significant updates such as the entire Layout Triage experience and enhancements to the Model Overview page for Identification models.
In this blog, we will dig deep into this exciting journey to redefine design and user experience at Hyperscience!
Goals for an enterprise Design System
Design systems are ever-evolving collections of reusable components, principles, and guidelines that provide designers and engineers with a shared language for consistent product design and front-end implementation. Common challenges with enterprise design systems are: visual consistency, semantic discrepancies, and experiential inconsistencies. Addressing these challenges has been a driving force behind the creation of HSDS, ensuring that our new design system is built on a solid foundation.
Building on a Solid Foundation: Evolving to the Hyperscience Design System
We didn’t start from scratch on HSDS – we built on and extended existing, tested, reviewed, and accessible design systems. The Hyperscience Product Design team audited various government design systems including, USWDS (United States Web Design System), VA.gov and GOV.UK, as a core goal of HSDS was complete, government-level accessibility compliance. In the end it made the most sense for Hyperscience to start with and extend an existing internal tools design system with a more modern look and feel than open-source government styled design systems.
Hyperscience Design System is an evolution – modern, visually appealing, consistent, and accessible. For users, a consistent, and thus learnable user experience and an accessible, cohesive visual identity bring trust in the product and those building it.
With a design system, designing cohesive experiences becomes faster and more consistent, as well as streamlining the design to development handoff process, and eliminating the need for pixel-level detail specs when both the UI Kit and Component Library are in sync.
HSDS also includes product design principles, which are value statements that describe the most important goals that a product or service should deliver for users and are used to inform design decisions.
Hyperscience Product Design Principles
- Human experiences optimize for a user-centered design, concepts mirror human mental models, and copy reflects human language, avoiding technical, industry or machine learning jargon.
- Transparent relationships and dependencies across entities are easy to see and understand, therefore the user understands the impact of their actions.
- Actionable experience actions are well defined such that the user knows what actions to take in order to get the desired outcomes.
- Enterprise performant experiences, presentation, and data work at scale and within enterprise level expectations.
- We are Data & Value Driven, meaning we utilize user research and usage data to design user centered experiences that optimize for user value.
HSDS employs a strong design language throughout. A design language is a set of rules and principles that guide an organization’s visual identity, ensuring designs have a sense of continuity. A well-defined design language offers many benefits, including: Ensuring design teams deliver consistent and coherent results, no matter who works on the project.
The most common artifacts that come to mind when talking about a design system are the UI Kit & Shared component library. The HSDS Figma UI kit and shared components are in sync with each other, improving design & development velocity.
Exciting Upgrades in R40: A Fresh Look and Enhanced Usability. New things you’ll see once upgrading to R40 are navigation icon updates and Layout Triage in full HSDS styling.
To improve on the inconsistencies of the previous design system, HSDS has consistent icon styling, and consistent semantic treatment of selected state items – i.e. the black bar to encode the semantic selected state. You’ll also see that we’ve updated our primary color from blue to almost-black-gray. HSDS styled pages and tables are easily scannable and the information within is semantically consistent.
Instead of blue chevrons and blue tooltip icons and blue buttons pulling your eye all over the page, we use color strategically to draw the eye to important bits of information, like the failed job tag on the new Unmatched submissions page and other tables within the Document Drift Management experience.
Also part of the Document Drift Management experience is the Layout triage feature. With HSDS we’ve strategically used color to draw the user’s eye to the most important aspects of the experience first. We’re also introducing in-context guidance for future experiences and contextual actions, improving the turn-key enterprise experience of Hyperscience.
If you haven’t already, we hope these design updates give you even more reason to upgrade to R40, so you can fully explore the Document Drift Management suite of new features including Layout Triage, and enjoy the new and improved, visually, semantically, experientially consistent and accessible Hyperscience Design System.
