Redesigning the Polcode Website

Redesigning the Polcode Website

Polcode Team
5 minutes read

Building our completely new online home was a labor of love. By treating the redesign process like any other high-level software project, our teams had the unique experience of what it’s like to work with ourselves as the client.

It’s finally here—the new Polcode website! What began as a small agency of 3 people has grown to become a full-stack design and development house with over 150 members. Our new online home reflects our growth, and better showcases who we are, what we stand for, and what we do best.

To be honest, we outgrew the old website long ago. But redesigning your own brand is a challenging endeavor. A complete redesign often feels like a secondary priority, especially when we are so focused on serving client needs as best as possible. When the time finally came to launch the redesign project, we knew that it had to be big, bold and modern.

So, we did what we do best. The new website was treated as if any other client had come to us for help in redesigning their website.

Key goals:

  • Reflect Polcode’s rapidly growing teams and services, under a new brand look that uses the latest technologies and processes we use for our clients.
  • Present our diverse range of services: team extension, digital product development, web & mobile development & technology consulting.
  • Provide clarity in navigation and make it easier for visitors to understand our tech stack and see how we approach the product development process.
  • Create a fast, responsive and high-performance site that works across all screens and devices—yet making it easy for us to maintain and scale.
  • Tell better stories that demonstrate how we achieve great results.

Challenges:

  • Choosing the right solutions architecture
  • Redesigning an entirely new site during a pandemic
  • Integrating TRAFFIT and HubSpot for sales, marketing and HR
  • Aligning goals across marketing, business, HR and developer teams
  • Planning our new brand look
  • Understanding our ideal customers

Team Members Involved: We pulled in every team and department at Polcode, running the project under our full-service product design and delivery process. Solutions architects, frontend & backend developers, marketers, project management, as well as HR and QA teams came together to deliver the new Polcode.

Read the story below to take a deeper look into our redesign process, and understand all the steps we took to get there—as told by the key stakeholders themselves!

Technologies Used: We are relentless about moving fast alongside the web and remain committed to open-source technologies. The new website was built using React.js, Next.js, TypeScript, Tailwind CSS, Strapi (Jamstack architecture) and followed newly implemented UI design systems on platforms like Figma.

Redesigning the new Polcode website - technologies used

Discovery: Gathering Requirements

Jerzy Zawadzki, CTO at Polcode

We approached the new website in the same way as we would any other client' project, by interviewing the key stakeholders and bringing together technical teams to figure out which technical solutions suited our needs.

  • Business Requirements

The new website had to showcase our ever-expanding range of design and development services, without sacrificing on performance or content loading speeds.

  • Business Needs

We also had to think about all the departments in Polcode, and how the new website could best serve their needs. Everyone from business development, technical teams, marketing, HR, and QA had a part in shaping and defining what they needed most from the site.

  • Software Architecture

The Jamstack architecture won with its speed, scalability and security components. The website delivers static pages, foregoing any backend databases that could slow down the page, or leave it vulnerable to attack. Jamstack does a good job of separating the data layers from the view layer, which means we can easily change the UI or visuals on a page, without needing to touch other layers in the architecture.

  • Technology Selection

After settling on Jamstack, we chose specific technologies which not only fit the architecture, but also made use of our previous expertise from other projects. We choose Strapi, the open-source Node.js Headless CMS for its flexibility and unmatched API. Some of our developers even contributed to Strapi plugins, so we saved a ton of time and resources by relying on what we already knew best. Next.js and React were the next natural decisions for us, as React is one of our core technologies, and Typescript support is becoming very popular in software development.

  • DevOps and Delivery

Our deployment options were fairly straightforward decisions. The new website is generated by Gitlab CI and AWS because we already rely on them for most of our other projects.

READ FULL STORY

Branding: Communicating Our Identity

Arkadiusz Dominik, Product Owner and Head of Marketing

Representing Polcode’s true brand identity was one of the major goals of the redesign. While it’s important to convey our deep technical expertise and comprehensive digital services, we wanted to shine a spotlight on the invaluable resource here at Polcode—our trustworthy people.

Branding: Communicating Our Identity

Everything about the new website (both copy and design) were driven by a new brand communication strategy: Work With Developers You Know and Trust.

This new line of communication is focused around some of the deepest problems in our industry of external software development. When a company hires an outsourced software team, they often don’t know who exactly they’re working with. Some teams do not even meet their programmers or know their names. Trustworthiness goes out the door when the only connection is a contract.

When we gathered Polcode client reviews, we noticed that nearly every response focused on how our teams were ‘great to work with.’ No matter how impressive the technical feats, our clients always seemed to celebrate the people: their responsiveness, deep knowledge about the tech or product, or simply ease of working together day-to-day.

A Polcode client will always get to know our developers as their own teammates, and build trust with them along the way. Polcode’s tagline uses an active voice to emphasize that any visitor to our site knows they’re getting developers who are great to work with, and reliable to trust with building their business.

We also knew we had to increase user engagement on the website, optimize conversion paths and improve conversion rates. The old website had a high bounce rate, a low ratio of pages per session, not satisfying conversion rate. We redesigned the entire site to better flows between pages, and ensure that each element on a page encourages further exploration of the website and contributes to CR improvement.

Planning the Product Design and Development

After establishing requirements and brand language around trust, the next tasks came down to development planning.

The project was implemented through a "full" product design & development process, starting from the UX phase, through UI, culminating with development stages and testing phases. As a product owner, there are many facets to planning the design and development phases. Here’s a brief overview of each component that we decided on:

User Experience (UX) planning
  • User Experience (UX) Planning

In parallel with gathering technical requirements, the UX discovery process involved desk research, interviews and competitor analysis. Analytics tools like Hotjar were used to understand conversion paths and visitor bounce rates, and offered metrics that were critical for the new website. Customer Journey Mapping and Employee Journey Mapping workshops gave a clear picture of a customer’s experience, which led to building buyer personas for clients and understanding their expectations.

User Interface (UI)
  • User Interface (UI)

It was important for the new design to have the qualities of being up to date with the modern web, meaning that it would be lightweight and transparent about our mission and services. This process involved the creation of high fidelity wireframes, testing out new design systems, paired with copywriting strategies to blend design with text.

Presenting Value
  • Presenting Value

Many other software houses aren’t very transparent about how they bring immediate value to their clients. “We build amazing software” is the result of what we do, but the value is that our teams ultimately lowers costs, fills in IT shortages, and solves technical challenges more reliably than farshore providers. The benefits of cooperating with Polcode is that you get an IT partner, who can take business ideas and carry them through every stage of the technical maze, through to market delivery.

Technologies
  • Technologies

Our previous website didn’t do a great job at highlighting the technologies we prefer to use when implementing projects, so more effort was placed into describing our up to date tech stack.

Showcasing Projects
  • Showcasing Projects

We’ve reshaped our project portfolio to be more focused on client stories and outcomes. The Customer Success Stories portion goes in-depth, showing everything from our decision-making process, relationships with customers, and how we approach solving very different challenges in the realms of elearning, finance, ecommerce, AI and machine learning, and much more.

Inviting Career Seekers
  • Inviting Career Seekers

Our new jobs board now better reflects what we’re seeking, what we offer, and what it’s like to work in the Polcode team. Most candidates come from third-party job sites, but many do their ‘research’ on the website itself. With this in mind, we revamped our job posts, copywriting, and everything in between to make applying for careers at Polcode a better experience.

Integrating Traffit and Hubspot
  • Integrating Traffit and HubSpot

Data integrations are always a challenge, but the value they provide to our internal teams proved to be necessary. We decided to integrate TRAFFIT to reach new potential candidates with job offers and give more detailed insights and tools to the HR team. We also integrated HubSpot for our marketing and sales teams to have a CRM, so that we have the best visitor insights and can manage contacts, leads and funnel stages all in one place.

Wrangling Project Management

Alicja Orzeł, Project Manager

The project's success was driven by frequent contact and responding to changes. We wanted to create a place on the web that would not only meet the expectations of visitors, but also give us an opportunity to show who we are. We constantly talk about the benefits of Agile in Polcode materials, so it only makes sense that this project was handled accordingly.

The new website was carried out in the Scrum methodology. We made decisions together during Daily meetings or weekly Plannings, which translated into the current shape of our new website.

The website is not only a vision of the development team, Project Manager and Product Owners. Specialists from HR, Sales, UX, UI departments and, of course, other Polcode developers also provided their suggestions. A great challenge and at the same time a unique achievement was to develop a home that appeals to all of us!

Wrangling Project Management

What can I say about the new website? It's fast, functional and trendy—and it's ours. It’s a website that belongs to the entire Polcode Team!

Building the All-new Backend

Dariusz Zielonka, Backend Developer

Sites built with classic CMS providers such as WordPress or Drupal generate hypertext with content at runtime, often combining layers of back- and frontend code. In essence, this means those sites face latency issues beginning from the moment the content is requested to be delivered to the client. Also, this system of overlapping backend and frontend logic creates risk of potential security breaches.

Fortunately, there are techniques to eliminate these problems with the help of headless CMS (it’s worth mentioning that WordPress makes this possible). In this case, the CMS application acts as a separate backend that exposes the API solely for the generation of static pages. A website created with this method (in the form of static resources in combination with the closest content delivery network (CDN) endpoints) means that it reaches the client simply and safely, with a minimal carbon footprint (due to less computing!)

The backend of the new site can be managed by non-technical users, offering a clean GUI to allow detailed editing of content. A high level of flexibility was also required in introducing changes to the backend, such as adding and modifying functionality at the code level.

Building the All-new Backend

The biggest challenge in creating the right backend was the analysis and selection of the correct tools among the many highly diverse existing open-source solutions, including our chosen Jamstack ecosystem. Ultimately, we chose Strapi for its benefits in:

  • great documentation support
  • continuous open-source development driven by an active developer community
  • the ability to develop the backend locally using a local node.js server and database (independence from external APIs, often found in commercial solutions).

Despite its undeniable advantages, Strapi—just like any other tool—has its disadvantages in a broader perspective, which can present potential challenges such as:

  • no 'preview' functionality in the core (adding it requires your own implementation of this functionality also on the side of the front application),
  • lack of native functionality to support multilingual content (however, it was planned and it was added to the core in one of the release strapi during the work on the website's backend)
  • the need to create a service process for staging and production implementation as well as database synchronization

These kinds of trade-offs are a common part of software development. They’re made manageable because we’re highly aware of what the backend system is capable of, what it does best, and what will present challenges in the future.

Evolving the Frontend with TypeScript

Krzysztof Litarowicz, Rafał Bednarski - Frontend Developers

Going into the Polcode website redesign, we wanted to achieve the golden mean between speed, appearance, best practices and business expectations. When you start from scratch, there are simply too many solutions and possibilities available. That’s why the initial analysis process and requirements gathering are so important early on. Planning and gathering user needs can be a time-consuming process, but it leads to stable results at every other stage of the process.

In terms of the actual frontend technology stack, we decided to fully embrace TypeScript and Types. The growing trend of TypeScript in our industry is too difficult to ignore, and rightly so. It offers some powerful benefits in reliability, predictable, readability—which means more intuitive work for frontend developers. Types solve many of the basic challenges in plain JavaScript code, and offer a very straightforward feedback loop to catch any errors when writing code.

Most importantly, TypeScript works well across multiple frontend developers and remote working. This allowed us to delegate frontend tasks and distribute tasks easily across different teams. TypeScript was able to clearly convey the intent of our designs, so that they can be passed back and forth without any questions arising.

Next.js, React and Tailwind frameworks were also chosen, as they are core technologies used by our frontend teams, and also fully supported by TypeScript.

Evolving the Frontend with TypeScript

Ensuring Quality, Dark Mode Support and API Security

Marcin Gburski, QA Specialist

The new Polcode website was treated like any other of our clients’ projects. We performed a full range of Quality Assurance (QA) processes, including functional manual testing, compatibility tests (capable of running on different hardware, operating systems, applications, network environments or Mobile devices), end-to-end tests, and A/B user testing.

The goal of our QA process is to ensure that the website appears and functions as intended in as many scenarios as possible, from device types, to browser choices. The new site is also available in Dark Mode. It falls under QA’s responsibility to make sure that Dark Mode switching is not only easy on the eyes, but doesn’t break our brand identity colors, or worse—leaves some elements appearing incorrectly.

TRAFFIT and HubSpot also required scrutinizing tests, which is typical for any new data integration service. When connecting services via API, it’s important to identify the data you'd like to pass between the two systems, and to ensure that these communication channels are operating correctly (and securely) under a wide range of situations.

Ensuring quality and dark mode support

A Polcode job, well done.

There’s nothing left to say except to express gratitude to everyone in the Polcode team who had a hand in redesigning our new home. Despite the challenges of remote working, a pandemic, and a redesign from scratch, our teams came together to build something truly worth celebrating.

On-demand webinar: Moving Forward From Legacy Systems

We’ll walk you through how to think about an upgrade, refactor, or migration project to your codebase. By the end of this webinar, you’ll have a step-by-step plan to move away from the legacy system.

Watch recording
moving forward from legacy systems - webinar

Latest blog posts

See more

Ready to talk about your project?

1.

Tell us more

Fill out a quick form describing your needs. You can always add details later on and we’ll reply within a day!

2.

Strategic Planning

We go through recommended tools, technologies and frameworks that best fit the challenges you face.

3.

Workshop Kickoff

Once we arrange the formalities, you can meet your Polcode team members and we’ll begin developing your next project.