This was another React app I developed for WIT. I focused on speed, performance, animation and also on implementing the UI almost on a pixel-perfect responsive layout. So the website fits nicely on small screens and also on large desktop screens.
Two of my main development goals for this project were to be able to have the site load in the less time possible and to also utilize some lazy-loading techniques to defer component mounting only when needed.
From sketch to styled components
Sketch is a great tool for web developers. If you are aware of the component-based structure of a React or a Vue project, then translating that to Sketch is actually pretty straight-forward. So you can break apart your UI on an atomic-based design approach, with single responsibilities and maximum component re-use. João Teixeira did a great job on that, as always.
Translating the UI to CSS was a breeze. I did some global styling with SCSS, but for all components I used styled-components, a CSS-in-JS library, that is very easy to use and it's ability to pass props to css was also very helpful for a great developer experience.
Simple, but efective UI animations were also something that I implemented here. Nothing too distracting, but rather to help users know where things were, where to click, fading in lazy-loaded imagens, things like that. I also implemented the "shimmer" effect on some components, for users to have a content placeholder before the actual content was loaded. It helped to speed things by a lot!
Expectations vs Reality
We were very modest in our expectactions. After all, it was an internal project, for the first few months. We set the timeframe of our first challenge for two months and we expected no more than 100 users. The distance to be covered was almost 11000km. Difficult taks, we figured.
Turns out, we got more than 400 participants, 79 teans and our goal was achieved two times quicker than we expected. And the total distance ran was up to 355%! One guy actually ran more than 800km in that time-frame! That's pretty crazy, if you think about it, right?
People were actually very into the achieving the goal. Why? Because the it was clearly communicated and it was very easy for everyone to know what should be their part in the whole group. That's pretty powerful if we think about it: When we communicate something in a very straing forward manner, people actually get engaged into what we do.
A promise made is a promise to keep
A few days after the Challenge was completed, WIT went to Casa de Formação Cristã da Rainha Santa and, by kepting the promise, donated 5 PCs connected to WiFi and also a printer. They e also gave 274 school vouchers for the girls of that institution to spend on study materials and also 32 dentist vouchers.
We then sent a HTML email to everyone that participated in the first challenge (as we were doing during the duration of that challenge) to let them know that their effort was not in vain, that there is actually a consequence for their physical effort. This is important for people, because you can actually
It also helps to motivate everyone for the second challenge because, at the time of writing, people are already 65% of the way, in less than a month, of a almost 3x larger distance than the previous challenge.
Yes, its great to work on a web project, develop something fun, but I that, more than that, it's very rewarding to know that we are helping someone with our actions, that things are not in vain, that people are actually helping others and also taking care of their health.
Just this Friday we realeased a new set of features for the app and I think that pretty soon we will open this iniciative to other companies, so that they will also be able to make society a little more participant.