Celeiro Customer Card App


UX / UI Design - App Redesign  /   UX / UI Design - App Redesign

Celeiro é uma loja portuguesa especializada em produtos e alimentos saudáveis e naturais.
Fundada em Lisboa, Portugal em 1970, a marca possui atualmente 51 lojas físicas em todo o país, além de uma loja on-line lançada em 2014. Como produto de marketing, a empresa dispõe de um cartão que oferece descontos e benefícios aos clientes (que pode ser obtido gratuitamente) por meio do aplicativo Cartão Cliente Celeiro, do site celeiro.pt ou através do preenchimento de um formulário de papel em qualquer loja física.
Lisboa - 2024


Celeiro is a Portuguese store specialising in healthy and natural products and foods.
It was established in Lisbon, Portugal, in 1970. It currently has 51 physical stores around the country, as well as an online store which has been operating since 2014. As a marketing product, the company provides a card offering discounts and benefits to customers (which can be obtained free of charge) via the Cartão Cliente Celeiro app, the celeiro.pt website, or by filling out a paper form at any physical store.
Lisbon – 2024
- Função: Ux/ Ui Designer Desenhadora Gráfica
Duração: Dois meses
Ferramentas: Figma
---
Role:  Ux /Ui Designer - Graphic Designer
Duration: Two months
Tools: Figma





Problema - Análise
Problem Analysis

O Cartão Cliente Celeiro tem como objetivo oferecer benefícios e descontos aos antigos clientes e atrair novos consumidores. A dinâmica e o funcionamento desse cartão se dão através de um sistema de pontos gerados por meio de compras, sendo que esses pontos são “transformados” em descontos em produtos ou serviços em qualquer uma das lojas (físicas ou virtuais). Os pontos são cumulativos, também podem ser duplicados quando em promoções, mas não são convertidos em dinheiro.

Informações:
https://www.celeiro.pt/cartao-cliente/regulamento

No entanto, quando você descarrega o aplicativo e tenta se registrar ou fazer login, percebe que não é possível realizar nenhuma dessas ações. Então, como cliente e designer, após inúmera tentativas de registrar-me de maneira online, parecia inconcebível que diante toda promoção deste produto seja através dos funcionários e  ou por banners e cartazes espalhados pela loja todas as vezes que efetuo uma compra, decidi analisar todo o aplicativo, redesenhá-lo e oferecer uma proposta.

Como resultado de minha análise, pude identificar que há problemas relacionados ao  Ux/Ui design, ao desenvolvimento e ao design de serviços, como:

  • A tela após o download do aplicativo não apresenta de forma escrita a opção de logar ou se registrar. Para se registrar, é necessário clicar em login > formulário;
  • Após preencher o formulário de registro, o usuário é redirecionado para uma tela de login, mas não é possível fazer login com nenhuma das opções oferecidas devido a um erro.
  • As informações solicitadas no formulário não são relevantes para fazer login;
  • A página inicial tem um carrossel com a logo da Celeiro apresentada duas vezes na mesma página sem nenhuma informação relevante ou utilidade;
  • O aplicativo foi projetado para que o cliente verificasse as compras e registrasse os pontos, no entanto, ele mistura informações relacionadas à loja on-line. Além disso, todos os outros botões redirecionam para a loja on-line fora do aplicativo;Observe que há uma confusão entre o produto cartão do cliente x loja on-line; Após o preenchimento do formulário de cadastro, não é gerado o número do cartão; Os botões têm tamanhos diferentes (o botão de login ocupa mais espaço na horizontal do que os demais); O logotipo na parte superior da página de cadastro esconde os links; Há excesso de textos que não oferecem solução, por exemplo: O número de telefone de suporte na página de login não oferece suporte porque ninguém atende às chamadas;O botão “submit”, da forma como é apresentado, sugere que há mais informações a serem apresentadas abaixo, mas, na verdade, esse botão está relacionado a uma ação.

Depois de analisar o aplicativo, decidi verificar as avaliações na Playstore (já que sou usuário do Android) e, como esse projeto é um redesenho e não tive muito tempo para fazer entrevistas devido ao horário de trabalho, determinei os resultados das avaliações como pain ponts. Estes, foram capazes de definir os insights que, posteriormente, me ajudaram com outras informações: como features e  site map.
The Celeiro Customer Card  aims to offer benefits and discounts to the loyals consumers and attract new one. The dynamics and operation of this card take place through a system of points generated through purchases, and these points are “transformed” into discounts on products or services in any of the stores (physical or virtual). The points are cumulative, also can duplicate when through promotions, but, not converted into cash.
Info:
https://www.celeiro.pt/cartao-cliente/regulamento
However, when you download the app and try to register or log in, you realise that you can't do any of these things. So, as a customer and designer, after countless attempts to register online, it seemed inconceivable that in the face of all the promotion of this product, either by staff or by banners and posters scattered around the shop every time I made a purchase, I decided to analyse the whole application, redesign it and offer a proposal.

As result of my analysis, I was able to identify that there are problems related to Ux/Ui design, development and service design, as:

  • The screen after downloading the app does not show the option to join or register. To register you have to click on login > form;
  • After filling out the register form, the user is redirected to a login screen but it is not possible to log in with any of the options offered due an error.
  • The information requested in the form is not useful for logging in;
  • The home page has a carousel with Celeiro logo presented twice  on the same page without any relevant information or usefulness;
  • The app is designed for customer to check purchases and register points, however, it mix informations related to the online store. In addition, all other buttons redirect to the online store outside of the app; 
  • Note that there is a clutter between the product client card x  shop online;
  •  After filling out the register form, no card number is generated;
  • The buttons have different sizes (the login button takes up more space horizontly than the others);
  • The logo at the top on the register page hides links;
  • There are excessive texts that do not provide solution, for example: the support telephone number on the login page don´t provide support because no one answer the calls;
  • The “submit” button as it is presented suggests that there is more information to be presented bellow, but in fact this button is related to an action.

After analyses the app, I decided to check reviews on playstore ( as I am a android user), and as this project is a redesign and I didn´t have so much time to make interviews due work schedule, I determinated the reviews results as pain points. These pain points were able to define the insights, that subsequently helped me with others informations as to design features and sitemap.




Pain Points



  • Não conseguir registrar e/ou fazer login no aplicativo;
  • Não ter a documentação solicitada para fazer login;
  • Sentir-se confuso, chateado e exausto;
  • O atendimento ao cliente, o suporte de contato e os canais alternativos não funcionam;
  • Sentir que o aplicativo é uma perda de tempo;
  • Erros de desenvolvimento
  • Not being able to register and or log in to the app;
  • Do not have the requested documentation to
    log in;
  • Feeling confuse, upset and exhausted;
  • Customer service, contact support and alternatives channels don't work;
  • Feeling like app is a wasted  time;
  • Development errors



Imagens:  Captura de tela Playstore /  Images:  Plastore screeshot

Insights


  • Fluxo do site estruturado » criação de site map e user flow;
  • Frames e features com informações claras quanto ao que se destina o produto e sua respectiva acção.
  • Possibilidade de efetuar registro com documentos portugueses e ou estrangeiros;
  • Chatbot (AI tecnologia) pode ser uma solução para atendimento ao cliente nos canais de atendimento de forma primária no caso de quadro de pessoal ser reduzido. Respostas automatizadas poderiam auxiliar o cliente em questões menos complexas.
  • Structured site flow » creation of site map and user flow;
  • Frames and features with clear information on what the product is for and its respective action;
  • Possibility of registering with Portuguese or foreign documents;
  • Chatbot (AI technology) could be a solution for customer service on primary service channels if staffing levels are low. Automated responses could help the customer with less complex issues.

Site map





 Sketches 
LOW-FI

Conclusão -  Aprendizados Conclusions/ Learnings
Com esse projeto, pude perceber a importância que nós, designers, temos ao desenvolver projetos para a web e também a importância de desenvolvê-los usando as diretrizes atuais de UX/UI principalmente, sendo efetivamente centrados no usuário.

Ao fazer o download do aplicativo, o usuário é levado a uma série de estresses e decepções desnecessárias que poderiam ser evitadas se estivessem alinhadas com essas diretrizes.

Também é importante dizer que tudo isso significa custos para a empresa, e um projeto que não é bem projetado significa, no mínimo, perda de dinheiro, tempo e credibilidade. With this project I was able to realize the importance that we Designers have developing projects for the web and also the importance of developing it using current UX/UI guidelines and mainly being effectively user-centered.

When downloading the app, the user is led to a series of unnecessary stress and disappointments that could be avoided if they were aligned with these guidelines.

Its also  important to says that all this meas costs for company and a project that is not well designed means at least waist of money, time and credibility.



Solução HI-FI / Solution HI-FI








Julianasromaodesign