Estudo de Caso de UX/UI: Desenvolvimento de Site Responsivo para Encomendar Bolos

Desafio

No cenário digital contemporâneo, a adaptação a diferentes dispositivos é fundamental para garantir uma experiência de usuário consistente e satisfatória. Este estudo de caso se concentra no desenvolvimento de um site responsivo para encomendar bolos de uma padaria, onde a navegação fluída e eficiente em uma variedade de dispositivos é essencial. Desenvolver um site responsivo, garantindo que os usuários possam acessar e interagir com o conteúdo do site de forma fácil e intuitiva, independentemente do dispositivo que estão utilizando, seja ele um computador desktop, um tablet ou um smartphone. Embora o foco principal seja na adaptabilidade do site, também é fundamental considerar a importância da acessibilidade para garantir que todos os usuários possam desfrutar da experiência de navegação de forma inclusiva.

Problema

Atualmente, muitos sites enfrentam o desafio de não serem responsivos, o que resulta em uma experiência de usuário frustrante para os visitantes. A falta de adaptabilidade a diferentes dispositivos pode prejudicar significativamente a usabilidade e a acessibilidade de um site, levando a dificuldades de navegação e interação por parte dos usuários. Quando os sites não se ajustam automaticamente a diferentes tamanhos de tela, os usuários podem encontrar dificuldades para visualizar o conteúdo, clicar em botões ou preencher formulários, resultando em uma experiência fragmentada e insatisfatória. Isso não apenas frustra os usuários, mas também pode levar à perda de clientes em potencial e ao enfraquecimento da marca. Em um mundo onde a presença online é essencial para o sucesso de qualquer negócio, a falta de responsividade pode significar a diferença entre o sucesso e o fracasso de um site.

Objetivo

O principal objetivo deste projeto é desenvolver um site responsivo que ofereça uma experiência de usuário fluida e consistente em uma variedade de dispositivos. Através da implementação de design responsivo, garanti que os usuários possam acessar e interagir com o conteúdo do site de forma intuitiva, seja qual for o dispositivo que estão utilizando, seja um computador desktop, um tablet ou um smartphone. Além disso, o objetivo é proporcionar uma navegação simplificada e eficiente, permitindo que os usuários encontrem facilmente as informações de que precisam e realizem ações como navegar pelo menu, fazer pedidos e efetuar pagamentos de forma rápida e conveniente. Com isso, pretende-se não apenas atender às expectativas dos usuários, mas também maximizar a acessibilidade e a usabilidade do site, garantindo uma experiência de usuário positiva e satisfatória para todos os visitantes.

Pesquisa

Para compreender melhor o público-alvo e o cenário, foi realizada uma pesquisa abrangente. O objetivo era obter insights significativos sobre os hábitos, preferências e desafios enfrentados pelos consumidores ao encomendar bolos em padarias.

Entrevista

Além da pesquisa, foram realizadas entrevistas detalhadas com uma variedade de participantes. As entrevistas foram desenvolvidas para explorar as dores, expectativas e experiências dos consumidores ao encomendar bolos em padarias. Essas entrevistas proporcionaram uma compreensão mais profunda das motivações e necessidades dos usuários, auxiliando na identificação de áreas-chave para aprimoramento na proposta de design e serviço.

Análise das Pesquisas e Entrevistas

Após coletar os dados das pesquisas e realizar entrevistas, foi realizada uma análise detalhada dos resultados. Tal análise possibilitou identificar as principais tendências e desafios enfrentados pelos consumidores ao fazer encomendas pelo site de uma padaria. As informações obtidas foram fundamentais para orientar o desenvolvimento do projeto de design responsivo.

Aspectos Problemáticos

A análise dos dados revelou vários aspectos problemáticos que os consumidores enfrentam ao navegar e encomendar bolos em sites de padarias. Estes incluem:

· Navegação: Os usuários enfrentam dificuldades na navegação do site da padaria, devido à falta de uma experiência de usuário intuitiva e eficiente para encomendar bolos personalizados.

· Transparência: A falta de transparência sobre os ingredientes utilizados na fabricação dos bolos é uma preocupação para os usuários que valorizam a qualidade e a procedência dos ingredientes.

· Personalização: A dificuldade de encontrar padarias que ofereçam opções de personalização limita as escolhas dos usuários que desejam bolos únicos para ocasiões especiais.

Persona

Foram usados os dados dos resultados das pesquisas e das entrevistas para a criação da persona, que ajudou a entender melhor o usuário, aprofundando principalmente nas dores e necessidades. Foi criada uma persona para orientar o desenvolvimento do projeto.

História do Usuário

A história do usuário é uma ferramenta poderosa no design de experiência do usuário. Ao mergulhar na jornada de um usuário específico, podemos obter uma compreensão mais profunda de suas necessidades, desejos e experiências ao interagir com um produto ou serviço. Isso permite identificar áreas de oportunidade, pontos de dor e soluções eficazes que atendam de forma abrangente e centrada no usuário.

Como uma professora apaixonada por biologia e pela arte da confeitaria, quero descobrir uma padaria que ofereça uma variedade de opções de bolos personalizados para diferentes ocasiões e que valorize a qualidade dos ingredientes, para que eu possa transformar momentos especiais em doces lembranças para mim e meus entes queridos.

Jornada do Usuário

O mapeamento da jornada do usuário visa documentar todos os estágios que um usuário atravessa ao interagir com o produto ou serviço, permitindo uma compreensão detalhada de suas experiências, percepções e necessidades. Com essa ferramenta, podemos fazer uma suposição sobre as emoções, pensamentos e comportamentos do usuário, oferecendo insights valiosos para o desenvolvimento de soluções centradas no mesmo.

Mapa do Site

A dificuldade de navegação no site era o principal problema para os usuários, então usei esse conhecimento para criar um mapa do site. Meu objetivo aqui era tomar decisões estratégicas de arquitetura de informação que melhorariam a navegação geral do site. A estrutura que escolhi foi pensada para tornar as coisas simples e fáceis.

Relatório de Auditoria Competitiva

Após a definição do problema, foi elaborado um relatório de auditoria competitiva visando examinar as soluções existentes no mercado e identificar oportunidades de inovação. Esta análise envolveu a pesquisa dos principais concorrentes, destacando suas estratégias e pontos fortes, conforme apresentado abaixo:

1: The Bakers

The Bakers, como concorrente direto, se destaca no mercado de encomendas online de bolos, pães e doces, oferecendo uma ampla variedade de produtos artesanais através de seu site responsivo. Posicionando-se como uma referência em delícias nova-iorquinas, The Bakers proporciona uma experiência de compra completa e conveniente, permitindo aos clientes explorarem seu catálogo diversificado, agendarem entregas e escolherem entre várias opções de pagamento. No entanto, a empresa enfrenta desafios relacionados a atrasos na entrega, o que pode afetar a satisfação do cliente e a reputação da marca.

2: Lecadô

Lecadô, como concorrente indireto, se destaca no mercado de confeitaria, oferecendo uma seleção exclusiva de bolos, doces e salgados através de seu site de encomendas. Posicionando-se como uma referência confiável em delícias artesanais brasileiras, Lecadô proporciona praticidade aos clientes, permitindo que façam seus pedidos de forma fácil e rápida, com opções de pagamento diversificadas. No entanto, a empresa enfrenta desafios relacionados à inconsistência na entrega, incluindo erros nos pedidos e atrasos, o que pode prejudicar a experiência do cliente e a fidelidade à marca.

3: Fornalha

Fornalha, como concorrente indireto, se destaca no mercado de confeitaria, oferecendo uma variedade de bolos, doces e salgados, embora enfrente desafios técnicos em seu site. Apesar dos problemas atuais de funcionamento do site, Fornalha oferece uma alternativa através de um aplicativo de mensagens (WhatsApp) e também está disponível na plataforma de entrega do Rappi, permitindo que os clientes explorem seu cardápio e façam pedidos de forma conveniente. No entanto, a falta de transparência no processo de encomenda e a ausência de uma plataforma online funcional podem impactar negativamente a experiência do cliente e a competitividade da empresa no mercado de entregas de confeitaria.

Wireframe de Papel

Desenhar os esboços das telas do site responsivo em papel assegurou que os componentes incorporados nos wireframes digitais sejam eficazes na resolução dos desafios enfrentados pelos usuários. O site da padaria precisa oferecer uma experiência fácil e acessível para que os usuários possam encomendar bolos no site com facilidade.

Variações de Tamanho de Tela de Wireframe de Papel

As variações de tamanho de tela desempenham um papel crucial na criação de experiências digitais responsivas e eficazes. Ao iniciar o processo de design, concentrei-me em esboçar as telas em papel, garantindo que os componentes fossem capazes de resolver os desafios enfrentados pelos usuários. À medida que avançava, comecei a trabalhar em designs para tamanhos de tela adicionais, assegurando que o site da padaria oferecesse uma experiência perfeita e acessível em todas as plataformas.

Wireframe de Baixa Fidelidade

É a estrutura fundamental do aplicativo, que permite a organização de elementos para satisfazer as demandas do usuário. Este instrumento auxilia na detecção e ordenação dos elementos da interface, permitindo a realização de testes de forma ágil. No início, foram desenvolvidos wireframes básicos para desktop e mobile, que posteriormente evoluíram para versões com inclusão de textos.

Guia de Estilo

É um recurso indispensável para designers e desenvolvedores na elaboração de interfaces digitais unificadas e padronizadas. Este guia engloba uma gama de elementos gráficos, tais como tipografia, paleta de cores, ícones, botões, inputs e outros componentes, que são empregados para definir a identidade visual e a experiência do usuário de um produto. Esses elementos não só asseguram um visual agradável, mas também simplificam a compreensão e a interação do usuário com a interface, proporcionando uma experiência de uso intuitiva e gratificante.

Considerações de Acessibilidade

A acessibilidade é um elemento crucial em todos os projetos de design, particularmente quando o objetivo é desenvolver um site responsivo. A inclusão digital é vital para assegurar que todos os usuários, sejam quais forem suas capacidades, possam usar o site de maneira eficiente e sem obstáculos. Com isso em mente, o design do site integrou várias práticas e funcionalidades para torná-lo acessível a uma ampla variedade de usuários.

· Design Clean e Intuitivo: No âmbito da acessibilidade, é crucial priorizar escolhas de design clean e intuitivas no site de encomenda de bolos. Ao optar por uma abordagem que facilite a navegação e compreensão, assim garantindo que todos os usuários, não importando de suas habilidades ou limitações, possam desfrutar de uma experiência de uso fluida. A acessibilidade não deve ser uma funcionalidade adicional, mas sim uma consideração fundamental desde o estágio inicial de desenvolvimento do projeto.

· Simplicidade e Inclusão: Simplificar é essencial para promover a acessibilidade no projeto de site de padaria. Ao criar interfaces e experiências digitais descomplicadas, estamos não apenas tornando a navegação mais fácil, mas também estabelecendo um ambiente inclusivo onde a tecnologia é acessível a todos. A simplicidade não apenas beneficia usuários com deficiências, mas também melhora a experiência para todos os usuários, garantindo que o site seja acolhedor e eficiente para todos os públicos.

Protótipo de Alta Fidelidade

O protótipo de alta definição demonstra o processo do usuário para fazer uma encomenda de bolo na padaria através do site. O usuário deve acessar o site, escolher o bolo que pretende comprar e finalizar o pedido e o pagamento. O protótipo foi inteiramente criado no Figma e está dimensionado no desktop com a medida padrão de 1920 pixels de largura e no mobile para o iPhone 14 Pro. Seguem alguns exemplos de telas:

Para testar o protótipo de alta fidelidade do projeto em desktop, clique aqui.

Para testar o protótipo de alta fidelidade do projeto em mobile, clique aqui.

Conclusão

O desenvolvimento do site responsivo para encomendar bolos de uma padaria foi uma experiência enriquecedora e cheia de aprendizados no campo do UX Design. Durante este estudo de caso, mergulhei profundamente nas necessidades dos usuários, entendendo a importância crucial da acessibilidade e inclusão na criação de soluções digitais. Compreendi que o design de sites não é apenas sobre estética visual, mas sobre a capacidade de facilitar a vida das pessoas, proporcionando experiências fluidas e acessíveis para todos os usuários, independentemente de suas habilidades ou limitações. Este projeto me permitiu aplicar os conceitos e técnicas aprendidos, mas também me incentivou a continuar explorando e aprimorando minhas habilidades nesta área em constante evolução.

Este estudo de caso faz parte do renomado Curso Profissional Google UX Design, oferecido pelo Google Career Certificates no programa Grow with Google. Estou profundamente grata por ter tido a oportunidade de adquirir um conhecimento tão precioso e esclarecedor, que me permitiu resolver um problema desde a sua concepção até a sua implementação prática, proporcionando uma experiência abrangente em cada etapa do processo criativo. Estou animada para aplicar os conhecimentos que adquiri e fazer contribuições significativas para a criação de experiências digitais cada vez mais inclusivas e de grande impacto.

Para saber mais sobre mim:

LinkedIn: www.linkedin.com/in/daniellescdantas

Portfólio: www.danielledantas.com

Obrigada pela atenção!