HACKATHON: como ganhamos o prêmio com o nosso sistema
Enquanto usávamos pela primeira vez o Bold, o design system desenvolvido nele
Esta é a parte final da nossa série sobre a construção do Bold, o design system do Laboratório Bridge. Acesse o primeiro, o segundo e o terceiro conteúdo.
Conteúdo produzido por Leticia Marques, designer da Equipe Mobile!
Quando me inscrevi para participar do Hackathon que ia acontecer no Bridge, fiquei nervosa. Atuo na parte de Design Mobile do Laboratório, e por isso não acesso muito o Bold. E era uma exigência do Bridge_Hack que o projeto fosse feito com o nosso design system.
Conhecia ele pelas reuniões de equipe que realizamos semanalmente, e algumas vezes utilizei o Bold para fazer pequenos experimentos nas sextas da inovação. Mas era isso.
Como fazer em 10 horas de trabalho um projeto com um DS que não conheço profundamente?
Minha equipe do Hackathon foi formada por meus amigos & devs do mobile, que também nunca haviam acessado o Bold. Ia ser um desafio bem grande para todos nós. Mesmo assim, fomos para o Hackathon com um objetivo em mente: mostrar que era possível ganhar mesmo com (quase) nenhum conhecimento de desenvolvimento para web com o Bold.
Spoiler: ganhamos.
O Hackathon 😎
Aqui no Bridge temos uma cultura de sextas-feiras dedicadas à inovação e desenvolvimento. Podemos estudar algo para desenvolvimento pessoal ou que dê frutos para o Laboratório e nossos produtos.
Compartilhamos conhecimentos em palestras e dinâmicas sobre assuntos ligados à tecnologias e informação, fazemos gincanas, desenvolvemos projetos novos… O nosso #Sextou é o #CompartilharDaMaisXP!
A Gestão divulgou que teríamos uma sexta-feira de Hackathon para web, usando o Bold. Achei que o pessoal da equipe do Mobile ia ser resistente em participar, mas eles adoraram a ideia de competir com o pessoal que trabalha com isso todos os dias.
Fizemos uma dinâmica para escolher o nome da equipe, e o que ganhou foi _Italic. Irônico, não? _Italic e Bold_. Nesse momento já estávamos beeeeem ansiosos. Qual vai ser o tema? Vamos ter que desenvolver para os produtos ou algo completamente novo? Tem que chegar às 8h da manhã!
Um dia antes, descobrimos que 2 membros da equipe não sabiam disso e iam chegar no horário normal deles, às 14h. Imagina o desastre se isso tivesse acontecido! Mas chega a tão esperada sexta-feira, e começamos os preparativos.
E aí recebemos o tema:
“O meu_bridge foi criado para registro de horas e controle de férias. Mas imagine, e se ele pudesse ser mais do que isso? Qual funcionalidade deixaria ele top plus disparado?”
Contextualizando: Temos um sistema interno chamado meu_bridge (desenvolvido por bridgers, inclusive!) para registro de horários de trabalho e de férias. Ele facilita a nossa vida e, principalmente, a vida do pessoal que trabalha no administrativo.
Meu_bridge: a ferramenta que gerencia o fluxo de trabalho no Bridge
O nosso dever seria criar um módulo novo para o sistema que fosse útil para os colaboradores e que suprisse uma necessidade da gestão, do administrativo ou dos colaboradores em geral. A avaliação das propostas das equipes seria dada por:
- Caso quiséssemos implementar a nossa solução, não seria necessário utilizar o codebase do Meu Bridge como ponto de partida
- A proposta teria que ser apresentada em formato de pitch em 5 minutos no fim do dia
- Teríamos que entregar tudo até as 18:30h para a comissão avaliadora
Como já comentei, temos o #CompartilharDá+XP nas sextas-feiras. Hoje, ele é organizado através de planilhas que são configuradas pela Gestão. O fluxo é:
- Comunicamos alguém na Gestão que queremos dar uma palestra
- Informamos tema, descrição, data de preferência e duração
- A Gestão organiza isso na planilha e joga no canal de comunicados do Slack
- Os colaboradores se inscrevem para participar
- Se todas as vagas forem preenchidas, existe uma lista de espera caso alguém desista
Quando recebemos o tema do desafio, pensamos nas necessidades que os Bridgers tem hoje. Fizemos uma lista no nosso quadro branco e demos prioridade de mais importante > menos importante e mais fácil de desenvolver > mais difícil de desenvolver.
Felizmente, a nossa ideia de implementar um módulo para gerir as inscrições e demandas do Compartilhar Dá Mais XP ficou em primeiro nas duas categorias. E era agora que o bicho ia pegar.
Organizando nossa estrutura 👩💻
Depois que decidimos o nosso módulo, os devs começaram a organizar a estrutura do servidor e tiveram que esperar que alguma tela estivesse pronta para começarem a desenvolver.
Criamos nosso projeto _Italic no Zeplin. Estava vazio. Que pressão! O trabalho deles dependia do meu para começar. Eu precisava fazer tudo o mais rápido possível.
Montei alguns wireframes junto com o pessoal da equipe para definirmos o melhor fluxo, e comecei a prototipar. Como tinha alguns privilégios por ser da equipe do Design (perdão equipes que não tiveram designer), peguei uma tela pronta do sistema do Meu Bridge para fazer as alterações da maneira mais perfeita possível, em cima da grid.
Comecei a explorar o arquivo da biblioteca do Bold para saber qual componente usaria nas situações específicas do fluxo, e percebi que esse processo foi mais fácil do que eu pensei.
Quando eu estava ali, com a biblioteca do Bold aberta e organizando o que eu iria precisar, o nervosismo foi substituído por uma grande onda de adrenalina.
O trabalho estava fluindo tão rápido e naturalmente! Aí, eu percebi que foi exatamente para isso que o Bold foi projetado, para facilitar o nosso trabalho e tornar tudo mais rápido. Quando me dei conta, já tinha feito mais da metade das telas do fluxo.
Módulo desenvolvido 🚀
Depois que comecei as telas estavam prontas, o nosso módulo começou a nascer. Tínhamos um tester a postos para encontrar alguns bugs e, claro, a designer para conferir se estava tudo nos trinks e de acordo com as specs.
Agora era a hora de organizar a apresentação e treinar o pitch!
No fim, os devs conseguiram implementar todas as funcionalidades que havíamos pensado 💙 Nosso módulo estava prontinho para ser apresentado e estávamos confiantes que iríamos ficar em primeiro lugar! Claro, estávamos nervosos porque as outras equipes tinham colaboradores muito bons, mas mesmo assim acreditávamos na vitória.
A nossa apresentação era a última. Enquanto acompanhamos a live das apresentações, cada equipe que mostrava a sua solução era um aperto no coração. Todas eram muito boas!
Por fim chegou a nossa apresentação. Quando terminamos, a comissão avaliadora não teve nenhuma dúvida. Aí congelamos: ou isso era muito bom e com certeza iríamos ganhar, ou ficou tão ruim que eles tinham certeza que ficaríamos em último.
Nosso fluxo ficou assim:
- A aba de inscrições (tela inicial) do módulo seria onde as inscrições de palestras estariam listadas para os colaboradores. Essas palestras já teriam passado pela curadoria da gestão e já teriam data e palestrante. Caso as vagas tivessem se esgotado, o colaborador poderia entrar na lista de espera e seria notificado por e-mail caso abrisse uma vaga.
- A aba de propostas de palestras do módulo seria o lugar onde o colaborador poderia submeter temas em que gostaria de palestrar ou temas que gostaria de ouvir sobre, onde deixaria o apresentador em aberto dizendo que quer apenas assistir. Isso ajudaria nos cenários “meu deus queria falar sobre isso mas será que alguém vai querer ouvir?” e “Nossa queria muito ouvir sobre isso mas ninguém fala! A gestão poderia chamar alguém para apresentar, né?”. Nessa aba também haveria a votação de interesse nas propostas, que futuramente virariam palestras oficializadas pelo perfil da gestão.
- O perfil da gestão (na aba de propostas de palestras) seria responsável por transformar as propostas em palestras de acordo com a quantidade de interesse nos temas. Nesse fluxo, a gestão que iria escolher a data e a duração, mantendo comunicação com o palestrante. Caso a proposta fosse transformada em palestra, o colaborador responsável receberia um e-mail o avisando.
- A aba de palestras anteriores, por fim, mostraria o histórico de palestras já realizadas, dando a oportunidade de assistir a gravação do vídeo delas.
Todos os títulos das palestras são dados curiosos e gostos peculiares dos membros da equipe. Gente estranha, né?
Resultado 🏆
No fim das contas, o silêncio da comissão foi um bom sinal!
Depois desse Hackathon, podemos dizer com certeza que o Bold é, realmente, acessível para todos, tanto na parte de design quanto na implementação. Foram 10 horas de muito aprendizado e muito energético (e só alguns surtos com a _Italic).
Com o nosso prêmio, levamos a equipe do Mobile para comer hambúrguer na faixa. E de quebra, temos uma nova decoração na nossa sala 😍
O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).
Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).
