Photo by Matthew Feeney on Unsplash
Ingresso's Design System
In order to avoid inconsistencies within Ingresso's products, we started a Design System, to attend the entire company. This way, we could ensure that everyone would be using the same standards.
According to Emmet Connolly, director of product design at Intercom, “… most Design Systems are really just Pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.”
Company
Ingresso.com is a Fandango company, part of the Comcast group, with over 20 years of experience in the ticket sales area in Brazil.
My role
Product design intern
Year
2018
Test
We analyzed the elements present in our products and then, we applied the atomic design methodology, in order to organize everything. Some things were adapted to fit in our scenario, such as the quarks and bosons, a high level of detail that was not necessary to our products. After studying and testing the method, we defined a few tasks to proceed:
✤ Inventory
✤ Design principles creation
✤ Atomic organization
✤ Tests documentation
✤ Atoms, molecules, organisms and templates definition
✤ Motion and status definition
✤ Hierarchy, nomenclature, file organization, versioning tool (all members work together at the same file) definition
Photo by İrfan Simsar on Unsplash
Inventory
Every component present in our app, website, checkout, POs and ATM were printed and categorized following the atomic design principles. Three sizes were discovered during the study phase: small for web applications, medium for mobile apps and large for self-service products (vertical and horizontal). After that, the components creation on sketch was started.
Creation
Atoms
"Atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. (Yes, it’s true atoms are composed of even smaller bits like protons, electrons, and neutrons, but atoms are the smallest functional unit.)" – FROST, Brad. Atomic Design Methodology.
"Atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. (Yes, it’s true atoms are composed of even smaller bits like protons, electrons, and neutrons, but atoms are the smallest functional unit.)" – FROST, Brad. Atomic Design Methodology.
✤ Color
✤ Shape
✤ Grid
✤ Text
✤ Icon
✤ Logo
✤ Image
✤ Shape
✤ Grid
✤ Text
✤ Icon
✤ Logo
✤ Image
Molecules
"Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems." – FROST, Brad. Atomic Design Methodology.
"Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems." – FROST, Brad. Atomic Design Methodology.
✤ Button
✤ Illustrated icons
✤ Illustrations
✤ Components
✤ Illustrated icons
✤ Illustrations
✤ Components
At the moment we are in the process of documenting both the design process and the use of each of the items designed, in order to make the library available for internal and external use, as well as making the assets available.
To be continued...
Thanks ;)
Thanks ;)
