A new website, the best way to celebrate this 16 years of NK
Here in Argentina and in all Latin America, when a girl turns 15 we throw a great party. Family and friends gather to celebrate the young woman's transition from childhood to adulthood. We call this celebration “Quinceañeras”.
This year we turned 16. We could not celebrate our special date the way we intended… CoronaVirus, social distancing and well, you know… a global pandemic kind of got in the way. But we wanted to do something special, something that would reflect this growth and specially, share it with ours. We wanted to put our knowledge and hard work to test, challenge our team and push the boundaries.
Launching our new site was definitely the best way to celebrate this 16 years of NK. We worked for three months, non stop, on this crazy, exciting, sometimes demanding and amazing project.
We started planning our site the same way we would have planned our party. Many meetings to share our ideas, our own vision of what the best website would look like. We had three premises: we needed to show what we were capable of, we needed to make something that would make us proud and we wanted to have as much fun as we could while doing it. Of course this was a difficult task and a very demanding job, but we could not forget that this was also a celebration.
There is no great party without great entertainment and decor. So one of the biggest challenges was designing the background of the site. We wanted a scene that didn’t compete with the main content, but at the same time achieve an immersive and shocking effect. We thought about the elements that were part of our daily universe and that could be part of our online world, and we chose the neon slash that has been part of our office decor for quite a while to be one of the main elements for the background.
We thought about placing the user (our guests!) in a world where each section is a different location on a map within the NK world, and the challenge when carrying it out was that with the number of sections we handle, the number of possible positions or trajectories was multiplied by 3. That is why we invented an autonomous camera system where we can move from one place to another without problems, regardless of where we are located in the scene.
As we continued designing the site, we came across another challenge: moving forward with the modeling and animations at the same time as with the implementation of both systems, since the system of wires that connect each slash was the first to be defined and ended up being the last to be modified, which in each change generated an alteration in the position of each section on the map.
We knew that the background of the site made in WebGL could cause performance problems, but we were prepared to overcome any obstacle. So we focused on the use of instances in order to maintain a low polygon count and small file sizes. Much of the scene is created "on the fly", since we only load objects with unique geometry into the GPU, allowing us to reach a constant 60FPS at all times.
Regarding the 2D design, the main test we faced was the smooth scroll library. At the beginning, since 2D and 3D were used separately, it worked perfectly, however, when we merged both parts, we realized that this library was not sufficiently optimized and it stole many resources that needed to be dedicated to the 3D. The decision that was made was to remove that library and create NK's own smooth scroll library for the new website. With it, we were able to have total control over what was happening at all times and we managed to considerably improve performance, being able to reach the long-awaited 60FPS.
Finally, a problem not as important as performance, but not minor, was the response time of the server. We used Prismic as a CMS, and as each section of the site required a lot of information on different types of content, what we did was implement a cache system using Redis, managing to reduce the server response time from 2 seconds to 0.03 seconds.
After many months of planning, designing, programming, testing, correcting and trying again, we were able to accomplish what we expected and more. We pushed our team to the limit and we created something we are 100% proud of. Not only because it shows what we are capable of, but because we accomplished it all with great teamwork. This is not the maximum expression of our abilities, but the maximum expression of what we are capable of when we work together, all aiming at the same result.
And last but not least, what makes a great party is an amazing group of guests. So without further delay, we invite you to visit our new website. We hope you like it, enjoy it and love it, as much as we do.