Design system audit
Details
Role
UX researcher, UX/UI designer
Tasks
Design audit, workshops, stakeholder interviews, documentation.
Achieved goals
- Succesfully created a design source of truth to iterate with.
- Reduced friction in communication between teams (32% fewer requests for specs or assistance).
- Successfully created a tag system for measuring component data (e.g. how much a component is used by the company, or track user behaviors in specific user flows).
Context
Over time, features have been developed in different products in the company that have generated technical and design debt, and because of this, there are clear inconsistencies both at the communicative level, at the visual level and at the production level (for example, same visual appearance but different code components).
Challenges
- Investigate and monitor all the components in use of all the products we offer.
- Increase the autonomy and productivity of technical teams.
- Improve the visual appearance of all interfaces
Process
The process is divided in 6 main phases: Quickoff, discovery, concept, design, analysis and development.
Quickoff
Roadmap
In this phase, the team and stakeholders were decided, based on a stakeholder map process. After that, the team decided the schedule based on business goals and technical constraints.
Discovery
Once we know the magnitude of the problems to be addressed and we are aware of the time and resources available, the team focuses its efforts on taking an inventory of all products and active components to date. At the same time, reports were created based on internal benchmarking and a secondary research was carried out to support decisions based on existing usability patterns, both in competitive products and in products from other industries.
Concept & definition
Once we have all the information, both from stakeholders and from the research carried out, we begin to map all the modules that make up the components in order to "atomize" as many elements as possible. Thanks to this, and with the elements reduced to a minimum, the list of assets necessary to make up the first stage of the design system is created, to later elaborate the tokens.
Design
Token system
The token system created is based on a hierarchy of levels (base - product - theme - modifier - info). With special detail at the "product" level (since different products will use different tokens) and "theme" (since it allows us to create custom themes for specific reasons (e.g. different clients).
Asset updating & visual design
Once we had a consistent token structure, the main assets such as fonts, colors, sizes, etc were updated and prepared, along with the visual assets such as icons, illustrations, and imagery.
Prototyping
After documenting all the graphical and token parts, it was possible to start prototyping all the components and usability patterns established in the definition. In this phase, the tags assigned to the existing components were also reviewed, and new ones were assigned based on the business objectives defined in the roadmap and in the definition phase.
Analysis
Validation & testing
In a board presentation we show the results of the design system to stakeholders to do a pre-validation of the entire content summary. Subsequently, several tests were developed both internally and at the user level (since there were substantial changes in some components) to validate hypotheses and collect more data.
Handoff & documentation
Once the value proposition was validated, the process was documented and a the team set up the process scope to make a progressive handoff for a correct implementation on the shipped products and a iteration plan.