logo

CIN COLORiT

Entrar no futuro com um simulador de pintura

CIN COLORiTEntrar no futuro com um simulador de pintura
Ano:2020
Serviços:Gestão de Projeto, UI Design, UX Design, Desenvolvimento, Manutenção & Suporte
Tipos de Produto:API, App Móvel
Tipos de Tecnologia:React Native
Indústrias:Tintas & Vernizes

Cliente

A CIN é uma empresa portuguesa de tintas e vernizes e marca a posição na lista das cinquenta maiores empresas do mundo. A marca procura apresentar melhorias contínuas e inovação através dos seus produtos, serviços e ferramentas. 

Objetivos e desafios

Na altura, a CIN já tinha uma aplicação móvel, mas queria dar um novo look à app, investindo na inovação tecnológica para proporcionar melhor experiências para os utilizadores.

O desafio era manter a essência da aplicação mas, ao mesmo tempo, atualizar o design e implementar características inovadoras e surpreendentes. Além de melhorar algumas funcionalidades, que já existiam na aplicação anterior, como o localizador de lojas e o acesso aos catálogos de cores da CIN, queríamos implementar algumas novas e mais desafiantes: o simulador de pintura e o identificador de cor. 

COMPREENDER OS UTILIZADORES

A aplicação CIN COLORiT foi especificamente criada para todos os tipos de utilizadores e propósitos. Quisemos criar uma aplicação flexível e fácil de usar, dedicada a qualquer utilizador, com gosto pelo design de interiores, independentemente do seu nível de conhecimento tecnológico ou de edição.

 

 

PESQUISA DE MERCADO

A pesquisa é fundamental para os insights, necessidades reais do utilizador e inspiração. Curiosamente, descobrimos que não há muitas com o mesmo conceito e características como as que queríamos implementar. Decidimos fazer uma pesquisa profunda sobre aplicações que trabalham com imagens, para compreender melhor o mercado e as características a que os utilizadores estão habituados, de forma a garantir características de usabilidade na manipulação de fotografias que é um ponto central na aplicação. Mas, mesmo assim, inspirou-nos a criar outras funcionalidades, como "Cores Dominantes" - que mostra as quatro cores predominantes da imagem. A pesquisa permitiu-nos aprender e ajudou-nos a melhorar ideias que queríamos desenvolver.

image
GUIA DE ESTILO UI

Quanto à interface do utilizador, alguns elementos foram cuidadosamente escolhidos pelo cliente: a fonte (que é a fonte da sua marca) e as cores (suaves, tons pastel que conferem um mood artístico à aplicação). 

Um dos nossos principais objetivos relativamente UI era não distrair os utilizadores enquanto estes experimentam com as imagens/fotografias. Por essa razão, tentámos simplificar todos os elementos do design:

 

  • Criámos um fundo neutro - branco;
  • Optámos por não utilizar a barra de navegação superior, utilizámos pequenos botões "home" e "go back", para realçar a imagem/foto carregada;
  • Demos um destaque visual nas ferramentas de edição para motivar o utilizador a experimentá-las.

 

Também adaptamos o logótipo da CIN às cores da aplicação para conseguir um design e uma estética mais consistentes.

 

image
SIMULADOR DE PINTURA

A nossa prioridade a nível de desenvolvimento foi o simulador. Se isto não funcionasse, nada mais importava... Segurem-se bem, a viagem está apenas a começar.

O simulador permite ao utilizador testar as cores de que gosta nas suas paredes, mesmo antes de pintar. Através de uma fotografia, ele pode visualizar a cor e escolher com confiança. Para este fim, utilizamos recursos nativos e desenvolvemos duas opções: 

 

  • Tirar uma foto através do seu smartphone e pintar a parede com a cor desejada.
  • Carregar uma fotografia da galeria e pintar as paredes que pretender.

 

 

Quando o utilizador encontrar a sua cor, pode guardá-la ou partilhá-la através das redes sociais. A aplicação apresenta também ambientes pré-criados de cozinhas, salas e quartos, onde o utilizador pode testar diferentes cores disponíveis no catálogo CIN. Esta é a oportunidade perfeita para testar aquelas cores mais arrojadas que normalmente não se escolheria.

 

image
DESAFIOS EMERGENTES

Ao trabalhar no efeito realístico que pretendíamos, surgiram alguns desafios. Aqui estão os mais importantes:

 

 

  • Criar uma máscara que captasse todos os contornos de uma imagem, sem elementos como sombras ou luz, afetando a percepção da cor. Esta máscara é um dos fatores mais importantes, porque define os limites de até onde podemos pintar. Foram necessárias várias tentativas com diferentes métodos para que esta máscara funcionasse em todo o tipo de imagens.
  • Definir o limite da área que iria ser pintada ao pressionar qualquer ponto na imagem, sem que esta apague as sombras existentes na imagem. Para isso, utilizámos várias versões da mesma imagem: uma que tinha apenas as sombras/luminosidade; e outra que tinha a área que seria pintada com a cor desejada. Num processo de melhoria contínua chegámos à versão final, mostrando uma imagem, que na realidade, é a junção de vários tipos da mesma.

 

 

Após ultrapassarmos esses desafios, chegámos à fase final de desenvolvimento onde tivemos de fazer um refactoring no código. Tivemos muita lógica para criar a imagem e isto, claro, tem um custo no processamento do smartphone. Foi necessário realizar vários testes para identificar quais as funções que estavam a custar mais tempo e capacidade de processamento a fim de desenvolver formas alternativas de executar as mesmas funções com menor utilização de recursos e um ótimo desempenho da aplicação.

image
IDENTIFICADOR DE COR

Já alguma vez se apaixonou pela cor das paredes de um hotel onde estava hospedado? Ou invejou um amigo seu por causa da espantosa escolha de cor para as paredes da sua casa? Com a CIN COLORiT pode encontrar as cores mais semelhantes às da vida real nos catálogos de cores CIN. É para isso que serve o identificador de cor. 

Aqui está como funciona:

  • Tira uma foto / carrega uma foto;
  • Selecciona a cor manualmente e/ou visualiza a paleta de cores predominante;
  • Clique na que pretende e adiciona aos favoritos ou à conta MyCIN.

 

Ver cores disponíveis

Aqui pode ver todas as cores do catálogo CIN, as que guardou como favoritas e as que estão associadas à sua conta.

 

image
ENCONTRAR LOJAS

Depois de descobrir a cor perfeita, a aplicação ajuda-o a encontrar a loja CIN mais próxima de si.

 

image
RESUMO

Quantas vezes já adiou pintar a parede da sala, que até já estava bem a precisar, porque não conseguia decidir-se relativamente à cor? CIN COLORiT torna esta missão mais fácil e cria uma experiência surpreendente e sem precedentes para os seus utilizadores. Todas as características são importantes, úteis e convenientes, mas há algumas que mais se destacam: o simulador de pintura e o identificador de cor.

A introdução destas novas features na aplicação, permitiu à CIN satisfazer as necessidades do seu público-alvo, proporcionando-lhes uma visualização mais realista do resultado final e dando-lhes mais confiança na escolha da cor. Além disso, o CIN ganha a sua confiança e destaca-se da concorrência.

 

Pronto para criarmos algo 
incrível
 juntos?
logo
We create products with people in mind
Entrar em contactoinfo@codepoint.pt
ouAgendar Call
Utilizamos os nossos próprios cookies para lhe proporcionar uma melhor experiência. Para saber que cookies utilizamos e como os desativar, leia a política de cookies. Ao ignorar ou fechar esta mensagem, e a menos que tenha desativado os cookies, está a concordar com a sua utilização neste dispositivo.
Aceitar
Saber mais