Cuauhtemoc Munguia

Perhaps, my first approach with something similar to a Design System was creating the necessary styles prior to starting an editorial project in Adobe InDesign, in my first years as a professional focused on it: styles of typographic fonts such as headlines, paragraphs , citations, footers; text flow, image frames, colors. Something simple compared to what we can have today. During the boom in creating web pages with Flash, the program’s interface allowed you to create a library in which you could add different objects to use and reuse as many times as necessary throughout your development, buttons, animations, icons, transitions, or entire blocks to nest within another depending on the complexity of the project.

During my strong period as a web master or web developer like most at that time, I designed what we now know as UI kit or the User Interface in Adobe Illustrator and Adobe Photoshop. Within which during the creation of the different sections you were reusing elements already created to place in other parts of the project, the header with its menu, the footer, and basic elements that are repeated throughout the site such as the buttons. By passing this to Code and taking advantage of the growing use of HTML5 and CSS3 in website creation, in my main style sheet I added the styles that would be reused throughout my project, the buttons with their size and color, the styles for the headings and texts in general, paddings, block sizes, etc. All of this undoubtedly helped make the gradual transition to the UI/UX area something natural.

With the experience that preceded me, I was promoted to the new global UX Team for HP Stores. At the beginning, within the team, a global compilation of the content within the stores in their different regions was made with the main task of making an inventory and being able to create our own library, which within the global plan is to ensure that all stores have the same interface . The creation of the first design system was done by steam in which the entire team participated in different stages, resulting in a product that meets the purpose, but was not functional. At this stage it is decided to create and assign this task to a specific team, which I join.

The first big decision within the global team was to change from Adobe XD to Figma, which made us first task to get to know figma and learn how to use it. At the same time, we began to plan the migration and separate the library of our design system into 4 large blocks: Foundations (Atoms), Components (Molecules), Patterns and Templates. This with the plan to keep better control of the inventory of such a large library. One of the main tasks of the migration was to detect bugs or areas of improvement in the components using the best properties that Figma gave us on XD. The migration began from the Foundations, in this area we encompass the typographic styles, the color palette, the iconography, buttons and hyperlink styles. With this defined we move on to the next stage of migrating the components, then the patterns and finally the templates.

This work is shared with a team of developers according to the region, these are LATAM and CA, APJ, EMEA and US. In which, through tickets through the Jira platform, we maintain contact regarding requests for the creation of new components, updates or modifications according to business needs. As a bridge between developers and designers, we use the StoryBook platform to internally review the components previously created when tested on the UAT platform and/or in production.

After a global decision by the marketing team, a new visual design for all HP branding is launched. With which you have the task of redesigning the entire design system following the new guidelines. Creating an internal team for this task. Due to this, the library is assigned to me, for review, update and modification. This library is currently in use for stores in Europe, US and Canada.