Reinventing our old-hat company website

The overview

The old Brocoders website had been serving us faithfully since 2011. We liked its design for a while, and what is more, we were pleased with its quite decent performance. But as time passed, we've learned much during all these years and grown out of the legacy version, just like how children grow out of clothes.

That said, our team decided to renovate the whole site's structure so we could tell more about us and our services. It wasn't an easy call, and it took almost two months for us to turn up sleeves for the upcoming redesign process. We wanted to define our style, our brand, our voice and the emotions that we'd like to trigger once you visit our site.

After much thought and discussion, as well as numerous design concepts we managed to review, we set a business mindset we'd want to stick to in years ahead. Our most crucial goal is to help those who somehow engage with our brand. Whether that be our customers or our own employees, we help both to grow and reach new frontiers.

We'd like you to find out what's happening behind the scenes throughout your trip on the pages of the site:

• How our specialists collaborate with clients and partners
• How our developers work
• The way our managers run multiple projects
• Which way QA experts check the quality of products
• How HRs manage the applicants' calls

In this case study, we want to tell you about what we did and how we developed a new design for our website. We want you to become a part of our team to trust us with your project.

Working process

As a matter of priority, we started with a moodboard to eventually come up with inspiring and outstanding design patterns. It was vital for us to estimate the latest trends and find our own unique style. In fact, our proposals and requirements were quite simple: a light design, complex animations and a lot of colors.

Once it came to the design part, we decided to create prototypes to ensure the fascinating flexibility of the entire development process in the first place. These are simple layouts or also known as wireframes, where we managed to outline the ground-breaking structure of each page.

It took a bunch of time for us to come up with an intuitive and visually-rich design of the main page since it should represent the company's image. Moreover, it is the first page you see when you visit the website. We had a few options to choose from until we picked the one for the current version.

We explored the ins and outs of the technology market to reduce risks across the entire software development lifecycle. In the end, we were looking out for a powerful static site generator Gatsby.js. We conducted full-fledged research and analyzed a tremendous amount of data to ensure it wasn't just hype. Once all pros and cons were considered, we employed this React-based PWA generator.

Take a quick glance to find out features you can benefit from when using Gatsby.js:

• Powered by React and GraphQL, Gatsby allows for building websites at a quick pace. A component-based model makes it possible to reuse existing elements within the website's infrastructure, which, in turn, enhances the development speed and reduces time-to-market.
• Gatsby.js solutions are some of the fastest ones since Gatsby's ecosystem is empowered with up-to-date web standards and top-notch technologies, such as React.js, WebPack, GraphQL, JavaScript, CSS and ES6+.
• Gatsby.js shields you from numerous data breach vulnerabilities since it's separated from the CMS.

Learn more about Gatsby.js development services

We considered all the details and recommendations and built a development plan to maximize our resources and avoid unplanned costs. Besides, we were filling the upcoming pages with content all the way through the development process.

Our team

We used the best of techs and our knowledge to cope with this challenging task. To leverage the full potential of Gatsby.js and acquire the most optimal and remarkable outcomes, we assembled a team of seasoned self-motivated experts. We addressed the core needs of our clients along with the world market trends to make sure we leave our visitors no option but to engage and return. The team was comprised of:

Our Services

• Product development
• Web app development
• DevOps and Cloud Services

Technology

Delivered solution

The new website is empowered with a more search-friendly and socially-focused architecture to deliver significantly more excellent user experience, enhanced lead generation and improved content. The entire site is well-balanced by multiple animation components and provides intuitive navigation through all elements.

To date, you can see a 1.0 version that is not yet enriched with animations. We designed multiple complex animation elements that are currently in the development stage, but we were eager to showcase the work done.

Brocoders is meant to be a corporate website that is divided into several sectors: Services, Industries, Technologies, Cases and Blog. We used a standard functionality in the Blog sector ─ basically, it's a list of posts filtered by category and tag. Case studies are filtered by specific parameters as well. One of the key standout features of our site is that the backend is managed by Strapi, thus guaranteeing rock-solid security, impressive flexibility and easy adaption.

Currently, work is underway to integrate new features and functionality enhancements while implementing smooth animation features. The website is being prepared for the finale release and is already generating interest from potential partners.