workflow_ui_team [DokuWiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Workflow for UI Team ======
This article aims to provide a high-level overview of a workflow for the UI Team. It outlines critical steps, team interactions, and documentation outputs.


==== Workflow Steps ====

  - **1. Idea**\\
    The conceptual phase where the project idea is generated.

  - **2. Requirements**\\
    Gathering of project requirements, often in consultation with stakeholders.

  - **3. Stack planning**\\
    Selection of the technology stack for the project.

  - **4. Wireframe planning**\\
    Parallel to stack planning, the UI team creates wireframes to visualize the user interface.

  - **5. API contract**\\
    Together with the backend team, planning efforts are consolidated, resulting in the defining of an API contract. The backend team provides a mock API for frontend development.

  - **6. UI development (local)**\\
    The user interface is developed locally, based on the API contract.

  - **7. Demonstration (to project manager)**\\
    The developed UI is demonstrated to the project manager for feedback and approval.

  - **8. Build & Deploy (staging)**\\
    With a functional API from the backend team, the application is built and deployed to a staging environment for further testing.

  - **9. Testing (case-specific)**\\
    The application undergoes case-specific testing to ensure quality and functionality.

  - **10. Build & Deploy (production)**\\
    The final product is built and deployed to the production environment. The operations team is involved at this stage, requesting updates as needed.

==== Team Involvement ====

  * **Stakeholders:** Provide input on requirements.
  * **Backend Team:** Heavily involved in planning and API development.
  * **Operations Team:** Engaged during the production deployment phase, requested updates as needed.

==== Expected Documentation Outputs ====

Below is a list of documentation typically produced at each relevant step (note that each step number corresponds to the ones shown in Figure 1):

  - **2. Requirements specification**\\
    A detailed document outlining the functional and non-functional requirements for the project.

  - **3. ADR (Architecture Decision Record)**\\
    Documentation of key architectural decisions made during stack planning.

  - **4. Wireframes**\\
    Visual representations of the user interface layout and navigation.

  - **5. API contract (medium like ADR)**\\
    A formal specification of the API endpoints, data structures, and expected behaviors.

  - **6. Unstructured feedback from project manager**\\
    Notes or informal documentation from the project manager capturing feedback and suggestions.

  - **7. Release notes**\\
    A summary of features, changes, and fixes included in the current release.

  - **8. Case-specific test report**\\
    Documentation of test cases executed, results, and any issues found during staging.

  - **9. Case-specific handover docs**\\
    Documents prepared for the operations team to support deployment and maintenance.


{{:workflow_for_ui_team-page-1.drawio.png?600|}}

Figure 1. The figure illustrates the workflow to be following by the UI team. It shows the steps involved as well as the points of collaboration/communication (depicted with dashed arrows) with stakeholders, backend teams, and operations teams along the way.