HACKATHON: how we won the prize with our system
While we used its own design system, Bold, for the first time
This is the final part of our series about building Bold, Bridge Lab’s design system. Access part one, part two, and part three.
Leticia Marques, designer in the Mobile Team, wrote this experience!
…
When I subscribed to participate in the Hackathon that was going to take place in Bridge, I was nervous. I work on the Design Mobile team, and that’s why I don’t access Bold that much. It was a requirement of Bridge_Hack to built the project using our Lab’s recently developed design system.
I knew Bold from weekly reunions with my team, and sometimes I used it to make some experiments in our Innovation Friday’s. But that was it. How was we supposed to do, in just 10 hours, a whole project with a DS we didn’t knew profoundly?
My team on Hackathon was formed by some of my friends and devs of the Design Mobile team, which also had never used Bold that much. It was going to be a challenge to all of us. Even so, we entered Bridge_Hack with one goal in mind: to show that I was possible to win even without (that much) knowledge about Bold.
Spoiler alert: we won.
The Hackathon 😎
Here at Bridge, we dedicate fridays to innovation and development. We can use this time to study something for personal development or something to use directly in our Lab and projects.
We share knowledge in lectures and activities about subjects connected with technology and information. We do quizzes, develop new projects… Our TGIF is #ShareGivesMoreXP!
So, People Management team announced that we would have a friday dedicated entirely to a Web Hackathon using Bold. I first thought that the Mobile team wouldn’t join it, but they were pretty excited about competing with the people that work with web development everyday!
We did a dynamic to choose our name, and so _Italic was born. Ironic, isn’t it? _Italic and Bold_. We were very anxious from this moment. What is going to be the theme? Should we develop something entirely new or improve some of your projects here? We have to be here at 8 am!
Just one day before Hackathon, we found out two members of our team didn’t knew about the time and were planning to get here in their normal work hour, at 2 pm. Imagine what could’ve happened! But finally the long awaited friday came and we started to brace ourselfs. Hackathon was coming!
Then, we received the theme:
“my_bridge was created to register work hours and control vacations schedules. But imagine, what if it could be more than that? What functionality would make it even better?”
Some context: We have this internal system called my_bridge (developed by Bridgers, btw!) to register work hours and vacations. It makes things easier for us, and mostly for the people working in the Administrative team!
Meu_bridge: the internal system that manages the workflow in the Laboratory (content in Portuguese)
Our job would be to create a new module for the system, that should be both useful for the Bridgers (how we call our collaborators) and filled a necessity for the People Management team, Administrative team or Bridgers in general. The evaluation of the project would be through this:
- In case we wanted to implement our solution, it wouldn’t be necessary to use My Bridge codebase as the bottom line
- The solution needed to be presented in a pitch format in 5 minutes at the end of the day
- We needed to have everything ready until 6:30 pm and send it to the evaluation committee
As I sayed, on fridays we have #ShareGivesMoreXP. Nowadays, it is organized through spreadsheets, seted up by the People Management team. The current flux is:
- We communicate someone in PM team that we want to give a lecture
- We inform the theme, description, our preferences on the day and how long is going to be
- PM team organize it all the the spreadsheet and divulge it on our Slack channel for official communication
- Bridgers sign up through the spreadsheet
- If all vacancies are filled, there is a waiting list if someone gives up
When we received the theme, we thought about Bridgers needs nowadays. We made a list in our white board and gave priority of most important > less important and easier to develop > harder to develop.
Gladly, our idea to implement a module to manage the subscribes and demands of Share Gives More XP was in first place in both categories. Now, it was time to get serious.
Organizing our structure 👩💻
After deciding our module, the devs started to organize the server structure and had to wait for some screen to be ready to start develop it. We created our project _Italic on Zeplin. It was empty. The pressure was definitely on! Their work depended on mine, so I needed to do everything as soon as possible.
I put together some wireframes with the whole team to decide the best flux, and then I started to prototype. I had some privileges for being in the Design team (sorry teams that didn’t had designers!), so I downloaded a finished screen of My Bridge system to make the changes the most perfect way possible, on the actual grid.
I started to explore Bold’s library and organizing what would I need in specific situations of our flux. I realized that this process was way more easy than I thought it would be and the anxiousness was replaced with adrenaline.
Everything was so fluid and natural! Then, I realized that this was exactly why Bold was built, to make our work easier and make the whole process faster. Suddenly, I already had more than half of the screens ready.
Developed module 🚀
After the screens were delivered to the devs, our module took form. We had a tester ready to find some bugs and, of course, the designer to make sure everything was right and following the specs.
It was time to organize the presentation and train the pitch!
In the end, the devs were able to implement all the functions we thought of 💙 Our module was ready to be presented and we were aiming for the first place! Of course, we were nervous because all the teams were good, but still we believed in our victory.
Our presentation was the last one. We watched all the others solutions, and every single one of them was so good!
But it was finally our turn. When we finished our presentation, the evaluation committee didn’t had any question. Well. Either it was really good and we would definitely win, or it was so bad they already knew we were going to be in the bottom.
Our flux ended up like this
- The subscriptions tab (home screen) of the module would be where the lectures would be listed for the collaborators. This lectures should already been curated by the People Management team, and have a date and lecturer attached to it. In case the vacancies were filled, the collaborator could enter the waiting list and would be notified by email if a vacancy was opened.
- The lecture proposal tab would be the place where the collaborators could submit themes it would like to be the lecturer or be a listener to. In this tab, there would also be polls to vote in the lectures proposed. Later, those lectures would be officialized by the People Management team’s profile.
- The PM team’s profile (on the proposals tab) would be responsible to transform the proposals in actual lectures depending on the interest demonstrated in the polls. In this flux, the PM team would chose the date and duration, in communication with the lecturer. In case the proposal would be transformed into a lecture, the collaborator-lecturer would receive an email warning about it.
- The previous lectures tab would show all the lectures already given, and all the collaborators would have the opportunity to watch the video records.
All the lectures titles are fun facts or peculiar things that our team members like. What a bunch of weirdos!
Results 🏆
After all, the silence of the committee was a good sign!
After this Hackathon, we can say that Bold is, no doubt, accessible to everyone, in matter of design and implementation. It was 10 hours of learning, energy drink (and just some small fights with _Italic).
With our prize, we took the whole Mobile team to eat burgers for free. And now, we also have a new decoration in our office 😍
…
The Bridge Laboratory operates at the Technological Center of the Federal University of Santa Catarina (UFSC), with teams formed by graduate students, hired professionals and mentoring teachers. Since 2013, we have developed systems and applications in partnership with the Ministry of Health and the National Health Surveillance Agency — Anvisa.
