Introduction to the analysis, conceptual and functional design of an application up to the design of its user interface.

The purpose of this article is to give a basic idea about the analysis, conceptual and functional design, oriented to the development of management systems or applications. My intention is to highlight the key points of this process, since they will be the same that a project owner or someone interested in the subject should handle. Here are the key points.

Capture and extraction of data and information

Capture: refers to the process of receiving data and information that is obtained through different channels: oral presentation, materials (documents, images, etc.), observation of an activity. Something like: the Project emits and the Functional Designer (FD) receives.

Extraction: Perceptive and analytical ability of the FD to realize, deduce, predict, extract or reveal data, information and scenarios that are not present during or after the capture.

At this point it is important to highlight the role of the project partner(s) in providing general or role-specific data and information, and/or responding to requirements that arise in the capture/extraction process.

Data vs. Information

Data: is a raw unit or entity that has no meaning or linkage. It can be a number, characters, symbols, colors, parameter.

Information: is a piece of data or set of data that acquire meaning after a process of analysis or derived from an intention.

Examples:

As data: seeing or hearing the number 40.

As information derived from analysis: if yesterday we received 80 products and 40 were sold, that number corresponds to the available stock.

As information derived from the intent: I would like to enable this space for about 40 people.

Conceptual Design: structure or conceptual map

Refers to the work of the FD to create a system, a representation that includes and structures the set of data and information captured/extracted, focused on the objective and functionality required by the project. It can be represented/communicated through a functional document or a diagram or concept map (or both). In either case, this material must explicitly communicate: the hierarchy and interrelationship of components, their meaning, functionality, variables and conditionality.

The following is a basic example of a concept map where the concepts described are represented:

Hierarchy and interrelation of the components: represented in the tree structure that begins with the idea at the top, which branches (differentiates) into its different concepts.

Meaning: name that defines the concept of that point in the structure. In case it branches into other concepts (children), the latter must be closely linked to the meaning of the point that derives them (parent). Example: the Products menu.

Functionality (conceptual and technical): conceptual functionality refers to defining the objective that the concept fulfills within the system. The technical functionality is related to the technical aspect that will allow the operation of this point/objective (in this case it is the source code, server resources, etc.).

Variables: is a data, value or condition that acts as a variable. They can be created manually or generated by the application itself. They take the form of a specific value or a range of values.

Conditional: These are scenarios, situations, conditions that influence the behavior of the system. In this diagram, the orange box indicates a condition: that the user must be logged in.

Functional or Technical Design

This refers to the document that describes in detail all the technical requirements of each component or section. Example: the types of fields included in the forms or when the logged-in user session variable is needed.

The elaboration of this document begins when the conceptual design is totally or partially approved. I say partially only if this section can be considered independently.

Prototyping

I refer to the creation of a prototype that allows to show how the application will be from the UI (User Interface) and UX (User Experience) point of view. In this step the visual aspect is defined and created, how the information is presented, the buttons, the color, the style of the whole and even the navigation. As a whole, it must provide the user with a simple, pleasant and intuitive design that guarantees their orientation, reaching the goal in the fewest number of steps... what is called usability.

The responsive design is another important aspect to take into account, as it defines how the application looks on each type of device: smartphone, tablet, monitor.

Why should we make a concept map for our project?

As a last point, I think it is important to answer this question. Conceptual and functional design is a guide that helps the development of a new project, extracting and revealing data and information sometimes not contemplated. When performed, it is useful for upgrades or scalability of an existing project and also a way to transfer knowledge from one developer to another, or to incorporate a team of developers to the project. To these advantages I add that this map is also a reference and tracking document that allows to verify scenarios and to know where, who, what and when they have been verified. Therefore, the higher the complexity, the more necessary it will be.

So far this introduction that I hope will be useful, both for those who wish to develop this type of project, as well as for those interested in learning this work.

Any comment or contribution on this article will be welcome. Thank you for your time and interest.

Author: EQ
Date: October 9, 2022.