Codibly — Advanced Technologies in the Service of the Environment

How we optimized Codibly's site structure to help clients quickly reach key information and increase inquiries about technology projects.

Codibly is a Kraków-based IT company. It builds dedicated software services for clients in various industries (e.g. insurance, healthcare) and holds the deepest expertise and project experience in the energy & utilities sector.

The previous website was built on a template with very weak technical characteristics — poor optimization, Google indexability status, and performance (speed and HTML-code build). An additional problem was a very un-friendly WordPress CMS implementation causing issues in site administration.

Our role

In the project for Codibly, our task was to create a website that reflects the dynamic character of a technology company specializing in IT solutions for the energy industry. We started with a deep analysis of business goals and target users to understand how best to present the offering and company values.

Target audience and personas for Codibly

The Codibly website was designed with two main target audiences in mind: energy-sector companies looking for advanced IT solutions, and potential partners and investors interested in cooperation in modern technologies. Each of these groups has unique needs we accounted for during the design process.

Persona 1: IT manager at an energy company

• Profile: IT managers or CTOs at mid-size and large energy companies, looking for modern technology solutions to help automate and optimize company processes.
• Motivations: Innovation, process digitization, cost optimization, solutions tailored to specific industry requirements.
• Problems: Searching for technology partners offering scalable and modern IT solutions — while lacking a clear vision for cooperation with technology firms.
• Expectations: A clearly presented service offering and delivered projects, easy access to case studies and technologies used by Codibly that demonstrate concrete benefits for the energy industry.

Persona 2: Potential technology partner

• Profile: Operations or decision-making directors at technology companies looking to cooperate with experienced IT partners specializing in solutions for the energy sector and renewable energy.
• Motivations: Joint projects, developing new technology solutions in the energy space, large-scale cooperation.
• Problems: Difficulty finding a trusted partner with experience and knowledge of the industry's specific requirements.
• Expectations: Presentation of Codibly's competencies, the technologies the company works with, and past projects — to demonstrate capacity for high-level cooperation.

Persona 3: Investor

• Profile: Private and institutional investors interested in supporting technology companies in the energy sector.
• Motivations: Investing in innovative projects and technologies with long-term return potential, especially in renewable energy and digitization.
• Problems: Looking for trusted companies with an established position that can guarantee innovative solutions with success potential.
• Expectations: The site must clearly present Codibly's technological potential and communicate both past achievements and growth plans that can interest investors.

UI design

In the UI design phase we focused on creating a modern yet readable layout that speaks to professionals in the technology industry. Our goal was to combine an innovative look with usability, so users could easily find key information.

1. Minimalist design: The site is based on clean lines and generous space between elements, making every section readable and pleasant on the eye. A clear content hierarchy helps users quickly locate the most important information.
2. Dynamic visual effects: Subtle animations and visual interactions give the site a modern feel without excessively distracting users. These effects — such as buttons that change color or scroll-triggered animations — add dynamism, creating a sense of innovation and technological sophistication.
3. Contrasts and typography: We applied contrasting color combinations that help highlight key content. Clear, modern typography makes information easy to read while supporting a professional aesthetic.
4. Clear menu and easy navigation: Key navigation elements were designed intuitively, so users can quickly find the sections they need. The site provides easy access to the most important information on services, projects, and case studies — supporting fast decision-making by potential clients and partners.

The end result is a website that not only attracts attention through dynamic design, but above all makes it easy for users to move around quickly and intuitively — supporting the presentation of Codibly's advanced technology services.

Audit of the existing site

Heatmaps and Google Analytics

The existing site, during audit and after heatmap analysis (hotjar.com and mouseflow.com) and user flow in Google Analytics, wasn't using its potential. Most users:

• didn't reach subpages beyond the main offer pages,
• used the huge form on the homepage at a very low rate of about 0-2%,
• about 50% of people scrolled the page only to the halfway point on mobile devices,
• visited the careers subpage,
• the form button, although highlighted, also wasn't performing (very low click-through)

To reach the goal, we worked on building a new structure and analyzing the existing offering and services together with the Codibly team via remote hangouts. Over several iterations of questions, answers, and data consolidation, a new site structure and a reorganization of the industry and services subpages were worked out.

Based on Google Analytics and heatmaps we also established that the most-clicked menu item and the one generating the most interest was Careers. The least-clicked was the one that was most important for the company (Energy & Utilities). The subpage's nesting level in the menu made it hard for users to reach. After talking with the team we learned that the company had been running a lot of recruitment recently, which explained the results from our analysis.

SEO research and analysis of Google TOP10 pages

We then moved to SERP analysis (Google TOP10 results). The main task was identifying which pages Google rewards and averaging the data. To do this, we had to analyze pages for on-site SEO factors, including:

• content volume — paragraph length and total content length,
• saturation with primary and secondary keywords, and use of related words and questions,
• internal linking,
• use of h1-h4 headings, alt tags,
• percentage placement of primary and secondary keywords in infinitives and their location,

We also conducted competitor analysis in terms of offer structure and chosen style.

Information architecture

Developing information architecture and delivering a presentation of user flow and subpage content.

The information architecture was prepared based on:

• all previously collected data from analytics tools, the audit and the team,
• the completed competitor analysis,

Worth mentioning: UX prototypes and UI design work in figma.com. Thanks to Figma, everything we worked on was in one project. The client had visibility into progress and could leave comments in Figma on any project element at any time.

The effect of work on the new site architecture was:

• reducing the number of subpages through consolidation,
• eliminating thin-content subpages — ones providing little value or very short,
• slimming the Industries submenu to only the main industries: Energy & Utilities / Insurance / Healthcare,
• reducing the number of services-menu subpages and consolidating their content into the new structure,
• elevating the "technology expertise" subpage as a separate new main-menu item (the previous version spread this information across different subpages and a separate technology-stack subpage)

New offering

A significant challenge was preparing the new offering and the Industry and Services subpages containing the company's main services. These items were ultimately promoted to top-level menu items expanding only one level. The previous version of the site had a third-level submenu from which the user had to choose the interesting topic.

User analysis

After the analysis we distinguished two user groups:

• an informed user visiting the site in search of specific product groups,
• a user searching for services by industry who will be interested in the Industries menu item and will find a place there to look up information,

UX / UI design

After three iterations of UX prototyping and conversations with the team (during which new menu-structure concepts were presented), we could move to building the UX wireframes.

The overarching goal at this stage was:

• presenting concepts and views for the Services and Industries subpages, linking them with case studies, the homepage, and each other. Individual services (solutions) were placed under the appropriate categories of the Industries subpage. The Energy & Utilities item, accessible from the Industries menu, contains in its second section solutions thematically linked to the Energy & Utilities industry,
• structuring views on subpages and filling them with content.

Navigation bar

For the Solutions and Services subpages an additional navigation bar was designed that, after scrolling, sits below the main menu. It allows users to smoothly move between sections within the given subpage.

The UX prototyping stage allowed us to:

• design space and content on the wireframes,
• assess user interpretation of content (space planned for the content-creation stage),
• organize key information and set priorities and sections for subpages,
• show navigation elements interactive for the user.

UI design

UI

Designing the visual layer and interactions was highly creative work. The developed style references the company's brand. We used the colors from the company brand, custom icons, and images from the available Codibly library.

Interaction

Some solution subpages were equipped with interactive sections reacting to clicks or changing their content as the user scrolls.

Style guide

The nested structure and the multitude of navigation and interactive elements made it necessary to create rules and systematize all graphic elements in the form of a Style Guide document. The Style Guide is a document describing the elements used in the project — their sizes, distances, states of active elements (e.g. color) for each element on the site such as heading, button, paragraph or text section, and form elements.

This document is especially useful in larger projects where it's particularly important to preserve a consistent element style within the defined rules.

Development

The site was deployed:

• on the front-end layer: custom HTML, CSS, JS code written by us in the Foundation framework, compiled through gulp. The entire coding flow went through the GitLab developer platform,
• on the back-end layer: deployment and our custom integration of WordPress CMS with dynamic ACFpro fields, enabling use of predefined modules to let the administrator independently create additional sections,

Additionally, Google Tag Manager scripts were implemented, with the benefit of:

• asynchronous tag loading — loading the page faster,
• flexible, self-service management and easy implementation of various additional scripts (e.g. plugging in Google Ads, salesmanago, salesforce, heatmaps, etc.), which was important for the company's marketing department,