beta 1.0
CREATE AND SCALE
Developing and evolving HeroSpark's Design System was a challenge that combined accessibility and scalability.
KEY STAGES
A. Understanding:
Benchmark / Alignment / Roadmap.
B. Diagnosis:
Component inventory / Branding study / Product inventory
C. Actionable:
Contextualization / Technical development / Application of the new Foundations / How to spread their use.
D. Communication:
Validation with the areas mainly product and engineering / Monitoring with customers.
SUPPORT DOCS
A. Zeroheight:
Detailed documentation of each of the components related to the Foundations under study.
B. Roadmap:
Ruler for monitoring each stage of the project, as well as responsible people.
C. Figma Component Library:
Assets to be used at the time of creation by Product Designers.
D. Specification in Handoff:
Minimum specification for the engineering team when finalizing the prototype and files.
COLOR SYSTEM
We deliver our Color System based on and validated with "AA" accessibility criteria, and in some cases "AAA", at this first stage.
SUPPORT AND TOOLS
Taking into account and understanding that the tools are not the solution, but that they can be allied to what is being done, we decided to support our Foundations analyses with some of them, in this case, with Adobe's “Color Contrast Analyzer” .
CONTRAST RATIO
For each of the color variations and groups, a study and validation of levels was carried out, with a minimum of "AA", in the application of text over the color, application of text with the color and also graphic/visual elements with or over these colors.
CHECKING ON DEVICES
Checking on different devices was a very important step in the process, as the intensity of brightness, contrast, reflection, among other things, can vary from screen to screen.
COLLECTIVITY
One of the main points in this project was precisely the involvement and conversation not only between the design team and people interested in the Design System or accessibility.
FUTURE: VALIDATION
Presentation and all the work developed in this project for the Product Manager — PM (Product Managers), Agiles (Agilists) and the Chief Product Officer — CPO.
FUTURE: STRUCTURE
Contextualization of the theme.
Technical development.
Application of the new Foundations.
Diffusion of use within teams/squads.
FUTURE: WHAT NOW?
This work was a small step, but extremely important not only for the purpose of trying to make the product more accessible for everyone, but also for bringing up the accessibility issue within the company and for different people.
KEY STAGES
A. Understanding:
Benchmark / Alignment / Roadmap.
B. Diagnosis:
Qualitative Research / APP Analysis / Documentation.
C. Actionable:
Figma template / Video lesson / Documentation / Monitoring spreadsheet.
D. Communication:
Courses / Talks / Results display.