Grifols is a global company that has enhanced the health and well-being of people around the world. While working on Friday, I was invited to collaborate with Grifols' directors, designers, and UX team in order to create a better and more consistent experience for all of their products.
Their market of innovative solutions and services, online tools, and applications was not part of a cohesive experience. As a result, users were burdened with learning difficult systems, and health professionals and patients were not functioning efficiently.
To gain a comprehensive understanding of our current design ecosystem, we embarked on a UI Inventory initiative to assess our main interface components. Drawing inspiration from Brad Frost's interface inventory guidelines, we conducted a full-day audit, bringing together a team of two talented designers and three skilled developers. To ensure efficiency, we divided into three groups, each responsible for reviewing specific components on our website and building an inventory around them.
Our primary objective was to capture unique instances of crucial design assets, including typography, buttons, icons, input forms, drop-downs, and more. Using a PowerPoint template, we documented screenshots of these elements. After the thorough review, each group presented their findings to the team.
The results of this exercise proved highly enlightening, exposing several inconsistencies within our design assets. It became evident that a more structured approach to documenting, communicating, and preserving our design system is imperative for achieving greater consistency and cohesion.
By implementing a more systematic approach, we aim to bolster our design ecosystem, ensuring seamless collaboration between designers and developers, and delivering a cohesive user experience across all touchpoints.
In order to strengthen our design system, we first focused on establishing a solid foundation by perfecting our core elements, which included colour palettes, fonts, grids, spacing, buttons, and more. We then progressed to more complex structures like our templates, and pages. To achieve this, we started from scratch for its better alignment with our design needs.
During this phase, we engaged in various activities such as researching other design systems and interfaces for inspiration and best practices. We analysed the instances and use cases captured during the audit, brainstorming solutions that would best serve our goals. We also streamlined our components by unifying different variations, reducing excess, and limiting our colour schemes to a maximum of nine shades per hue. The unnecessary variations were merged with the selected schemes based on proximity, resulting in our final colour palette.
Reviewing work is a crucial aspect of any design process to ensure that we make collective decisions and align on details such as component design, documentation, and tools. For this project, we formed a multidisciplinary design system team that met every two weeks to discuss the direction and progress of our work. We also established a design-systems Slack channel where we posted updates and requests for asynchronous feedback. These practices enabled us to gather everyone's perspectives and bridge the gap between design and engineering.
High-quality component documentation is crucial to an effective library allowing everyone to quickly and efficiently make consistent decisions. We wanted to create detailed documentation that would support every single aspect of our design system, and also be organised, consistent, and easy to use. We referred to several design systems such as IBM’s Carbon, Material, Atlassian, Salesforce Lightning, and other design systems for some good practices, guidelines and tools that we could apply in our design system.
We set out to produce design-led and development-led documentation that is integrated and synced to create one consolidated system.
Once the Sketch components were approved, we move them into the components file, a shared library of assets that our team could use to drag and drop while working in new designs.
We implemented Abstract in our workflow to allow us to collaborate between teammates in a more productive way.
This project provided me with valuable learning opportunities, including the chance to work on a design system from scratch, sharpen my Sketch skills, and collaborate and learn from other designers and the development team.
As we progressed, we refined the entire application and eliminated inconsistencies in the UI, which laid the foundation for a redesign/refresh of all the different sub brands from Grifols. This experience has proven to be a valuable lesson in the importance of implementing a systematic approach to design, which can result in improved efficiency, consistency, and quality of work.
The design system for the sub-brands of Grifols is part of an ongoing project that involves constant iteration, change, and learning curves. Currently, we have a set of basic components that are ready, and they have proven to be game-changing for our team in terms of efficiency, consistency, and standardization. Moving forward, our team has identified several key steps that we plan to take, including:
We firmly believe that these steps will help us maintain and improve our design system, ultimately benefiting our team, users, and the company as a whole.
