SlideShare uma empresa Scribd logo
1 de 23
Baixar para ler offline
Um Design System acessível e 

open source para o maior fornecedor
de software para a saúde no Brasil
_bridge
- Laboratório integrado ao Centro Tecnológico da Universidade Federal de Santa Catarina

- Desenvolvimento de projetos de Governo Eletrônico (Ministério da saúde e Anvisa)

- 114 colaboradores
_Produtos bridge
Informatização do processo de
trabalho de Atenção Primária
e-SUS AB
Gestão do financiamento e
execução das obras financiadas
pelo Ministério da SaúdeSISMOB
Sistema para registro e
monitoramento de implantes
RNI
2 bilhões de registros

4.380 de municípios

31.984 Unidades Básicas de Saúde

1.3 milhões de profissionais de saúde
12 bilhões de reais em verba

33 mil obras

1.470 UBS em 2018
6 hospitais piloto
bold_design system
Design System
Um conjunto de padrões interconectados
e práticas compartilhadas organizadas de
forma coerente para atender ao propósito
de um produto digital.
(KHOLMATOVA, 2017)
bold_design system
bold_designsystem
PorqueconstruirumDesignSystem?
Acessibilidade→
Trabalhorepetitivo→
Inconsistênciaeuso
incorretode
componentes
→
bold_designsystem
VantagensdoDesignSystem
Criarprodutoscom
maisrapidez
=Reutilizaçãoeescaladedesign
Promoveaconsistência
ecoesãodaUI
=Melhoraaexperiênciadousuário 

=Aplicaçãoprevisívelefácildeusar
Permiteumarápida
combinaçãodefluxose
interações
=Produtosfáceisdetestar 

=Soluçõesmaisresistentes;
A web é fundalmentalmente projetada para
funcionar para todas as pessoas,
independentemente do seu hardware, software,
linguagem, localização ou habilidade.
= Acessibilidade & Internacionalização & Open source
bold_design system
(W3C.org)
Porque
acessível?
bold_design system
de pessoas em todo mundo convivem
com alguma forma de deficiência.
(WHO, 2011)
1 Bilhão = 10%
45,6 milhões de pessoas 

(23,9% da população) têm algum tipo de deficiência.
(CENSO, 2010)
O acesso à informação e comunicação,
é um direito humano básico.
A inovação através do código aberto é importante
porque abre portas para mais inovações.
bold_design system
- Isaac Newton
"If I have seen further than others, it is by
standing upon the shoulders of giants"
Porque
i18n?
bold_design system
Atingir uma parcela maior de usuários
Em alguns países, certas cores ou expressões
podem ter o significado de má sorte ou insulto.
Na Bulgária, acenar com a cabeça significa não,
balançar a cabeça significa sim.
Redução de riscos
Internacionalização é o processo
de criar um produto de forma
que possa ser facilmente
adaptado a idiomas e culturas
locais específicas.
Ordem de leitura, formatos de data e hora, calendários locais,
formatos numéricos e sistemas de numeração, manipulação de
nomes pessoais e formas de endereço, etc.
Análise do contexto atual
e real necessidade de um
Design System
Compreender e especificar
o contexto de uso
Especificar os
requisitos do
usuário
Produzir soluções de projeto
que atendam aos requisitos
Avaliar as soluções de
projeto em relação
aos requisitos
Repetir, quando
apropriado
bold_design system
Primeira versão do
Design System
Segue reto toda vida
Construção do
Design System
(Adaptado da ISO 9241-210)
- Sistemas usados por 1.3 milhões de profissionais

- Faixa etária e grau de instrução

- Baixo conhecimento em interfaces

- Não exploram o sistema
- Sistemas complexos

- Monitores de baixa resolução

- Velocidade da internet ruim

- Municípios com 1 a 500 unidades de saúde
Contexto de uso extremo & Público alvo diverso
PROJETAMOS PARA
bold_design system
bold_designsystem
+
Requisitosdoscomponentes
–Intuitivosesimplesdeusar

–Rápidos

–Bomcontraste

–Suporteainternacionalização



Cadasegundogastoentendendocomo
funcionaumcomponenteéumsegundonão
gastocomopaciente.
Produzirsoluçõesqueatendamaosrequisitos
*
RevisãodosprincipaisDesign
Systemsdomercado edos
produtosdolab



Listagemde32componentes
paraaV1 

(Entradadedados;Informativos;
NavegaçãoeContainers)
Alternativasgráficas 

(tipografia,cor,formae
funcionamento)
bold_designsystem
Onde estão as referências
open source latinas?
*
Durante o processo de benchmarking as referências
sempre foram do EUA/Europa.
bold_design system
HOJE
bold_designsystem
Notificationdescription.
Notificationdescription.
Notificationdescription.
Notificationdescription.
Button
Button
Button Button
Button
Button Button
S
07
14
21
28
05
S
06
13
20
27
04
Q
05
12
19
26
03
Q
04
11
18
25
02
T
03
10
17
24
01
S
02
09
16
23
30
D
01
08
15
22
29
2018Jan
dd/mm/aaaa
*Label
Taglabel
Taglabel
Radiotext
*Label
Checkboxtext
*Label
Tablelabel
Tablelabel
Tablelabel
Tablelabel
Tablelabel
Table|
*Label
8mine40srestantes
50%
Processname
Loremipsumdolorsitamet,
consecteturadipiscingelit.
Headline5
Tablabel Tablabel Tablabel
Optional
Step
Optional
Step
Optional
Step
Processname
Errortext.
Tooltiptext
OFF
ON
Muitas vezes um componente “funciona” e passa
nos testes de forma isolada. 

Porém quando usado no contexto do usuário o
resultado pode ser diferente.
Avalie as soluções no
contexto do usuário
Checkbox text Checkbox text
Checkbox text Checkbox text
16px
24px
bold_design system
bold_designsystem https://bold.bridge.ufsc.br/
bold_designsystem
&Engajamentointerno Feedback
HackathoncomoDesignSystem+Diadainovação
“Otrabalhoestavafluindotãorápidoenaturalmente!Aí,eupercebiquefoiexatamentepara
issoqueoBoldfoiprojetado,parafacilitaronossotrabalhoetornartudomaisrápido.”
bold_designsystem
Retorneoconhecimentoparaacomunidade
RepositóriodeDesignSystems
RepositóriodeDesignSystems CanalsobreoassuntonoSlack

IxDABrasil&DesignSystems
Compartilheosaprendizadoseasdoresdoprocesso
bold_designsystem
Quepossamosdesenvolvermais
ferramentasopensourcequeviabilizam
odesignemlargaescalaeimpulsionam
ainovaçãotecnológicanodesignlatino.
Obrigada!
bold.bridge.ufsc.br

bridge.ufsc.br
/carolinekrone
@carolinekrone
@laboratoriobridge
bold_designsystem
Referências
https://www.who.int/disabilities/world_report/2011/report.pdf

https://censo2010.ibge.gov.br/resultados/resumo.htmlz

KHOLMATOVA,A.DesignSystems:Apracticalguidetocreatingdesignlanguagesfordigitalproducts.[S.l.]:SmashingMediaAG,2017. 

https://www.w3.org/WAI/standards-guidelines/wcag/

http://emag.governoeletronico.gov.br/

https://repositorio.ufsc.br/handle/123456789/197794

https://astro.magnetis.com.br/

https://www.gov.br/sobre/

https://catho.github.io/quantum/?path=/story/introduction--getting-started

http://gcba.github.io/BAstrap/

http://design.systems/slack/

https://ixdabr.herokuapp.com/

Mais conteúdo relacionado

Semelhante a Bold Design System - ILA Medellin 19

Youubi tech spin
Youubi tech spinYouubi tech spin
Youubi tech spin
UFPE
 
CV - Andre De Conto Matter
CV - Andre De Conto MatterCV - Andre De Conto Matter
CV - Andre De Conto Matter
Andre Matter
 
Apresentação (resumido) oxti
Apresentação (resumido)   oxtiApresentação (resumido)   oxti
Apresentação (resumido) oxti
OXTI
 
Webinar-SAGE SEI-Bongás
Webinar-SAGE SEI-BongásWebinar-SAGE SEI-Bongás
Webinar-SAGE SEI-Bongás
Marco Leite
 

Semelhante a Bold Design System - ILA Medellin 19 (20)

Carlos Eduardo Capparelli
Carlos Eduardo CapparelliCarlos Eduardo Capparelli
Carlos Eduardo Capparelli
 
Youubi tech spin
Youubi tech spinYouubi tech spin
Youubi tech spin
 
20141128-Carlos-Eduardo-Capparelli
20141128-Carlos-Eduardo-Capparelli20141128-Carlos-Eduardo-Capparelli
20141128-Carlos-Eduardo-Capparelli
 
Patricia Andrade
Patricia AndradePatricia Andrade
Patricia Andrade
 
cms_files_81187_1648754282Material_Doutorado_Profissional_em_Engenharia_de_So...
cms_files_81187_1648754282Material_Doutorado_Profissional_em_Engenharia_de_So...cms_files_81187_1648754282Material_Doutorado_Profissional_em_Engenharia_de_So...
cms_files_81187_1648754282Material_Doutorado_Profissional_em_Engenharia_de_So...
 
Apresentação Cicluss ERP para Administradores
Apresentação Cicluss ERP para AdministradoresApresentação Cicluss ERP para Administradores
Apresentação Cicluss ERP para Administradores
 
Linear - Softwares Matemáticos
Linear - Softwares Matemáticos Linear - Softwares Matemáticos
Linear - Softwares Matemáticos
 
Aula 1 dsi
Aula 1  dsiAula 1  dsi
Aula 1 dsi
 
CV - Andre De Conto Matter
CV - Andre De Conto MatterCV - Andre De Conto Matter
CV - Andre De Conto Matter
 
Software Livre na Gestão da Informação: Oportunidades e Desafios para o Profi...
Software Livre na Gestão da Informação: Oportunidades e Desafios para o Profi...Software Livre na Gestão da Informação: Oportunidades e Desafios para o Profi...
Software Livre na Gestão da Informação: Oportunidades e Desafios para o Profi...
 
Perspectivas Atuais e Tendências em Sistemas de Informação
Perspectivas Atuais e Tendências em Sistemas de InformaçãoPerspectivas Atuais e Tendências em Sistemas de Informação
Perspectivas Atuais e Tendências em Sistemas de Informação
 
Apresentação (resumido) oxti
Apresentação (resumido)   oxtiApresentação (resumido)   oxti
Apresentação (resumido) oxti
 
A expansão do PHP no governo brasileiro
A expansão do PHP no governo brasileiroA expansão do PHP no governo brasileiro
A expansão do PHP no governo brasileiro
 
Aspectos Atuais em Sistemas de Informação
Aspectos Atuais em Sistemas de InformaçãoAspectos Atuais em Sistemas de Informação
Aspectos Atuais em Sistemas de Informação
 
CV Jorge Ramos Ago 2014
CV Jorge Ramos Ago 2014CV Jorge Ramos Ago 2014
CV Jorge Ramos Ago 2014
 
Pp ads
Pp adsPp ads
Pp ads
 
Webinar-SAGE SEI-Bongás
Webinar-SAGE SEI-BongásWebinar-SAGE SEI-Bongás
Webinar-SAGE SEI-Bongás
 
Webinar projetos e ti - business intelligence - como fazer
Webinar   projetos e ti - business intelligence - como fazerWebinar   projetos e ti - business intelligence - como fazer
Webinar projetos e ti - business intelligence - como fazer
 
Mercado e Tendências em Tecnologia da Informação
Mercado e Tendências em Tecnologia da InformaçãoMercado e Tendências em Tecnologia da Informação
Mercado e Tendências em Tecnologia da Informação
 
Apresentação Hollandy
Apresentação HollandyApresentação Hollandy
Apresentação Hollandy
 

Bold Design System - ILA Medellin 19