Hyperscience Design System (HSDS)
Hyperscience Design System (HSDS), is a modern and visually appealing framework prioritizing consistency, usability, and accessibility.
impact
Creating the Hyperscience design system was an easy way to bring consistency, usability and accessibility to the Hyperscience platform. This drove trust in the software and increased usability and learnability for Hyperscience customers.
Additionally, the design system increased both design and development velocity for the company, enabling the product teams to design and ship consistent, usable, and accessible experiences faster.
role
design system design, project management
team
Product Design, Front-End Engineering
the challenge
what's wrong with what we've got?
The previous Hyperscience design system was dated, visually inconsistent, experientially inconsistent, inconsistently applied, incomplete (UI kit & shared components), and was not WCAG3 compliant.
Aside from those issues, it wasn’t a true design system, it was merely an incomplete UI kit and a few shared components.
the fix
evolution – consistent, accessible, and modern
I set out to create a true design system, an ever-evolving collection of reusable components, principles, and guidelines that would provide Hyperscience designers and engineers with a shared language for consistent product design and front-end implementation.
Addressing the challenges of visual consistency, semantic discrepancy, and experiential inconsistency were a driving force behind the creation of HSDS, ensuring that the design system was built on a solid foundation.
HSDS is more than just a UI kit or style guide; it encompasses a comprehensive set of product design principles and a well-defined design language. The in-sync UI kit and component library ensure that every aspect of our design is cohesive and intuitive. I built upon existing, tested design systems, incorporating industry trends while prioritizing accessibility.
the principles
Human
Experiences optimize for a human-centered experience, 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 affordances are well defined such that the user knows what actions to take in order to get the desired outcomes.
Enterprise Performant
Enterprise performant experiences are optimized for speed, efficiency, and reliability at scale.
Data & Value Driven
We utilize user research and usage data to design user-centered experiences that optimize for user value.
the users
Meg singlehandedly cultivated our design system, garnering grassroots support across Engineering and Product. Her herculean effort here made everything so much faster from the design process all the way to implementation on the FE!
Engineering director
@ Hyperscience
[Meg] built our design system from the ground up, creating clarity, consistency, and efficiency across all our work.
lead product designer @ Hyperscience
I wanted to give a big shout out to @dr.meg for all her work around the design system. It’s making the process of implement UI changes a lot more streamlined and consistent. Super useful, and amazing job 🎉🙌
Staff Engineer
@ Hyperscience
[Meg] built a design system—a carefully crafted set of rules and components—that ensured consistency, streamlined development, and elevated the user experience. The system not only improved usability but also integrated seamlessly with code, reducing design and implementation time.
director of product
@ Hyperscience
- ChatGPT
upon checking again, there are indeed two ‘r’ characters in the word ‘strawberry’