Loader Website
Logo

CIN COLORiT

Entrar no futuro com um simulador de pintura

CIN COLORiT
Entrar no futuro com um simulador de pintura
Serviços:
UX Design
UI Design
API Development
Project Management
Mobile App Development
Ano:
2020
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 óptimo 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.

0
Utilizadores Ativos
0.0
Avaliação da App Store
0
Anos
Tech Stack:
React
Pronto para trabalharmos juntos?
Image
Footer logo
Siga-nos
Utilizamos cookies próprios para lhe oferecer uma melhor experiência. Para saber que cookies usamos e como os desativar, leia a política de cookies. Ao ignorar ou fechar esta mensagem, e exceto se tiver desativado as cookies, está a concordar com o seu uso neste dispositivo.