Analysis and definition
Who participates in the analysis and definition instance?
The UX Designer has two tasks: reviewing the new screens flows or functionalities added to the app and classify its components and, then, defining if the configurable components available satisfy their needs or if it is necessary to create new configurable components or update existing ones.
Where do you work?
To work on this step, you must use two documents: first, the Screens Flows document and then, in the Design System document, both available in the Figma documentation repository you previously created during the Design System phase. If you decide to update configurable components or create new ones, you must use the Configurable component technical documentation template and add the new or modified configurable components in the Organisms section in the third instance.
The first instance in the new configurable components phase involves two steps:
Reviewing the new screens flows that will be added to the app - which includes the analysis of all the components within them and defining which will be built using native components or configurable components.
Analyzing the configurable components required and define whether the project can use prebuilt configurable components without any changes, or must use new configurable components or update existing ones.
Step 1 - Analysis of new screens flows
Configurable components or native components
This instance requires understanding the concepts of native component and configurable components:
Native component: simple components installed in Studio by default. These component structure cannot be modified through parameters.
Configurable component: Set of native components that serves a specific function and can be reused. Configurable components' structure can be modified by changing its parameters. These components are added to your Studio environment through a module.
Warning
The set of configurable components is made available through the Configurable Components module. If the module is not added in your Studio environment, contact the UX team for assistance.
Veritran configurable components are classified under five types:
Type
Name Identificator in Studio
Description & examples
Input
IPT
Used to obtain data entered by the user.
Input text field
Date picker
Options drop-down menu
Navigation
NAV
Allows the user to navigate through sections, screens or content.
Main menu
Pagination
Sidebar
Container
CTR
Used to organize and show information in a structured, hierarchical or repetitve manner.
Card carrousel
Products or promotions list
Banner with action button
Modal
Indicator
IDR
Show information to the user related to their progress, location or status within the app.
Loader
Progress indicator
Steppers
Feedback
FDK
Inform the user about app status or actions resuts.
Notification
Success or error message
Important
Name identificators are mandatory and cannot be changed. Whenever a configurable component is documented in Figma or built in Studio, its name must start with the identificator corresponding to its type.
To learn about the configurable components in the Veritran platform, go to the Configurable components list in your project repository and your Design System file in Figma.
Tasks execution
Important
Before starting to work on these steps, the technical lead must request the Solución de Caja team to install the configurable components modules in the project's Studio environment and share the respective technical documentation of each component.
To carry out this instance, the UX Designer must execute the following tasks:
Duplicate the master documentation repository in the project's Sharepoint. The repository consists of three documents:
Configurable components list: list of configurable components created in Veritran and available for use.
Technical documentation template: documentation that must be completed by the implementer before configuring the configurable component in Studio. This template contains the parameters that must be completed and a use case for example purposes.
Configurable components checklist: checklist that contains the steps and tasks that must be performed by the team members throughout the configurable components phase.
Update the Screens Flows document with the new screens flows added or update the existing flows with the changes made to the screens that include new functionalities.
Review the components in each screen, check the components data in the Design System document and determine which can be built using native components and configurable components. At this point, the UX designer will execute different tasks depending on the components required:
Tip
In most cases, screens flows will require the use of native components and configurable components.
In the case of native components, the UX designer will drag and drop the component from the Figma library to the screens flows document. Then, the implementer will build it using the native components available in Studio. When these components are used, the project team will proceed with the third stage in the app building process: functional flows.
If a component is a configurable one, the UX designer moves to the second step in this instance, where they will define it and its characteristics, and determine whether they will use available configurable components, create new ones or update existing ones, and map it in the screens flows document.
Step 2 - Definition of configurable components
This step only applies to the configurable components that will be used in the app screens.
Tasks execution
The UX Designer will execute different steps depending on their findings on configurable components. For this purpose, the designer must use the documentation available and understand when configurable components must be created or updated.
Review each new screen and identify whether it is possible to built it with the configurable components available in the Design System file (Organisms section, divided per type):
If it exists in the Organisms section and can be built using a prebuilt configurable component with all its characteristics as configured, drag and drop the configurable component from the Figma library.
it can be can be built using a prebuilt configurable component but it is necessary to make changes, move to the second instance to define its anatomy and complexity and review whether the changes require creating a new configurable component or an update to the configurable component parameters configuration.
If it cannot be built using a prebuilt configurable component, define that a new configurable component must be created and move to the second instance to define its anatomy and complexity.
Note
The update to the component or creation of a new component must be documented in the Organisms section and created as a component in the Figma library. Then, the UX designer will have to drag and drop it in the screens flows document.