O Boticário
PT - Case study para melhor a organização e distruição do menu e dos itens do e-commerce da Boticário. / EN - Case study to improve the organization and distribution of Boticário's menu and e-commerce items.
Cases Study
2 de nov. de 2024
Problema / Problem
PT
Este estudo de caso tem a proposta de fazer o redesign do menu do site da marca, focando na usabilidade e praticidade, melhorando o fluxo de compra e a navegação. Já que o mesmo tem muitos itens e categorias, o que dificulta a busca do usuário aos produtos.
EN
This case study proposes to redesign the brand's website menu, focusing on usability and practicality, improving the purchase flow and navigation. Since it has many items and categories, it makes it difficult for users to search for products.
Contexto do problema / Context of the problem
PT
Com a crescente demanda por produtos para cuidados do corpo, tais site como o da Boticário vem implementando cada vez mais seções, abas, menus, submenus, categorias e subcategorias em seus sites e aplicativos. Isso se torna um problema quando temos o mesmo produto para diferentes categorias, fazendo assim que a busca por algo simples se torne uma tarefa complexa e que requer uma certa curva de aprendizagem para explorar tantas opções nos menus oferecidos ao usuário.
Porém uma simplificação geral não é possível, visto que geraria mais confusão do que esclarecimento, pois existem produtos para funções específicas que não podem ser categorizados de forma geral.
EN
With the growing demand for body care products, websites such as Boticário's have been implementing more and more sections, tabs, menus, submenus, categories, and subcategories on their websites and apps. This becomes a problem when we have the same product in different categories, making the search for something simple a complex task that requires a certain learning curve to explore so many options in the menus offered to the user.
Proposta de solução / Proposed solution
PT
Reorganizar, renomear, excluir e adicionar algumas categorias do menu, do submenu e dos itens dentro dos submenus para tentar garantir uma experiência mais simples para achar e obter qualquer tipo de produto.
EN
Reorganize, rename, delete, and add some categories from the menu, submenu, and items within the submenus to try to ensure a simpler experience for finding and obtaining any type of product.
Entendendo o problema / Understanding the problem
Fluxo de compra / Purchase Flow
PT
Para melhor entender a dor dos usuários, simulei um fluxo de compra para observar quais seriam as dificuldades que poderiam ser encontradas durante esse processo e quais pontos positivos poderiam ser destacados.
Abaixo está o fluxo para o compra de um lápis para olhos na cor marrom.
Caso deseja ver o fluxo de compra com uma qualidade maior, basta clicar aqui.
EN
To better understand users' pain points, I simulated a purchase flow to observe what difficulties might be encountered during this process and what positive points could be highlighted.
Below is the flow for purchasing a brown eye pencil.
If you would like to see the purchase flow in higher quality, just click here.
Vamos aos testes / Let's get to the tests
PT
Após analisarmos o fluxo de compra do site, buscamos pessoas que tem o costume de comprar produtos do mesmo ramo da Boticário para realizar alguns testes, sendo eles, Card Sorting e Tree Testing.
O Card Sorting para entender melhor como aquela pessoa organizaria o menu da melhor forma de acordo com a percepção dela. O Tree Testing para determinar se os caminhos atuais para se encontrar um produto, estavam muito longos ou confusos.
Foram realizados um total de 6 testes de cada tipo, sendo 2 gravados em vídeo chamada e 4 não gravados. Esses testes foram cruciais para determinar a nova organização dos menus, submenus e categorias.
EN
After analyzing the website's purchase flow, we sought out people who regularly buy products from the same industry as O Boticário to conduct some tests, namely Card Sorting and Tree Testing.
Card Sorting was used to better understand how that person would best organize the menu according to their perception. Tree Testing was used to determine whether the current paths to finding a product were too long or confusing.
A total of 6 tests of each type were conducted, 2 of which were recorded on video call and 4 were not recorded. These tests were crucial in determining the new organization of menus, submenus, and categories.
Análise dos resultados / Analysis of results
PT
De acordo com os resultados, alguns itens faziam sentido e decidi por manter, em contrapartida, optei por excluir ou renomear outros para que o entendimento fosse mais unificado e simples.
EN
According to the results, some items made sense and I decided to keep them, while others I chose to delete or rename so that the understanding would be more unified and simple.
Sitegrama / Sitegram
PT
Com todos os resultados reunidos, foi feito um sitegrama para determinar o novo fluxo do site e do fluxo de compra. Para ver o sitegrama completo, basta clicar aqui.
EN
With all the results gathered, a sitegram was created to determine the new flow of the website and the purchase flow. To see the complete sitegram, just click here.
Wireframes
PT
Com o fluxo e o sitegrama pronto, começei a montar o wireframe para dar vida às minhas ideias, a fim de testar se tais conclusões fariam sentido. Por estar testando o organização do menu e o seu fluxo, os wireframes foram feitos em alta fidelidade pois não mudei o visual do site.
EN
With the flow and sitegram ready, I started to assemble the wireframe to bring my ideas to life, in order to test whether these conclusions would make sense. Since I was testing the menu organization and flow, the wireframes were made in high fidelity because I did not change the look of the site.
OBS: Este case foi realizado como um projeto durante a minha pós graduação em UX Design e Usabilidade no Instituto Infnet, junto com outros 5 alunos da pós graduação.
NOTE: This case was carried out as a project during my postgraduate studies in UX Design and Usability at Instituto Infnet, together with five other postgraduate students.
Outros projetos
O Boticário
PT - Case study para melhor a organização e distruição do menu e dos itens do e-commerce da Boticário. / EN - Case study to improve the organization and distribution of Boticário's menu and e-commerce items.
Cases Study
2 de nov. de 2024
Problema / Problem
PT
Este estudo de caso tem a proposta de fazer o redesign do menu do site da marca, focando na usabilidade e praticidade, melhorando o fluxo de compra e a navegação. Já que o mesmo tem muitos itens e categorias, o que dificulta a busca do usuário aos produtos.
EN
This case study proposes to redesign the brand's website menu, focusing on usability and practicality, improving the purchase flow and navigation. Since it has many items and categories, it makes it difficult for users to search for products.
Contexto do problema / Context of the problem
PT
Com a crescente demanda por produtos para cuidados do corpo, tais site como o da Boticário vem implementando cada vez mais seções, abas, menus, submenus, categorias e subcategorias em seus sites e aplicativos. Isso se torna um problema quando temos o mesmo produto para diferentes categorias, fazendo assim que a busca por algo simples se torne uma tarefa complexa e que requer uma certa curva de aprendizagem para explorar tantas opções nos menus oferecidos ao usuário.
Porém uma simplificação geral não é possível, visto que geraria mais confusão do que esclarecimento, pois existem produtos para funções específicas que não podem ser categorizados de forma geral.
EN
With the growing demand for body care products, websites such as Boticário's have been implementing more and more sections, tabs, menus, submenus, categories, and subcategories on their websites and apps. This becomes a problem when we have the same product in different categories, making the search for something simple a complex task that requires a certain learning curve to explore so many options in the menus offered to the user.
Proposta de solução / Proposed solution
PT
Reorganizar, renomear, excluir e adicionar algumas categorias do menu, do submenu e dos itens dentro dos submenus para tentar garantir uma experiência mais simples para achar e obter qualquer tipo de produto.
EN
Reorganize, rename, delete, and add some categories from the menu, submenu, and items within the submenus to try to ensure a simpler experience for finding and obtaining any type of product.
Entendendo o problema / Understanding the problem
Fluxo de compra / Purchase Flow
PT
Para melhor entender a dor dos usuários, simulei um fluxo de compra para observar quais seriam as dificuldades que poderiam ser encontradas durante esse processo e quais pontos positivos poderiam ser destacados.
Abaixo está o fluxo para o compra de um lápis para olhos na cor marrom.
Caso deseja ver o fluxo de compra com uma qualidade maior, basta clicar aqui.
EN
To better understand users' pain points, I simulated a purchase flow to observe what difficulties might be encountered during this process and what positive points could be highlighted.
Below is the flow for purchasing a brown eye pencil.
If you would like to see the purchase flow in higher quality, just click here.
Vamos aos testes / Let's get to the tests
PT
Após analisarmos o fluxo de compra do site, buscamos pessoas que tem o costume de comprar produtos do mesmo ramo da Boticário para realizar alguns testes, sendo eles, Card Sorting e Tree Testing.
O Card Sorting para entender melhor como aquela pessoa organizaria o menu da melhor forma de acordo com a percepção dela. O Tree Testing para determinar se os caminhos atuais para se encontrar um produto, estavam muito longos ou confusos.
Foram realizados um total de 6 testes de cada tipo, sendo 2 gravados em vídeo chamada e 4 não gravados. Esses testes foram cruciais para determinar a nova organização dos menus, submenus e categorias.
EN
After analyzing the website's purchase flow, we sought out people who regularly buy products from the same industry as O Boticário to conduct some tests, namely Card Sorting and Tree Testing.
Card Sorting was used to better understand how that person would best organize the menu according to their perception. Tree Testing was used to determine whether the current paths to finding a product were too long or confusing.
A total of 6 tests of each type were conducted, 2 of which were recorded on video call and 4 were not recorded. These tests were crucial in determining the new organization of menus, submenus, and categories.
Análise dos resultados / Analysis of results
PT
De acordo com os resultados, alguns itens faziam sentido e decidi por manter, em contrapartida, optei por excluir ou renomear outros para que o entendimento fosse mais unificado e simples.
EN
According to the results, some items made sense and I decided to keep them, while others I chose to delete or rename so that the understanding would be more unified and simple.
Sitegrama / Sitegram
PT
Com todos os resultados reunidos, foi feito um sitegrama para determinar o novo fluxo do site e do fluxo de compra. Para ver o sitegrama completo, basta clicar aqui.
EN
With all the results gathered, a sitegram was created to determine the new flow of the website and the purchase flow. To see the complete sitegram, just click here.
Wireframes
PT
Com o fluxo e o sitegrama pronto, começei a montar o wireframe para dar vida às minhas ideias, a fim de testar se tais conclusões fariam sentido. Por estar testando o organização do menu e o seu fluxo, os wireframes foram feitos em alta fidelidade pois não mudei o visual do site.
EN
With the flow and sitegram ready, I started to assemble the wireframe to bring my ideas to life, in order to test whether these conclusions would make sense. Since I was testing the menu organization and flow, the wireframes were made in high fidelity because I did not change the look of the site.
OBS: Este case foi realizado como um projeto durante a minha pós graduação em UX Design e Usabilidade no Instituto Infnet, junto com outros 5 alunos da pós graduação.
NOTE: This case was carried out as a project during my postgraduate studies in UX Design and Usability at Instituto Infnet, together with five other postgraduate students.
Outros projetos
O Boticário
PT - Case study para melhor a organização e distruição do menu e dos itens do e-commerce da Boticário. / EN - Case study to improve the organization and distribution of Boticário's menu and e-commerce items.
Cases Study
2 de nov. de 2024
Problema / Problem
PT
Este estudo de caso tem a proposta de fazer o redesign do menu do site da marca, focando na usabilidade e praticidade, melhorando o fluxo de compra e a navegação. Já que o mesmo tem muitos itens e categorias, o que dificulta a busca do usuário aos produtos.
EN
This case study proposes to redesign the brand's website menu, focusing on usability and practicality, improving the purchase flow and navigation. Since it has many items and categories, it makes it difficult for users to search for products.
Contexto do problema / Context of the problem
PT
Com a crescente demanda por produtos para cuidados do corpo, tais site como o da Boticário vem implementando cada vez mais seções, abas, menus, submenus, categorias e subcategorias em seus sites e aplicativos. Isso se torna um problema quando temos o mesmo produto para diferentes categorias, fazendo assim que a busca por algo simples se torne uma tarefa complexa e que requer uma certa curva de aprendizagem para explorar tantas opções nos menus oferecidos ao usuário.
Porém uma simplificação geral não é possível, visto que geraria mais confusão do que esclarecimento, pois existem produtos para funções específicas que não podem ser categorizados de forma geral.
EN
With the growing demand for body care products, websites such as Boticário's have been implementing more and more sections, tabs, menus, submenus, categories, and subcategories on their websites and apps. This becomes a problem when we have the same product in different categories, making the search for something simple a complex task that requires a certain learning curve to explore so many options in the menus offered to the user.
Proposta de solução / Proposed solution
PT
Reorganizar, renomear, excluir e adicionar algumas categorias do menu, do submenu e dos itens dentro dos submenus para tentar garantir uma experiência mais simples para achar e obter qualquer tipo de produto.
EN
Reorganize, rename, delete, and add some categories from the menu, submenu, and items within the submenus to try to ensure a simpler experience for finding and obtaining any type of product.
Entendendo o problema / Understanding the problem
Fluxo de compra / Purchase Flow
PT
Para melhor entender a dor dos usuários, simulei um fluxo de compra para observar quais seriam as dificuldades que poderiam ser encontradas durante esse processo e quais pontos positivos poderiam ser destacados.
Abaixo está o fluxo para o compra de um lápis para olhos na cor marrom.
Caso deseja ver o fluxo de compra com uma qualidade maior, basta clicar aqui.
EN
To better understand users' pain points, I simulated a purchase flow to observe what difficulties might be encountered during this process and what positive points could be highlighted.
Below is the flow for purchasing a brown eye pencil.
If you would like to see the purchase flow in higher quality, just click here.
Vamos aos testes / Let's get to the tests
PT
Após analisarmos o fluxo de compra do site, buscamos pessoas que tem o costume de comprar produtos do mesmo ramo da Boticário para realizar alguns testes, sendo eles, Card Sorting e Tree Testing.
O Card Sorting para entender melhor como aquela pessoa organizaria o menu da melhor forma de acordo com a percepção dela. O Tree Testing para determinar se os caminhos atuais para se encontrar um produto, estavam muito longos ou confusos.
Foram realizados um total de 6 testes de cada tipo, sendo 2 gravados em vídeo chamada e 4 não gravados. Esses testes foram cruciais para determinar a nova organização dos menus, submenus e categorias.
EN
After analyzing the website's purchase flow, we sought out people who regularly buy products from the same industry as O Boticário to conduct some tests, namely Card Sorting and Tree Testing.
Card Sorting was used to better understand how that person would best organize the menu according to their perception. Tree Testing was used to determine whether the current paths to finding a product were too long or confusing.
A total of 6 tests of each type were conducted, 2 of which were recorded on video call and 4 were not recorded. These tests were crucial in determining the new organization of menus, submenus, and categories.
Análise dos resultados / Analysis of results
PT
De acordo com os resultados, alguns itens faziam sentido e decidi por manter, em contrapartida, optei por excluir ou renomear outros para que o entendimento fosse mais unificado e simples.
EN
According to the results, some items made sense and I decided to keep them, while others I chose to delete or rename so that the understanding would be more unified and simple.
Sitegrama / Sitegram
PT
Com todos os resultados reunidos, foi feito um sitegrama para determinar o novo fluxo do site e do fluxo de compra. Para ver o sitegrama completo, basta clicar aqui.
EN
With all the results gathered, a sitegram was created to determine the new flow of the website and the purchase flow. To see the complete sitegram, just click here.
Wireframes
PT
Com o fluxo e o sitegrama pronto, começei a montar o wireframe para dar vida às minhas ideias, a fim de testar se tais conclusões fariam sentido. Por estar testando o organização do menu e o seu fluxo, os wireframes foram feitos em alta fidelidade pois não mudei o visual do site.
EN
With the flow and sitegram ready, I started to assemble the wireframe to bring my ideas to life, in order to test whether these conclusions would make sense. Since I was testing the menu organization and flow, the wireframes were made in high fidelity because I did not change the look of the site.
OBS: Este case foi realizado como um projeto durante a minha pós graduação em UX Design e Usabilidade no Instituto Infnet, junto com outros 5 alunos da pós graduação.
NOTE: This case was carried out as a project during my postgraduate studies in UX Design and Usability at Instituto Infnet, together with five other postgraduate students.