State Of Stack - Interactive Survey For Devs With Real-Time Results

At the same time, a lot of devs struggle to define which skills are the most desired on the market and which resources are trustworthy. We wanted to solve this problem. That's why – together with Typeform – we created State of Stack. State of Stack is an interactive survey for developers, which shows the results in real-time, enabling users to immediately assess whether they have to catch up with a new programming language or a new technology.

The complexity of the problem

The problem was very complex: we wanted to provide developers with a reliable resource of knowledge about the latest trends in web development. We decided that the best solution will be to ask... developers themselves. We wanted to enable developers to evaluate their skills compared to those of other members of the dev community. Our goal was to get insights from people from different branches of development and present them to others in an interactive form. We took into consideration the fact the we are all pressed for time and thus our aim was to present the data in real time.

Towards the goal

We wanted the app to enable developers to compare their skills against those of other developers, get access to the developers' community, learn what the most desired skills in development are, get tools to plan their professional growth and have a better grasp of available career opportunities. What’s more, we wanted to get an insight into the dev community and the current trends in web development, and collect content and data for our future content marketing activities.

We decided to build a mobile-friendly web app whose main part would be a survey. We were responsible for the entire process, from preparing mockups and making animations to the final version of the app. We used Typeform to collect data. Typeform is a fast, easy-to-use and responsive tool for building surveys, suitable even for non-tech people. We embedded the forms we had created in a fullscreen iframe HTML element on our page. Thanks to Typeform, we didn’t need to create our own backend.

UX/UI Challenges

We knew that a user friendly interface is necessary for the ultimate success of a product. We wanted to make the process different from filling out yet another run-of-the-mill online form. That’s why we introduced avatars on the landing page. Each of them visualizes one of the available paths (frontend/dev-ops/backend/mobile). It goes very well together with a dark, game-inspired interface, which is completely different from a regular business application.

We tried to solve one more interface problem on the landing page: how do we show to users that they will actually benefit from using our product? Developers don’t need slick marketing texts. They need facts. After a user selects a path, we immediately show them an answer to one of the questions from the survey – usually the most surprising one.

We smuggled a game based interface into the results page as well. Beside using regular pie/bar charts we created a radar chart. PES (the football video game) was our inspiration. The radar chart is not only eye-catching, but also allows to present a lot of information. It’s a reward for completing the survey.

How we did it

Our goal was to create a fast, lightweight, cross-platform application for presenting data, using HTML, CSS and JavaScript. Additionally, one of the requirements was to host the application on Hubspot. React turned out to the best tool to create this app. Routing is realized with a react-router plugin. The data is presented with the use of a Chart.js library and charts are rendered on canvas to ensure performance and flexibility on every device.

We spent some time designing the look of the charts. Making the charts interactive was far from easy, but we finally did it! We used the chart.js computation engine and wrote our own rendering methods. Still, the most challenging task was to control the data processing and the calculating of overall stats. We moved both operations to a separate service.

“The idea for creating the State of Stack came from one of our developers — he wanted to advance his career and to know what skills/technologies would have an impact on him in the coming months. There are so many paths you can take in programming right now — it’s exciting to see whether you’re doing something relevant to the current trends or completely outside the mainstream :)” Adam Nowak, Head of Technology, Netguru

Key facts

• 1 developer
• 2 graphic designers
• 1 content marketing specialist
• 1 k responses after two weeks