![](https://framerusercontent.com/images/lALyI3l4gRKoQq9L4yzgPL5f050.png)
![](https://framerusercontent.com/images/lALyI3l4gRKoQq9L4yzgPL5f050.png)
![](https://framerusercontent.com/images/oW6tPrhUEzzXLwlMmvaApjMAVM.png)
![](https://framerusercontent.com/images/oW6tPrhUEzzXLwlMmvaApjMAVM.png)
![](https://framerusercontent.com/images/e7gXPoqA48ksNIXAA6PmVQvxdk.png)
![](https://framerusercontent.com/images/e7gXPoqA48ksNIXAA6PmVQvxdk.png)
![](https://framerusercontent.com/images/kwAT7Y0QaSh86PRKxFh8ceMgvs.png)
![](https://framerusercontent.com/images/kwAT7Y0QaSh86PRKxFh8ceMgvs.png)
Trabalho
Currículo
![](https://framerusercontent.com/images/cADiNCfu6QytbyvGZZwP0M0qqI.png)
![](https://framerusercontent.com/images/zyvqtME0a5HCy3R4UXhn8e3lhs.png)
![](https://framerusercontent.com/images/fFepM7VP7kwVlpgtkbN1b18VwI.png)
![](https://framerusercontent.com/images/wBeIqGPlrRq7KQv7FwHJqJffeE.png)
Aprendizados
Esse foi o primeiro case real que eu desenvolvi, nas devidas proporções tentei aplicar o conhecimento que adquiri
e me sinto orgulhosa de ter chegado a um resultado que agradou o cliente.
Em todos os momentos que tive dúvidas sobre o projeto, revisei o processo de design escolhido para para prosseguir.
Criar o design foi uma tarefa desafiadora, refinar os wireframes e manter a consistência na interface, com o objetivo de facilitar a navegação e tornar a experiência do usuário satisfatória foram meus principais objetivos ao projetar essa interface.
![](https://framerusercontent.com/images/tq9lLS3tGz25m2AiCqyQecQ3LwU.png)
![](https://framerusercontent.com/images/LomOKIRXXOX1fR0kKqfKg4u21Q.png)
![](https://framerusercontent.com/images/IwEYWgd5cHTFQwurGAkIfi2cVdc.png)
Fase 4 - Entrega
Essa é a fase onde o que foi descoberto, pesquisado, prototipado e testado é trazido para a realidade.
Após realizar a documentação do projeto a entrega foi realizada para o desenvolvedor e em breve estará disponível para realização dos testes finais e entrega.
![](https://framerusercontent.com/images/pSDlcNJgZeTUYBsVP2Fo0uT2dTc.png)
![](https://framerusercontent.com/images/uDe2hshq5KYMXUVLmubQWZYFt9w.png)
![](https://framerusercontent.com/images/ZDYUx9H7NrbjMDV5vUSzeAfwj8k.png)
![](https://framerusercontent.com/images/QrQmerTdxAm351VRl5GTblQq1F8.png)
Fase 3 - Desenvolvimento
Considerando que um produto digital nunca está acabado e a todo momento surgem novos insights, essa foi a fase de exploração e priorização, onde reuni as possíveis soluções para o problema e desenvolvi o produto.
Fase 2 - Definição
Validação dos dados encontrados, agrupamento de similaridades e revisão do problema. O intuito nesse momento era verificar se o problema inicial ainda era um problema, se havia mais problemas ou problemas diferentes.
Com a declaração do problema revisada, foi possível começar a projetar os entregáveis.
![](https://framerusercontent.com/images/dzgEAgJGeGPEDLO6kPERFIc35g.jpg)
![](https://framerusercontent.com/images/blscorFJzQZqS5m62tDIS4yC4ZE.png)
![](https://framerusercontent.com/images/oXFlCxHTTRzEl4UbA7S9SRsM.png)
![](https://framerusercontent.com/images/nI5VuMGaXOc2dfkzVjRIkZJaN8.png)
![](https://framerusercontent.com/images/oLWJDOwgnNHjuwmx6O5BYM8om8.png)
![](https://framerusercontent.com/images/2RxdgLUlxKWqsVcOe3HeSMjWo.png)
![](https://framerusercontent.com/images/HSyFsry7vGRXy7H8FS2buQzEL0.png)
Fase 1 - Descoberta
Nesse momento do processo, com o problema já definido, reuni o máximo de ideias e insights.
Iniciei realizando o briefing completo com o cliente, desk research, definição e análise de usuários e competidores e canvas de negócios.
Objetivos
• Gerar confiança e desejo nos clientes.
• Aumentar o número de vendas através dos links de compra disponibilizados (conversão).
• Concentrar todas as informações em um único lugar, com o objetivo de fazer o usuário tomar a decisão de compra.
• Diferenciar o serviço dos concorrentes.
• Ser a referência quando clientes quiserem buscar pelo link de compra de algum dos produtos analisados.
Fase 0 - Problema
Criar um website centralizador e organizador de todas as plataformas em que a empresa atua, funcionando como um guia dos conteúdos e, principalmente, fazendo o redirecionamento confiável para compra de produtos.
Sem problema ou hipótese definida, não é possível definir um objetivo!
Pré briefing
Reunião inicial com o cliente para identificar necessidades e expectativas em relação ao projeto.
Coleta de inspirações
Busca de inspirações para desenvolvimento da parte visual do projeto.
Protótipo
Visualização fiel do website e seu funcionamento.
Wireframes
Momento de rabiscar no papel a estrutura do site, organização das páginas e conteúdos.
UI Design
Refinamento dos wireframes, escolha de tipografia e cores.
Criação e organização no Figma
Criação do arquivo, pages e wireframes no Figma.
Handoff
Preparação dos arquivos e componentes para desenvolvimento.
Pesquisa
Briefing completo, pesquisa e documentação, definição, análise de usuários e concorrentes.
Conteúdo
Desenvolvimento do conteúdo criado, validação junto ao cliente, sitemap.
Problema → Descobrir → Definir → Desenvolver → Entregar → Solução
![](https://framerusercontent.com/images/HryGZ79AcRhReP7ewVVhmcbrejU.png)
Processo
Escolhi o Double Diamond como processo de design a ser utilizado no desenvolvimento desse projeto, mapeando os estágios divergentes e convergentes representados pelos diamantes.
ÁREA
UX e UI Design
Papel e lápis
Forms
Figma
FERRAMENTAS
2023
ANO
O objetivo deste projeto foi desenvolver um website que atua como um centralizador e organizador de todas as plataformas em que a empresa está presente.
O website funciona como um guia completo dos conteúdos, oferecendo aos usuários informações abrangentes sobre os produtos e serviços oferecidos. Além de fornecer redirecionamento confiável para facilitar a compra dos produtos, direcionando os visitantes para as plataformas adequadas de forma segura e eficiente.
O Cirne Stuff é um canal no YouTube, com representação em outras plataformas, focado em games e tecnologia.
Website Cirne Stuff
Processo
Escolhi o Double Diamond como processo de design a ser utilizado no desenvolvimento desse projeto, mapeando os estágios divergentes e convergentes representados pelos diamantes.
![](https://framerusercontent.com/images/nI35IPpEWfryg83vVZkiBLtG58.png)
Problema → Descobrir → Definir → Desenvolver → Entregar → Solução
O Cirne Stuff é um canal no YouTube, com representação em outras plataformas, focado em games e tecnologia.
O objetivo deste projeto foi desenvolver um website que atua como um centralizador e organizador de todas as plataformas em que a empresa está presente. O website funciona como um guia completo dos conteúdos, oferecendo aos usuários informações abrangentes sobre os produtos e serviços oferecidos. Além de fornecer redirecionamento confiável para facilitar a compra dos produtos, direcionando os visitantes para as plataformas adequadas de forma segura e eficiente.
Aprendizados
Aprendizados
Esse foi o primeiro case real que eu desenvolvi, nas devidas proporções tentei aplicar o conhecimento que adquiri
e me sinto orgulhosa de ter chegado ao resultado atual.
Em todos os momentos que tive dúvidas sobre o projeto, revisei o processo de design escolhido para prosseguir.
Criar o design foi uma tarefa desafiadora, refinar os wireframes e manter a consistência na interface, com o objetivo de facilitar a navegação e tornar a experiência do usuário satisfatória foram meus principais objetivos ao projetar essa interface.
Esse foi o primeiro case real que eu desenvolvi, nas devidas proporções tentei aplicar o conhecimento que adquiri
e me sinto orgulhosa de ter chegado ao resultado atual.
Em todos os momentos que tive dúvidas sobre o projeto, revisei o processo de design escolhido para prosseguir.
Criar o design foi uma tarefa desafiadora, refinar os wireframes e manter a consistência na interface, com o objetivo de facilitar a navegação e tornar a experiência do usuário satisfatória foram meus principais objetivos ao projetar essa interface.
![](https://framerusercontent.com/images/sJgZxCVSqS4EL6HxDgvt99Vl3A.png)
![](https://framerusercontent.com/images/sJgZxCVSqS4EL6HxDgvt99Vl3A.png)
![](https://framerusercontent.com/images/3x4HhJpwteTgXL43LO0ErKAh1og.png)
![](https://framerusercontent.com/images/3x4HhJpwteTgXL43LO0ErKAh1og.png)
![](https://framerusercontent.com/images/ULiyXNTYTZxoNjaZ6xngMqH0i9A.png)
![](https://framerusercontent.com/images/ULiyXNTYTZxoNjaZ6xngMqH0i9A.png)
![](https://framerusercontent.com/images/f8QlZdEZyJh8ojSr0ZLWixuE8Y.png)
![](https://framerusercontent.com/images/f8QlZdEZyJh8ojSr0ZLWixuE8Y.png)
![](https://framerusercontent.com/images/lALyI3l4gRKoQq9L4yzgPL5f050.png)
![](https://framerusercontent.com/images/lALyI3l4gRKoQq9L4yzgPL5f050.png)
![](https://framerusercontent.com/images/fFCtdrqNr6UiHLHOvYest1MZF4c.png)
![](https://framerusercontent.com/images/fFCtdrqNr6UiHLHOvYest1MZF4c.png)
![](https://framerusercontent.com/images/e7gXPoqA48ksNIXAA6PmVQvxdk.png)
![](https://framerusercontent.com/images/e7gXPoqA48ksNIXAA6PmVQvxdk.png)
![](https://framerusercontent.com/images/H803lynfMkwMQBPrroQdd4HzdY.png)
![](https://framerusercontent.com/images/y8fyZG2sdHY0Bv1dk6E6wM2Y7YQ.png)
![](https://framerusercontent.com/images/PwAFTQlSA54aGJix5ZNG7wWX6M.png)
![](https://framerusercontent.com/images/5fsCUIqUe3H1ZpK6gt6yS8hBCWs.png)
![](https://framerusercontent.com/images/H803lynfMkwMQBPrroQdd4HzdY.png)
![](https://framerusercontent.com/images/y8fyZG2sdHY0Bv1dk6E6wM2Y7YQ.png)
![](https://framerusercontent.com/images/PwAFTQlSA54aGJix5ZNG7wWX6M.png)
![](https://framerusercontent.com/images/5fsCUIqUe3H1ZpK6gt6yS8hBCWs.png)
![](https://framerusercontent.com/images/omzh93JroOKZPzDd3mCwxDnjxYk.png)
![](https://framerusercontent.com/images/omzh93JroOKZPzDd3mCwxDnjxYk.png)
![](https://framerusercontent.com/images/aqmEq5e9wa60wqdqL0hultis.png)
![](https://framerusercontent.com/images/aqmEq5e9wa60wqdqL0hultis.png)
![](https://framerusercontent.com/images/LxZj8e3HwtSKdFMiqJjmRDhjQ.png)
![](https://framerusercontent.com/images/LxZj8e3HwtSKdFMiqJjmRDhjQ.png)
![](https://framerusercontent.com/images/MJ8XeUPp6sD1msHImkYc6vNaGY0.png)
![](https://framerusercontent.com/images/MJ8XeUPp6sD1msHImkYc6vNaGY0.png)
Fase 3 - Desenvolvimento
Fase 3 - Desenvolvimento
Considerando que um produto digital nunca está acabado e a todo momento surgem novos insights, essa foi a fase de exploração e priorização, onde reuni as possíveis soluções para o problema e desenvolvi o produto.
Fase 2 - Definição
Fase 2 - Definição
Validação dos dados encontrados, agrupamento de similaridades e revisão do problema. O intuito nesse momento era verificar se o problema inicial ainda era um problema, se havia mais problemas ou problemas diferentes.
Com a declaração do problema revisada, foi possível começar a projetar os entregáveis.
Validação dos dados encontrados, agrupamento de similaridades e revisão do problema. O intuito nesse momento era verificar se o problema inicial ainda era um problema, se havia mais problemas ou problemas diferentes.
Com a declaração do problema revisada, foi possível começar a projetar os entregáveis.
![](https://framerusercontent.com/images/dzgEAgJGeGPEDLO6kPERFIc35g.jpg)
![](https://framerusercontent.com/images/dzgEAgJGeGPEDLO6kPERFIc35g.jpg)
![](https://framerusercontent.com/images/oLWJDOwgnNHjuwmx6O5BYM8om8.png)
![](https://framerusercontent.com/images/oLWJDOwgnNHjuwmx6O5BYM8om8.png)
![](https://framerusercontent.com/images/nI5VuMGaXOc2dfkzVjRIkZJaN8.png)
![](https://framerusercontent.com/images/nI5VuMGaXOc2dfkzVjRIkZJaN8.png)
![](https://framerusercontent.com/images/oXFlCxHTTRzEl4UbA7S9SRsM.png)
![](https://framerusercontent.com/images/oXFlCxHTTRzEl4UbA7S9SRsM.png)
![](https://framerusercontent.com/images/HSyFsry7vGRXy7H8FS2buQzEL0.png)
![](https://framerusercontent.com/images/HSyFsry7vGRXy7H8FS2buQzEL0.png)
![](https://framerusercontent.com/images/blscorFJzQZqS5m62tDIS4yC4ZE.png)
![](https://framerusercontent.com/images/blscorFJzQZqS5m62tDIS4yC4ZE.png)
![](https://framerusercontent.com/images/2RxdgLUlxKWqsVcOe3HeSMjWo.png)
![](https://framerusercontent.com/images/2RxdgLUlxKWqsVcOe3HeSMjWo.png)
Fase 1 - Descoberta
Nesse momento do processo, com o problema já definido, reuni o máximo de ideias e insights.
Iniciei realizando o briefing completo com o cliente, desk research, definição e análise de usuários e competidores e canvas de negócios.
Processo
Escolhi o Double Diamond como processo de design a ser utilizado no desenvolvimento desse projeto, mapeando os estágios divergentes e convergentes representados pelos diamantes.
![](https://framerusercontent.com/images/nI35IPpEWfryg83vVZkiBLtG58.png)
Problema → Descobrir → Definir → Desenvolver → Entregar → Solução
Fluxo de Trabalho
Com o processo de design já definido, desenvolvi um fluxo de trabalho, de modo a direcionar e organizar minhas ações.
Fluxo de Trabalho
Com o processo de design já definido, desenvolvi um fluxo de trabalho, de modo a direcionar e organizar minhas ações.
Pré briefing
Reunião inicial com o cliente para identificar necessidades e expectativas em relação ao projeto.
Coleta de inspirações
Busca de inspirações para desenvolvimento da parte visual do projeto.
Protótipo
Visualização fiel do website e seu funcionamento.
Wireframes
Momento de rabiscar no papel a estrutura do site, organização das páginas e conteúdos.
UI Design
Refinamento dos wireframes, escolha de tipografia e cores.
Criação e organização no Figma
Criação do arquivo, pages e wireframes no Figma.
Handoff
Preparação dos arquivos e componentes para desenvolvimento.
Pesquisa
Briefing completo, pesquisa e documentação, definição, análise de usuários e concorrentes.
Conteúdo
Desenvolvimento do conteúdo criado, validação junto ao cliente, sitemap.
Fase 0 - Problema
Fase 0 - Problema
Criar um website centralizador e organizador de todas as plataformas em que a empresa atua, funcionando como um guia dos conteúdos e, principalmente, fazendo o redirecionamento confiável para compra de produtos.
Criar um website centralizador e organizador de todas as plataformas em que a empresa atua, funcionando como um guia dos conteúdos e, principalmente, fazendo o redirecionamento confiável para compra de produtos.
Sem problema ou hipótese definida, não é possível definir um objetivo!
Sem problema ou hipótese definida, não é possível definir um objetivo!
Objetivos
Gerar confiança e desejo nos clientes.
Aumentar o número de vendas através dos links de compra disponibilizados (conversão).
Concentrar todas as informações em um único lugar, com o objetivo de fazer o usuário tomar a decisão de compra.
Diferenciar o serviço dos concorrentes.
Ser a referência quando clientes quiserem buscar pelo link de compra de algum dos produtos analisados.
Gerar confiança e desejo nos clientes.
Aumentar o número de vendas através dos links de compra disponibilizados (conversão).
Concentrar todas as informações em um único lugar, com o objetivo de fazer o usuário tomar a decisão de compra.
Diferenciar o serviço dos concorrentes.
Ser a referência quando clientes quiserem buscar pelo link de compra de algum dos produtos analisados.
![](https://framerusercontent.com/images/R80uDB09TWupvLq6XhnpcRjTuM.png)
![](https://framerusercontent.com/images/R80uDB09TWupvLq6XhnpcRjTuM.png)
![](https://framerusercontent.com/images/H62IBUq1TGIuGnccnqD6i5vWjt8.png)
![](https://framerusercontent.com/images/H62IBUq1TGIuGnccnqD6i5vWjt8.png)
![](https://framerusercontent.com/images/iNnLxki22IDbQThEPI0zhrIMB4.png)
![](https://framerusercontent.com/images/iNnLxki22IDbQThEPI0zhrIMB4.png)
![](https://framerusercontent.com/images/RVEUDDbroV6O2Dr3cDf1AgexJrI.png)
![](https://framerusercontent.com/images/RVEUDDbroV6O2Dr3cDf1AgexJrI.png)
![](https://framerusercontent.com/images/wA1ktTLla28CgJhSbfs5gbRRoQ.png)
![](https://framerusercontent.com/images/wA1ktTLla28CgJhSbfs5gbRRoQ.png)
![](https://framerusercontent.com/images/Dq4OqGDq9lty6R6irOWtuIeNs.png)
![](https://framerusercontent.com/images/Dq4OqGDq9lty6R6irOWtuIeNs.png)
Website Cirne Stuff
ÁREA
UX e UI Design
Papel e lápis
Forms
Miro
Figma
FERRAMENTAS
2023
ANO
O Cirne Stuff é um canal no YouTube, com representação em outras plataformas, focado em games e tecnologia.
O objetivo deste projeto foi desenvolver um website que atua como um centralizador e organizador de todas as plataformas em que a empresa está presente. O website funciona como um guia completo dos conteúdos, oferecendo aos usuários informações abrangentes sobre os produtos e serviços oferecidos. Além de fornecer redirecionamento confiável para facilitar a compra dos produtos, direcionando os visitantes para as plataformas adequadas de forma segura e eficiente.
Fase 4 - Entrega
Essa é a fase onde o que foi descoberto, pesquisado, prototipado e testado é trazido para a realidade.
Após realizar a documentação do projeto a entrega foi realizada para o desenvolvedor e em breve estará disponível para realização dos testes finais e publicação.
Fase 4 - Entrega
Essa é a fase onde o que foi descoberto, pesquisado, prototipado e testado é trazido para a realidade.
Após realizar a documentação do projeto a entrega foi realizada para o desenvolvedor e em breve estará disponível para realização dos testes finais e publicação.
![](https://framerusercontent.com/images/R80uDB09TWupvLq6XhnpcRjTuM.png)
![](https://framerusercontent.com/images/H62IBUq1TGIuGnccnqD6i5vWjt8.png)
![](https://framerusercontent.com/images/iNnLxki22IDbQThEPI0zhrIMB4.png)
![](https://framerusercontent.com/images/RVEUDDbroV6O2Dr3cDf1AgexJrI.png)
![](https://framerusercontent.com/images/Dq4OqGDq9lty6R6irOWtuIeNs.png)
![](https://framerusercontent.com/images/wA1ktTLla28CgJhSbfs5gbRRoQ.png)