About Echos
Echos is much more than a consultancy — it’s an innovation lab that inspires organizations to rethink how they create value. From strategic consulting to a Design Thinking and Artificial Intelligence school, as well as business acceleration programs and in-company training, Echos’ essence is to transform creativity into tangible results.
Echos is much more than a consultancy — it’s an innovation lab that inspires organizations to rethink how they create value. From strategic consulting to a Design Thinking and Artificial Intelligence school, as well as business acceleration programs and in-company training, Echos’ essence is to transform creativity into tangible results.
The Challenge
Despite its strong and well-recognized internal identity, Echos’ digital experience no longer reflected its full innovative potential. It was time to update the website’s interface to modernize navigation, visually convey its creative culture, and make the user journey clearer and more intuitive.
Despite its strong and well-recognized internal identity, Echos’ digital experience no longer reflected its full innovative potential. It was time to update the website’s interface to modernize navigation, visually convey its creative culture, and make the user journey clearer and more intuitive.
Project Goal
The main goal was to carry out a complete facelift of the institutional website, adapting the existing visual identity to the digital environment, improving usability, and ensuring that information is presented in a more fluid, engaging, and persuasive way.
The main goal was to carry out a complete facelift of the institutional website, adapting the existing visual identity to the digital environment, improving usability, and ensuring that information is presented in a more fluid, engaging, and persuasive way.
My Role
I was responsible for leading the entire design process — from research, information architecture, visual concepts, and prototypes to the creation of a new, lighter, cohesive, and impactful user interface (UI).
I was responsible for leading the entire design process — from research, information architecture, visual concepts, and prototypes to the creation of a new, lighter, cohesive, and impactful user interface (UI).
Impact Achieved
The result is a more inspiring website with clear flows, visually aligned with Echos’ innovative essence, enhancing the brand’s positive perception and making it easier to convert new business opportunities.
The result is a more inspiring website with clear flows, visually aligned with Echos’ innovative essence, enhancing the brand’s positive perception and making it easier to convert new business opportunities.
Site Structure
To ensure the project would be delivered within the timeline defined by Echos, I started by mapping out the entire structure of the existing website. This gave me a clear view of the number of pages and templates, allowing me to estimate the effort required for each stage.
Visual Record
With the structure organized, I navigated through the entire website and captured screenshots of every page, naming them according to the sitemap. This visual record was essential to see the site architecture in a practical way.
Pattern Analysis
I organized all the screenshots according to the sitemap order, which allowed me to analyze the information architecture as a whole. This helped me identify patterns: which templates were recurring and which were unique or stand-alone. This was key to planning a more cohesive design.
Strategic Grouping
From this analysis, I broke down the templates and grouped them based on structural and content similarities. This helped to create a more efficient strategy for designing the page layouts in a scalable way.
Componentized Modules
Moving from macro to micro, I dove into analyzing all the modules within the templates. I also grouped these blocks by similarity to understand how they could be reused in the page construction.
This process was essential to accurately estimate the real design effort and define partial deliveries more assertively, since once the main modules were defined, the rest could follow the same visual standard.
This process was essential to accurately estimate the real design effort and define partial deliveries more assertively, since once the main modules were defined, the rest could follow the same visual standard.
Art Direction
The visual language of the facelift was based on Echos’ existing identity. I kept the brand’s colors, graphic elements, and visuals, but applied them in a lighter, more contemporary way, ensuring clearer and more inspiring communication.
Page Redesign
The first page to undergo a deeper change was the Home page. Together with the Echos team, we defined that it would serve as a hub for the company’s three main pillars: School, Consulting, and Ventures.
The structure became more dynamic, with sections that explore movement and visual hierarchy, making the navigation flow more direct and engaging.
The structure became more dynamic, with sections that explore movement and visual hierarchy, making the navigation flow more direct and engaging.
Pattern System
I designed a set of standardized, componentized modules built with auto-layout. This approach makes it easier to update the website and create new landing pages for courses and future initiatives.
These modules follow the established grid and guidelines, which speeds up maintenance work for both designers and developers.
These modules follow the established grid and guidelines, which speeds up maintenance work for both designers and developers.
Facelift Concept
To give it a more modern and inviting look, I worked with more breathing space between elements, generous white areas, larger fonts, and clear highlights for important information such as dates and times. All of this was integrated with the brand’s graphic elements.
This attention to detail ensures a more fluid, coherent, and easy-to-navigate experience, reinforcing Echos’ innovative image.
This attention to detail ensures a more fluid, coherent, and easy-to-navigate experience, reinforcing Echos’ innovative image.
