O objetivo e as pessoas
Objetivos de negócio, as pessoas que usam o produto e as tarefas que precisam realizar. Juntos, definimos as prioridades e o escopo da próxima versão.
Resultado: um briefing do produto, prioridades e hipóteses.
ServiçosDesign de produto
Design de produto
Um trabalho que começa antes das telas: o objetivo, o público, o modelo do produto, os principais cenários e a interface principal. SKARR.PRO acrescenta hipóteses testadas e modelos alternativos de produto.
Antes das telas.
O próprio produto.
Você pode estar começando com uma ideia, aprimorando um produto existente ou desenvolvendo um novo recurso. Transformamos esse ponto de partida em um modelo de produto, uma interface principal e, quando acordado, código funcional.
De uma questão em aberto
a um produto funcional.
Estratégia de produto, design de interface e desenvolvimento permanecem conectados. As decisões que tomamos juntos chegam até o software usado pelas pessoas.
Definimos o escopo no início, revisamos juntos as principais decisões e reavaliamos as premissas quando o trabalho revela algo novo.
Se o produto já está definido e precisa de telas, fluxos e estados, conheça Design UX/UI.
O que definimos
com você.
Cada etapa transforma uma questão em aberto em uma decisão sobre a qual podemos avançar.
O modelo do produto e os principais cenários
O que é o produto, como cria valor e quais jornadas são mais importantes. Organizamos as informações de que as pessoas precisam em cada etapa e as decisões que tomam ao longo do caminho.
Resultado: jornadas do usuário e a base estrutural do produto.
A interface principal
As telas em que o produto entrega seu valor: seu caráter visual, sua hierarquia e os estados relacionados a cada ação. No SKARR.PRO, hipóteses e modelos alternativos são testados em protótipos antes de tomarmos uma decisão.
Resultado: a interface principal, definida em telas reais.
O sistema ao redor
Componentes, tipografia e comportamentos que funcionam em conjunto em todo o produto. SKARR cobre a parte principal; SKARR.PRO amplia o sistema para dar suporte a recursos futuros.
Resultado: um sistema de design na escala necessária para o produto.
Do design ao código, quando acordado
A parte principal pode ser desenvolvida diretamente em React: como um protótipo interativo para testar cenários ou como uma interface funcional com o comportamento acordado. O Figma não é uma etapa intermediária obrigatória.
Resultado: um protótipo interativo em React ou uma interface funcional em React, conforme o escopo acordado.
Uma visão mais ampla.
Um próximo passo mais claro.
Uma tarefa rápida no celular e um espaço de trabalho para uma equipe exigem maneiras diferentes de organizar as informações.
Aplicativo de saúde.
Status, detalhes e ações em uma única estrutura.
Em aplicativos web e painéis, reunimos status, detalhes e ações em uma estrutura clara. A equipe vê o que precisa de atenção, acessa o contexto e dá continuidade ao trabalho.
Um conceito visual com dados de exemplo para um produto em desenvolvimento. O aplicativo bancário acima mostra a mesma abordagem em uma tela pequena.
Veja como o trabalho se desenvolveUma estrutura de produto.
Uma base para construir.
Você recebe um modelo de produto claro, os principais cenários e a interface principal: em arquivos de design ou, quando acordado, como um protótipo interativo em React ou uma interface funcional em React.
As próximas iterações, um sistema de design mais amplo e o desenvolvimento de recursos adicionais são acordados como próxima etapa.
Como o trabalho
se desenvolve.
Quatro etapas, cada uma encerrada com uma decisão sobre a qual podemos avançar.
01
Análises e pesquisa
Analisamos o negócio, as pessoas e o contexto de uso: análises de negócio e de produto, pesquisa com usuários, análise comparativa da concorrência e auditorias do produto, escolhidas de acordo com as questões mais importantes. O resultado é um briefing do produto, prioridades e hipóteses.
02
Estrutura e prototipagem
Arquitetura da informação, navegação, hierarquia do conteúdo e fluxos de usuário. Os protótipos nos permitem analisar os principais cenários e a lógica das interações importantes antes do design detalhado. No SKARR.PRO, modelos alternativos de produto são prototipados e comparados.
03
Conceito visual e interface principal
Exploramos como o produto deve parecer, transmitir sua experiência e se comportar; apresentamos a direção em telas representativas e desenvolvemos a interface principal com conteúdo realista, tamanhos de tela e os estados relacionados a cada ação.
04
Desenvolvimento, testes e entrega
Quando o desenvolvimento é acordado, implementamos o escopo em React, testamos as principais jornadas e estados e revisamos o desenvolvimento em relação ao design. Você recebe os arquivos acordados, o código-fonte e as instruções de configuração.
Escolha a profundidade
de que seu produto precisa.
As duas opções cobrem trabalho de produto mensal. A tabela mostra o que cada nível inclui.
| Item |
SKARR
Telas com design sob medida. Uma linguagem visual própria.
$7,000 / mês
por mês de trabalho
Contratar SKARR
Pagamento seguro pelo Stripe |
SKARR.PRO
Mais profundidade e atenção aos detalhes em toda a experiência, em cada ponto de contato.
$12,000 / mês
por mês de trabalho
Contratar SKARR.PRO
Pagamento seguro pelo Stripe |
|---|---|---|
| Em que trabalhamos | ||
| Ponto de partida | Ponto de partida Um produto com direção clara. Definimos juntos o objetivo, o público e o escopo da próxima versão. | Ponto de partida Um produto cujo modelo ainda está em aberto. Analisamos várias direções antes de escolher uma. |
| Modelo e cenários do produto | Modelo e cenários do produto Um modelo de produto e os principais cenários necessários. | Modelo e cenários do produto Modelos alternativos de produto comparados, com os principais cenários desenvolvidos para o modelo escolhido. |
| A interface principal | A interface principal As telas principais, projetadas com hierarquia, estados e caráter visual definidos. | A interface principal As telas principais, com hipóteses testadas em protótipos antes do design detalhado. |
| Profundidade do trabalho | ||
| Pesquisa | Pesquisa Análises de negócio e de produto, pesquisa com usuários e auditoria do produto, escolhidas de acordo com as questões mais importantes. | Pesquisa As mesmas pesquisas, com análise comparativa da concorrência e estudos adicionais quando necessário para responder a questões em aberto. |
| Sistema de design | Sistema de design Componentes, tipografia e comportamentos para a interface principal. | Sistema de design Um sistema ampliado, preparado para dar suporte a recursos futuros. |
| Iterações | Iterações Principais decisões revisadas em conjunto em cada etapa. | Iterações Mais iterações no modelo, nos cenários e nos detalhes da interface. |
| Trabalho em conjunto | ||
| Trabalho mensal | Trabalho mensal Trabalho de produto durante o mês. O escopo e os resultados esperados são acordados antes do início. | Trabalho mensal Trabalho de produto durante o mês no nível selecionado. O escopo e os resultados esperados são acordados antes do início. |
| Design em código | Design em código A parte principal em arquivos de design ou, quando acordado, como protótipo interativo em React. | Design em código A parte principal em arquivos de design, como protótipo interativo em React ou como interface funcional em React, conforme acordado. |
| O que você recebe | O que você recebe O briefing do produto, as jornadas do usuário, a interface principal e os materiais de entrega acordados. | O que você recebe O mesmo, com as hipóteses testadas, os modelos comparados e o sistema ampliado. |
Antes
de começarmos.
Precisamos de arquivos do Figma ou o produto pode ser projetado em código?
As duas opções são possíveis. A parte principal pode ser projetada no Figma ou diretamente em React, como protótipo interativo. Definimos o formato no início, de acordo com a maneira como sua equipe vai revisar e dar continuidade ao trabalho.
Qual é a diferença em relação ao Design UX/UI?
O Design UX/UI trabalha dentro de um produto já definido: suas telas, seus fluxos e seus estados. O Design de produto começa antes, com o objetivo, o público e o modelo do produto, e a partir daí estrutura a interface principal.
O Design de produto inclui desenvolvimento?
O núcleo pode ser implementado em React, conforme acordado: como protótipo interativo ou interface funcional. O desenvolvimento completo do aplicativo, o back-end e as integrações têm escopo definido separadamente.
Isso substitui a pesquisa de mercado?
Não. Analisamos o negócio, as pessoas e o contexto de uso para tomar decisões sobre o produto. A pesquisa formal de mercado não faz parte deste trabalho.
O que acontece depois do mês?
Analisamos os resultados juntos e definimos o próximo passo: novas iterações, um sistema mais amplo ou o desenvolvimento de recursos adicionais.
Ainda tem dúvidas?
Converse sobre seu produto