> For the complete documentation index, see [llms.txt](https://chakradhars-organization.gitbook.io/switch-factiva/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chakradhars-organization.gitbook.io/switch-factiva/factiva/design-process/5.-final-visual-design.md).

# 5. Final Visual Design

Once the explorations were finalized and the best option was defined, I began the process of aligning the design with the product's Design System. This process involves identifying the components to create or modify, defining the behavior of the components at each breakpoint, and maintaining constant communication with developers to understand the time implications and potential difficulties.

<figure><img src="https://3226277751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFIGLNtTjKM8deOGGZSDY%2Fuploads%2FGZL5yWz1wbrubRqydAOj%2Fimage.png?alt=media&amp;token=6f38dc45-68f2-47ac-bebd-85f7c65d0efa" alt=""><figcaption><p>Classic Environment</p></figcaption></figure>

<figure><img src="https://3226277751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFIGLNtTjKM8deOGGZSDY%2Fuploads%2FP7ySAF9fvKIq12PZGMw0%2Fimage.png?alt=media&amp;token=abc643aa-c972-4164-b739-05e75f8ce86e" alt=""><figcaption><p>New Factiva</p></figcaption></figure>

<figure><img src="https://3226277751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFIGLNtTjKM8deOGGZSDY%2Fuploads%2FymeKQXX5Eno7E30BWuET%2Fimage.png?alt=media&amp;token=38949a28-0eeb-4fbb-9b45-b076de4e24d4" alt=""><figcaption><p>Documentation</p></figcaption></figure>

### The modal proposal

{% embed url="<https://www.youtube.com/watch?t=11s&v=ftSfkGHWgPk>" %}

One of the main challenges of this project was how to communicate this functionality and its usage in an easy and quick way for users. This situation gave me the opportunity to propose something new within the platform: an animated modal.

To achieve this, multiple explorations and storyboards were conducted until finally adding the final designs, product team copy, and the Factiva look & feel.

<figure><img src="https://3226277751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFIGLNtTjKM8deOGGZSDY%2Fuploads%2FRaC4aTHCuR5wfBKPcgpg%2Fimage.png?alt=media&amp;token=163daab0-bce8-42b1-a200-067eff672fc8" alt=""><figcaption></figcaption></figure>
