Sobre a Echos
A Echos é muito mais do que uma consultoria, é um laboratório de inovação que inspira organizações a repensarem a forma como criam valor. Com atuações que vão de consultoria estratégica a escola de Design Thinking e Inteligência Artificial, passando por programas de aceleração de negócios e cursos in company, a Echos tem como essência transformar a criatividade em resultados tangíveis.
A Echos é muito mais do que uma consultoria, é um laboratório de inovação que inspira organizações a repensarem a forma como criam valor. Com atuações que vão de consultoria estratégica a escola de Design Thinking e Inteligência Artificial, passando por programas de aceleração de negócios e cursos in company, a Echos tem como essência transformar a criatividade em resultados tangíveis.
O desafio
Apesar de sua identidade forte e reconhecida internamente, a experiência digital da Echos já não refletia todo seu potencial inovador. Era hora de atualizar a interface do site para modernizar a navegação, traduzir visualmente sua cultura criativa e tornar a jornada do usuário mais clara e intuitiva.
Apesar de sua identidade forte e reconhecida internamente, a experiência digital da Echos já não refletia todo seu potencial inovador. Era hora de atualizar a interface do site para modernizar a navegação, traduzir visualmente sua cultura criativa e tornar a jornada do usuário mais clara e intuitiva.
Objetivo do projeto
O principal objetivo foi realizar um facelift completo do site institucional, adaptando a identidade visual existente para o ambiente digital, melhorando a usabilidade e garantindo que as informações fossem apresentadas de forma mais fluida, atraente e persuasiva.
O principal objetivo foi realizar um facelift completo do site institucional, adaptando a identidade visual existente para o ambiente digital, melhorando a usabilidade e garantindo que as informações fossem apresentadas de forma mais fluida, atraente e persuasiva.
Meu papel
Fui responsável por liderar todo o processo de design, desde a pesquisa, arquitetura da informação, conceitos visuais e protótipos, até a criação de uma nova interface (UI) mais leve, coesa e impactante.
Fui responsável por liderar todo o processo de design, desde a pesquisa, arquitetura da informação, conceitos visuais e protótipos, até a criação de uma nova interface (UI) mais leve, coesa e impactante.
Impacto alcançado
O resultado é um site mais inspirador, com fluxos claros, visualmente alinhados à essência inovadora da Echos, potencializando a percepção positiva da marca e facilitando a conversão de novos negócios.
O resultado é um site mais inspirador, com fluxos claros, visualmente alinhados à essência inovadora da Echos, potencializando a percepção positiva da marca e facilitando a conversão de novos negócios.
Sitemap
Com a finalidade de atender ao prazo desejado pela Echos, iniciei fazendo um mapeamento completo da estrutura atual, para que eu pudesse dimensionar o esforço do trabalho, visualizando a quantidade de páginas e templates.
Screenshots
Com a estrutura do site mapeada, naveguei em todo o site, tirando os screenshots de todas as páginas, nomeando cada uma delas de acordo com os nomes dados às páginas do sitemap.
Análise de templates
Organizei todos os screenshots do site na estrutura do sitemap, conseguindo ter uma visão espacial da arquitetura de informação das páginas, podendo compará-las e já começar a perceber diferenças e semelhanças entre templates, identificando templates comuns e templates únicos ou isolados.
Mapeamento de templates
A partir do passo anterior, desmembrei os templates, agrupando-os por proximidade, com o fim de analisar uma possível estratégia na criação do layout das páginas.
Mapeamento de módulos
Do macro para o micro, nesse processo de trabalho, desmembrei também todos os módulos, e em seguida, assim como os templates, os agrupei por similaridade.
Este processo antes de trabalhar na linha visual, corroborou para que eu tivesse uma visão bastante clara do esforço que eu teria para fazer os layouts. É nesta etapa que eu começaria a ter uma ideia mais precisa sobre o prazo de entrega de uma parte das páginas do site, pois a partir dessas páginas ou templates, o resto seguiria a mesma linha visual, numa data posterior à entrega das páginas principais.
Este processo antes de trabalhar na linha visual, corroborou para que eu tivesse uma visão bastante clara do esforço que eu teria para fazer os layouts. É nesta etapa que eu começaria a ter uma ideia mais precisa sobre o prazo de entrega de uma parte das páginas do site, pois a partir dessas páginas ou templates, o resto seguiria a mesma linha visual, numa data posterior à entrega das páginas principais.
Key Visual
A linguagem visual deste facelift foi apoiada em uma identidade visual já estabelecida anteriormente pela Echos, logo foram usadas cores e elementos gráficos para compor todos os novos layouts.
Layouts
A primeira página, e que teve uma mudança significativa foi a Home, que sofreu alterações tanto visuais, quanto estruturais. Decidimos com o time da Echos, transformar a página inicial em um simples hub, direcionando para os 3 principais pilares da empresa: School, Consulting e Ventures, trazendo movimento nas três “dobras” da página.
Criação de padrões
Foram então desenhados um conjunto de módulos padrões componentizados e construídos com auto-layout, com o fim de facilitar a atualização e a construção de novas Landing Pages de cursos.
Esses módulos permitem que sejam modificados dentro do grid, utilizando as regras de cada um, facilitando não só o dia a dia de qualquer designer que venha a precisar mexer, como a vida do desenvolvedor.
Esses módulos permitem que sejam modificados dentro do grid, utilizando as regras de cada um, facilitando não só o dia a dia de qualquer designer que venha a precisar mexer, como a vida do desenvolvedor.
Facelift Concept
Considerei para o facelift maior espaços entre os elementos, mais áreas em branco, maiores fontes e maior clareza para informações importantes como datas e horários, unindo grafismos da identidade visual da marca.
