Skip to main content

Veritran Docs

Anatomy and Complexity Definition

Previous steps

To work on this instance, the UX Designer must have previously define that they need to make changes to existing configurable components or create new ones.

Who participates in the definition instance?

The UX Designer and the Technical Lead are in charge of understanding the criteria and determining if they will create new configurable components or modify existing ones.

Where do you work?

To work on this step, you must use the Design System document available in your Figma repository. You must use the use the Organism template and add the new or modified configurable component in the Organisms section.

In this step, the UX Designer and the Technical Lead must review the criteria to update or create configurable components and document the design and functional aspects of the organisms they will work with.

Tasks execution

The UX Designer and the Technical Lead must review each configurable component to be updated and execute the following tasks:

  1. Check the configurable component update and creation criteria. Read Configurable Component Update and Configurable Component Creation to learn more.

  2. If the configurable component complies with update requirements:

    1. Go to the Design System file in the documentation repository.

    2. Duplicate the required configurable component section from the list of Organisms.

    3. Modify the anatomy configuration with the visual changes that will be required in the building process in Studio.

  3. If the configurable component does not comply with update requirements (and therefore, a new configurable component is required) and complies with creation requirements:

    1. Go to the Design System file in the documentation repository.

    2. Find the Organism anatomy template in the Organisms section and duplicate it.

    3. Complete the template with the following information:

      • Name using the following structure: organism type and identificator. For example: Ipt_phone_number;

        Important

        Naming structure is mandatory and must always start with the organism type.

      • Functional description: problem that it solves or functionality offered;

      • Anatomy: components it includes and their styles; and

      • Statuses and behavior of its components.

    ORGANISMOS_DESIGN_DESCRIPTION.png
Configurable Component Update

The team will define the update of a configurable component only if the following criterion is met: the changes must only affect the visual aspects -that is to say, UI elements- of the component and these changes don't affect the retrocompatibility aspect. For example, a card carrousel organism where you need to add arrows to go back and forth between cards.

Note

Visual changes can be configured with using the feature flag functionality. This way, teams can define whenever they don't need to apply the visual change added to their apps.

Basic considerations

The considerations listed below determine whether you are allowed to update the interface of a configurable component or not. This means that, depending on the impact, there are changes allowed - and therefore, you can update the component-, changes that have restrictions and changes that are not allowed.

Configurable Component Creation

To consider creating a configurable component, one of the following circumstances must occur:

  • An existing configurable component can be used but it is necessary to make changes to its logic or add another functionality -that is to say, they must change the configuration of the configurable component parameters, which results in a new component. For example, an input component that supports only numbers now requires to support email addresses.

    Note

    Changes to the logic may affect the retrocompatibility of configurable components and require a higher degree of maintenance.

  • Existing configurable component do not offer the functionality or solve the problem identified in the new screen.

Creation checklist

Once the UX Designer and the Technical Lead identify a new configurable component is required, they must consider and answer the following questions and check if the outcome implies creating a new configurable component. Team members must be able to respond all these questions and comply with the accessibility and documentation requirements specified. If they can't give a response to any of these questions, they must not create a new organism. Refer to the table below to learn more.

Note

These questions involve data that must be considered as a guide for the team members to understand when an organism must be created.

Statements and questions

  • The configurable component has a clear and functional purpose.

    • Which user problem does it solve?

    • Which user task or interaction provides?

  • The configurable component is modular and can be reused with different configurations and styles.

    • Can it be reused with different attributes configurations and styles?

    • Is it independent from specific elements in the screen where it will be instanced? For example, it does not invoke any other entities or configurable components.

  • The configurable component is scalable for future needs.

    • What happens if the content of the configurable component increases or decreases?

    • What happens if the content of the configurable component is longer or shorter than expected?

    • Can the design be adapted to different screen resolutions?

  • The configurable component has defined interactions and clear feedback.

    • What happen with states like hover, focus or error?  

    • Which feedback does the user receive after interacting in the app?

  • The configurable component complies with accessibility standards.

    • Can be navigated using the keyboard. 

    • Color contrast can be modified.

    • Includes descriptions or tags for assistive technologies.

    Important

    This is not a question but an obligation for the team, to make sure that the organism is strictly documented considering its design and building aspects.

  • The configurable component will have documentation to explain its use.

    • Use cases, statuses, configuration and parameters.

    Important

    This is not a question but an obligation for the team, to make sure that the organism is strictly documented considering its design and building aspects.

In this section: