McDonald’s Portugal
We’re lovin’ it: a construir um sistema de design impecável
McDonald’s Portugal é uma marca global que está constantemente à procura de inovação, utilizando sabiamente o passado para ser líder no futuro.
Como é habitual em grandes empresas, as equipas administrativas da McDonald’s Portugal usam aplicações internas para realizar tarefas. Ao longo do tempo, várias equipas e fornecedores desenvolveram estas aplicações no entanto, pode ser um desafio manter a consistência entre as plataformas.
Com isso em mente, a McDonald’s Portugal desafiou a Bliss Applications, empresa de desenvolvimento tecnológico do WYgroup, a criar um sistema de design para todas as suas aplicações internas em Portugal.
Objetivo
A McDonald’s Portugal possui múltiplas plataformas para diferentes áreas, o que traz camadas adicionais de complexidade e desafia a criação de experiências digitais coerentes.
O nosso objetivo foi construir um sistema de design focado nos utilizadores para lhes proporcionar o conforto, a satisfação e a felicidade que só a McDonald’s Portugal pode oferecer. Os recursos e convenções do sistema ajudariam a marca a superar este desafio, simplificando o trabalho diário de todos e ajudando-os a criar designs icónicos.

Um novo conceito icónico
Analisámos algumas das plataformas internas da McDonald’s Portugal. Aproveitámos as suas diretrizes de marca para criar um conceito de UI que unificaria visualmente todas as ferramentas digitais e aumentaria a eficácia da marca para todos os utilizadores internos.
Este conceito incluiu os novos princípios de experiência, o nome do sistema de design (“Iconic Design System”), o novo protótipo de design para uma das plataformas internas da McDonald’s Portugal e a linguagem visual (tipografia, esquema de cores, iconografia, botões e elementos de movimento).

Definição dos padrões do sistema
Definimos os padrões do sistema de design através de um processo iterativo e colaborativo que envolveu Designers de Produto, Redatores de UX e Engenheiros. Juntos, criámos as diretrizes de voz e tom, estilo e componentes. Desta forma, o sistema de design da McDonald’s Portugal seria capaz de ajudar as equipas de produto a criar experiências simples, intuitivas e icónicas, enquanto trabalham de forma mais eficiente.

Design e desenvolvimento
Desenhámos a experiência e as funcionalidades para duas plataformas selecionadas e, paralelamente a estas atividades, criámos uma biblioteca de componentes multiplataforma. A nossa equipa de engenharia codificou os componentes da biblioteca utilizando Bootstrap para serem lançados posteriormente, e também os catalogámos para uso futuro.

Ferramentas integradas
Utilizar um conjunto integrado de ferramentas foi crucial para manter a nossa equipa alinhada e a colaborar com o cliente. Estas ferramentas permitiram-nos desenhar e partilhar layouts únicos com o cliente (Figma), acompanhar o progresso de todo o projeto (DevOps), codificar e catalogar componentes (Bootstrap), e armazenar os resultados de design e entregáveis de engenharia (zeroheight).

Um sistema em constante crescimento
O Iconic Design System da McDonald’s Portugal é utilizado internamente na sede da empresa em Portugal para todos os novos projetos, ajudando as equipas a resolver problemas reais, melhorar a qualidade do design e criar uma experiência digital coesa em diferentes pontos de contato. Este sistema continuará a crescer e evoluir para atender às necessidades da McDonald’s Portugal.
