In this crucial phase, the goal was to fully immerse in the reality of VALTEC and its users. A strategic conversation was initiated with the project manager to deeply understand the target audience of the website, identifying the language and tone that would best connect with them. Most importantly: specific problems on each page of the existing site were explored, and with equal attention, elements that worked well and should be retained in the redesign were identified.

Furthermore, extensive benchmarking research was conducted on reference pages within the software development sector to analyze best practices and their weaknesses. To ensure the client’s vision materialized, the desired style for the new website was discussed, requesting visual references to guide the aesthetic and functional direction of the project. This immersion ensured that the future design would be aligned with business expectations and real user needs.

After delving into the needs of the client and their users, the next step was shaping the information structure. Given that VALTEC’s site housed a significant number of success stories, detailed services, and blog articles, the need for impeccable organization became clear. Thus, a comprehensive Site Map for the entire website was built.

This Site Map was articulated into five main categories: Services, Success Stories, Products, Blog, and About Us. Within each of these major sections, a detailed internal structure was defined, ensuring that every piece of content had its logical and accessible place. This process laid a solid and strategic foundation upon which the entire new website would be built, guaranteeing intuitive navigation for the user.

Once the information architecture was solidly defined, the next step was to translate that structure to a more visual level: the site’s wireframes were created. In this phase, the structure of each key page was outlined: from the homepage to the services and success stories pages, not forgetting the design of blog entries and individual articles.

The main goal of these sketches was to facilitate quick and direct client feedback. This allowed for validating whether the organization of elements was as expected, if any section needed to be relocated to improve navigation, or if anything was not entirely clear. This early iteration was crucial to ensure the visual foundation of the website was aligned with business expectations and user needs, before investing resources in high-fidelity design.

With the structure well-defined, it was time to give personality and visual cohesion to Valtec’s website. A solid visual identity was created: a single icon library (Bootstrap Icons) was selected, and typography and its sizes were precisely defined for the entire text hierarchy (titles, subtitles, labels, and descriptions) in semibold and regular variants.

This foundation was complemented by a strategic use of Valtec’s corporate colors, both on the web and in the selection of tones for primary/secondary buttons and services, ensuring chromatic harmony. For a clean, unified visual experience, AI-generated images using Valtec’s palette were incorporated, making the website feel modern and reliable.

Following the established visual identity and structure, the next major step was to transform everything into a tangible, development-ready experience. The creation of the final prototype in Figma proceeded, where each screen came to life in high fidelity. This included the detailed design of the homepage, services sections, success stories, the blog, and all other key pages.

This prototype was meticulously built following the information architecture and wireframes previously approved by the client. The result was a faithful visual representation, uniting the initial vision with the final visual design, making everything ready for the development phase.