{"id":42,"date":"2021-04-23T10:31:10","date_gmt":"2021-04-23T13:31:10","guid":{"rendered":"https:\/\/marcosalmeida.com.br\/index.php\/portfolio-single\/"},"modified":"2021-04-29T00:45:47","modified_gmt":"2021-04-29T03:45:47","slug":"apice","status":"publish","type":"page","link":"https:\/\/marcosalmeida.com.br\/index.php\/apice\/","title":{"rendered":"\u00c1pice"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Redesenho do site da \u00c1pice\u200b<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

\u00c1pice \u00e9 um escrit\u00f3rio que cuida de toda a contabilidade do seu neg\u00f3cio para que voc\u00ea n\u00e3o precise se preocupar com nada.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Dura\u00e7\u00e3o do projeto<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Out 2020<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t

Meu papel<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

UX\/UI Designer, respons\u00e1vel pelo design das telas, componentes e intera\u00e7\u00f5es do produto.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Vis\u00e3o geral<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

O site atual da \u00c1pice j\u00e1 n\u00e3o comunicava os valores e identidade visual do escrit\u00f3rio, al\u00e9m de apresentar conte\u00fado e estrutura que dificultavam o entendimento e a navega\u00e7\u00e3o do usu\u00e1rio nas p\u00e1ginas. <\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

O desafio<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Redesenhar o site da \u00c1pice para oferecer uma experi\u00eancia de uso aos clientes que facilite a localiza\u00e7\u00e3o de conte\u00fados desejados e torne a navega\u00e7\u00e3o mais fluida, otimizando a taxa de convers\u00e3o. <\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

An\u00e1lise competitiva<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Iniciei o projeto analisando os concorrentes da \u00c1pice, onde percebi padr\u00f5es de informa\u00e7\u00f5es e destaque a servi\u00e7os que eram apresentados em quase todos os sites. Identifiquei servi\u00e7os bem detalhados e de f\u00e1cil entendimento, com conte\u00fado simples e direto.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t

A utiliza\u00e7\u00e3o de terminologia alinhada ao conhecimento t\u00e9cnico do escrit\u00f3rio e n\u00e3o a de dom\u00ednio do cliente, foi outra diferen\u00e7a identificada durante o estudo. Por fim, foi poss\u00edvel entender o caminho para o qual o novo site da \u00c1pice deveria caminhar.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"Planilha\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Arquitetura da informa\u00e7\u00e3o<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

A \u00c1pice oferece os servi\u00e7os para basicamente 3 personas: Empres\u00e1rios, Profissionais aut\u00f4nomos e Declarantes do IRPF. Precisava pensar numa forma de organizar o conte\u00fado de modo a facilitar o acesso das informa\u00e7\u00f5es para cada segmento.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t

A elabora\u00e7\u00e3o do Mapa do site levou em considera\u00e7\u00e3o a disponibiliza\u00e7\u00e3o das informa\u00e7\u00f5es de modo espec\u00edfico para cada segmento, facilitando a leitura do conte\u00fado mais apropriado e desejado por eles.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"Sitemap\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Rascunho, wireframe e prot\u00f3tipo<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Antes mesmo de come\u00e7ar a prototipar qualquer p\u00e1gina da solu\u00e7\u00e3o, criei rascunhos para validar rapidamente as ideias iniciais. A cada aprova\u00e7\u00e3o o desenho ganhava mais detalhes. Com o wireframe conseguimos validar a navega\u00e7\u00e3o e organiza\u00e7\u00e3o das informa\u00e7\u00f5es na interface. <\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\tA cada rodada de intera\u00e7\u00e3o o site ganhava forma. Com o prot\u00f3tipo conseguimos alinhar e definir quest\u00f5es visuais e de conte\u00fado, al\u00e9m de preparar o terreno para o desenvolvimento das telas. Prot\u00f3tipo interativo dispon\u00edvel aqui<\/a><\/strong>.<\/span>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"Rascunho,\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

O que aprendi<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

As frequentes itera\u00e7\u00f5es com o cliente contribu\u00edram para o r\u00e1pido desenho da nova vers\u00e3o do site. A utiliza\u00e7\u00e3o de desenhos e prot\u00f3tipos em diversos graus de fidelidade, reduziu o tempo e retrabalho, pois as telas seriam aperfei\u00e7oadas a cada aprova\u00e7\u00e3o.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t

Embora tenhamos chegado a uma vers\u00e3o final da estrutura do site, a produ\u00e7\u00e3o do conte\u00fado ficou pendente, assim como sua publica\u00e7\u00e3o. Precisamos pensar numa forma de facilitar a elabora\u00e7\u00e3o dos textos que far\u00e3o parte do site, sem exigir tanto do cliente, pois ele nem sempre ter\u00e1 disponibilidade.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
Leia o estudo de caso<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Mapa<\/a><\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
Leia o estudo de caso\u200b<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Sislegis<\/a><\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Redesenho do site da \u00c1pice\u200b \u00c1pice \u00e9 um escrit\u00f3rio que cuida de toda a contabilidade do seu neg\u00f3cio para que voc\u00ea n\u00e3o precise se preocupar com nada. Dura\u00e7\u00e3o do projeto Out 2020 Meu papel UX\/UI Designer, respons\u00e1vel pelo design das telas, componentes e intera\u00e7\u00f5es do produto. Vis\u00e3o geral O site atual da \u00c1pice j\u00e1 n\u00e3o… Continue a ler »\u00c1pice<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/template-pagebuilder-full-width.php","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/marcosalmeida.com.br\/index.php\/wp-json\/wp\/v2\/pages\/42"}],"collection":[{"href":"https:\/\/marcosalmeida.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marcosalmeida.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marcosalmeida.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcosalmeida.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":44,"href":"https:\/\/marcosalmeida.com.br\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":628,"href":"https:\/\/marcosalmeida.com.br\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions\/628"}],"wp:attachment":[{"href":"https:\/\/marcosalmeida.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}