Desing systems, developer tools & open source
/2018-2020Halstack is an open-source design system based on design principles and best practices for developing and evolving user interfaces in the insurance branch of DXC Technology.
The project was born with the goal of providing consistency and unification to the various products that the team was developing for different partners and clients. Many developers were involved in the process, and they lacked scalable tools for developing components, layouts, and pages, which resulted in inconsistencies and time-consuming implementations.
The design system initially followed the brand guidelines defined by the corporation, which were the only specifications available at that moment. Later, DXC Assure team began to develop a scalable design system with foundations, design patterns, well-documented components, and principles as a core.
A tool for designers
The primary goal of the Halstack design system is to provide designers with a pre-made solution for the most common use cases encountered during the evolution of SaaS products' design processes. A well-defined set of guidelines, components, and specifications helps prevent redundancy and repetition when addressing design challenges, which can potentially lead to inconsistencies and high maintenance efforts.
By centralizing these efforts within the design system, enhancements contribute significantly to the overall business value. This approach results in a comprehensive library of components that enable designers to work more efficiently and agilely, ultimately leading to an enhanced experience for designers, developers, and end-users.
A tool for developers
On the other hand, with the integration of Halstack by the development team, the ease of streamlining the handoff process from designers to developers with complete specifications, replication of component behaviors, and rapid tracking of updates and news significantly facilitates the development process. This contributes to exemplifying patterns and adopting best practices from the main source of truth.
Errors are reduced, implementation time is shortened, and the entire development team is aligned and on the same page when working on interface and prototyping solutions.
The components are available in two different frameworks, React and Angular.
As a digital designer at DXC Technology, I worked as a solo designer closely collaborating with the DXC Assure team and maintaining a strong connection with the development team, thanks to my background in development. Some of my key responsibilities in this role included:
- Compiling and refining the initial ideas for the component library.
- Sourcing references and best practices, particularly from Material, which served as the previous framework and the foundation of the Halstack design system.
- Documenting components, design principles, style guides, and foundational concepts.
- Designing and contributing to the development of the Developer Central portal for DXC Technology.
- Creating the visual identity for the design system.
- Maintaining an up-to-date version of the component library using Adobe XD.
- Acting as an ambassador and facilitator for the design system within DXC and the broader community.
Nowadays (I'm no longer at DXC), the team continues the project by incorporating new components into the system, releasing new versions, migrating the library and all assets to UXPin, and enhancing the overall experience for both developers and end-users of the design system and its associated assets and workflows.